ブロックエディタのカラムブロックで複数行（2行x3列）を作る方法

WordPressのブロックエディタはだいぶ使いやすくなってきています。

最近はブロックエディタでサイトを作ることも多いです。

ブロックエディタの特徴は、グリッドレイアウトが簡単にできるということだと思います。

実はカラムブロックは１行しか対応していません。

例えば、2行x3列のグリッドを作成したいと思ったときに、素直に作ると3列のカラムブロックを2個使う方法になります。

■■■
■■■

この方法、編集している時には、一見良さそうに思えます。しかし、レスポンシブの時に2列の表示に切り替わると、２＋１にわかれてしまい、連続したレイアウトにならなくなる問題があります。

■■
■
■■
■

では、ブロックエディタで奇数個のカラムをレスポンシブで連続させるにはどうしたらいいでしょうか？

この記事では、ブロックエディタのカラムブロックを１つだけ使って複数行のレイアウトを実現する方法についてご紹介します。

この記事で分かること

複数行カラムをブロックエディタで実現する方法
ギャラリーブロックを使う手もある
まとめ

複数行カラムをブロックエディタで実現する方法

カラムブロックの1行にすべてのブロックを入れてしまえばよい

カラムブロックを複数使うとrowが複数あることになります。それが問題ですので、rowを一つにすれば問題は無くなります。

例えば、2行 x 3列の場合は、1行 x 6列のカラムにまとめます。

しかし、このままだと、PC画面では1行にすべてのブロックが表示されてしまうので、複数行のカラムを実現できません。

横長のカラムになってしまう問題をどう解決するか？

今回の方法の良いところは、PC画面サイズだけ問題が起きることです。

PC画面用のCSSを調整することで、複数行のカラムを実現します。

なので、大きな画面サイズの時だけCSSを書き換えてあげれば大丈夫です。

CSSの追加内容

追加CSSとかに書いておけば大丈夫です。

flex-grow:1が設定されていれば、flex-basisは正確じゃなくても自動的に調整されます。

/* 782px以上の場合 */
@media (min-width: 782px) {
/* nowrapを解除 */
    #hogehoge .wp-block-columns {
        flex-wrap: wrap;
    }
/* 折り返しブロックがくっつかないようにマージン追加 */
    #hogehoge .wp-block-column {
        margin-bottom: 16px;
    }
#hogehoge .wp-block-column:not(:first-child){
	margin-left:0;
	}
/* 折り返しブロックの行頭以外にマージン追加 */
    #hogehoge .wp-block-column:not(:nth-of-type(3n+1)) {
        margin-left: 16px;
    }
/* 一行のカラム数を3つに指定 */
    #hogehoge .wp-block-column {
        flex-basis: calc(33.333% - 16px)!important;/*正確じゃなくてもOK*/
        flex-grow: initial;/*一番重要*/
    }
}