Gutenbergでの画像配置による回り込み解除：その1【WordPress】

WordPressにおいて現在標準のブロックエディタであるGutenbergで記事を編集する際、画像の配置位置による後続のブロックの回り込みを解除する方法について考えます。

テンプレート制作やコーディング時の話ではなく、あくまでエディタをうまく使って記事を書くための方法ですのでご注意ください。

そもそも回り込みとは

通常、画像ブロックの次に段落ブロックがあるとすると下記画像の左側のように縦に積み重なっていきます。画像ブロックの右側のスペースには何も無く、これが回り込みしていない状態になります。

これに対し右側の図では画像横のスペースに後続のテキストが入り込んでいます。これが回り込みしている状態となります。

この回り込みを利用することで余白を有効に使える等、柔軟なレイアウトが可能になります。Gutenbergエディタでは画像ブロックの設定項目で回り込みの指定ができるようになっています。

下の図のAは回り込みでうまく表示できている例です。しかしBやCのようにテキスト量が少ない場合はその後につづく見出しブロックまで回り込んでしまいます。これは画像に指定した回り込み効果がそれ以降のブロックにも影響するからです。

できればDのようにテキストは回り込ませたいが見出しブロックは回り込ませたくない、といった場合に出くわすこともあるのです。

Gutenbergで画像ブロックを配置し、設定で「画像の配置」を「右寄せ」もしくは「左寄せ」にした場合、画像の表示位置だけが変わるのではなく、後続ブロックの回り込みも発生します。

これは画像ブロックに対して、右寄せに指定した場合はfloat: left;、左寄せに指定した場合はfloat: right;のスタイルが付与されるためです。画像の親要素にtext-alignが指定されることもありません。

段落内に画像を表示する “インライン画像” はこの限りではなく、テキストの配置設定に従って左右、もしくは中央寄せで表示されます。後続ブロックの回り込みはありません。

段落内にインライン画像のみ配置し左右寄せ、もしくは中央揃えにすることも可能です。

floatの効果を解除する方法としては次のようなものがありますが、Gutenbergエディタで可能なものとなると限られてきます。

画像ブロックの親要素をエディタで操作できないので 1 と 2 は除外。そもそも目当ての要素が都合よく親要素に入っているHTML構造になっていません。
divは要素をまとめる要素ですので空にしたくありませんので 3 も不可。

できれば 4 の方法でfloat解除したいのですがブロックのCSSをエディタで編集することはできません……

clearfixの手法はあまり使われなくなってきています。それに代わるdisplay: flow-root;に対応するブラウザも多くなってきました。

Gutenbergでは記事編集中にブロックのCSSを編集することはできませんが、追加のCSSクラスを付与することができるようになっています。あらかじめclear: both;を指定したクラスセレクタを用意しておき、目当てのブロックにそのクラス名を追加することでfloatの解除を実現します。

.clear {
  clear: both;
}

「回り込みの図」におけるBとCの見出しブロックに.clearというクラス名を付けた場合、そのブロックはfloatの効果が解除されDのように回り込まずに表示されます。
Gutenbergのエディタ上で完結させるとなるとこの方法かな、と思います。

恥ずかしながらこの記事の後日、グループブロックの存在を知りました。
これを利用すると上記の「floatを解除するには – 2. 親ボックスにdisplay: flow-root;」が実現可能になります。