レイアウトブロック

ブロックエディタには、コンテンツのレイアウトの助けになるようなツールというか、ブロックが結構たくさんある。デザインブロックというグループになるようだ。当初は、「カラム」だけだったような気もするが、ワードプレスのバージョンがあがるにつれて、どんどん増えてきているようだ。スペーサーなどというブロックまである。その昔、スペーサーなどというもの(多くの場合、GIF画像だった。)を使ってはいけないと言っていた時代もあったような。ここでもう一度整理してみる。

カラム

一列目の段落

二列目の段落

三列目の段落

一番外側が wp-conteiner-4 wp-block-columns で、display:flex で、gapが2emになっている。
その直下に、wp-container-1〜3 が、wp-block-column で、basisが、0で、growが1になっている。で、その中に段落がある。

横並び

一列目の段落

ここが、二列目の段落です。

三列目の段落

横並びというのがある。つい最近のバージョンまで「行」と言っていたのではなかったか。
外側が、wp-conteiner-4 wp-block-group で、flexで、gapが0.5em、nowrap になっている。align-items:centerで、横方向は指定が無い。
直下に、段落があり、スタイルの指定は何も無い。したがって、幅はautoらしい。
画面右のブロックの設定で、センタリング、右寄せなどが選択できるようになっている。wrap, nowrapも選択できる。

縦積み

一列目の段落

ここが、二列目の段落です。

三列目の段落

横並びを複製して、設定フォームで縦積みに変えただけ。wrapで、directionがcolumnに変わっている。

グループ

一列目の段落

ここが、二列目の段落です。

三列目の段落

外側が、wp-conteiner-7 wp-block-groupで border-box以外、スタイルはあたっていない。
直下に、wp-block-group__inner-containerがあり、これもスタイル指定無し。
その下に、段落が3つあり、同じくノンスタイル。グループ化して、スタイルは自分でどうぞ、ということらしい。
縦積みとの違いは、段落が幅100%に広がり、個別のマージンで上下の間隔ができている。(縦積みはギャップ。)

スペーサー

この上にスペーサーがある。高さは10ピクセルにしてみた。wp-block-spacerというdivがあり、style=”height:10px”が指定されている。スペーサーだけに、高さ以外の指定は何もできない。色も背景も。

掲載日時: 2022年5月30日(月) 14:53