【WordPressブロックエディタ】カラム内のブロックを折り返して複数行で表示させたい

WordPressブロックエディタの「カラム」はブロックを横並びにするときとても便利ですが、一行で完結します
ひとつのカラム内で複数のブロックを折り返して表示させることはできません(と思います)

しかし、こんな感じで画像+テキストを上に足していくので、一番上に追加すると自動的にずれてくれるようにしたかった↓

なので、「カラム」を使わずに、普通にブロックを入れていきます

今回バナー+テキストでひとつのボックスなので、グループ化します(子とします)
重なったグループをさらにまとめてグループ化(親とします)
グループにそれぞれクラス名を付けます

親グループ→.box-group
子グループ→.box-item

そして親グループのほうにflexを設定

.wp-block-group.box-group{
display:flex;
flex-wrap:wrap;
}

.wp-block-group.box-item{
width:48%;
}

.wp-block-groupはブロックをグループ化したとき自動で付くクラスです
ページ内に他のグループがある場合もあるのでクラスを付けて区別しました

これで、親グループ内で子グループを、横並びを保ったまま上に追加していける=折り返せるようになりました

「ギャラリー」を使うと折り返しできるみたいなんですが、ギャラリーには画像しか入らないため今回のように画像+テキストでひとつのボックスにする場合は使えず

もっといいやり方があるかもしれないですが
今のところこれでやってます

コメント