以前の記事でGutenbergエディターでの画像の回り込み（float）解除方法について考えてみましたが、今回は“グループ” ブロックとブロックスタイルを使って画像の回り込み解除する方法を紹介します。
画像の配置による回り込みのおさらい
右寄せ・左寄せの仕様
ブロックエディター（Gutenberg）で画像ブロックに右寄せ又は左寄せを指定した場合、floatが付与されることにより後続の要素が画像の横に回り込むようになっています。
以前の記事では、この回り込み効果を任意の箇所で解除する方法を考えました。
今回はその続きの話になります。
デフォルトブロックの “グループ” を利用する
“グループ” ブロックとは
名称からも想像できますが、複数のブロックを1つのグループにすることが可能です。
グループ化されたブロックはwp-block-groupというクラス名の付いた<div>要素に内包される形となります。
今回は親要素となる “グループブロック” のスタイルを操作して解決しよう、という話になります。
“メディアと文章” との違い
そもそも画像と文章を横並びにレイアウトするのであれば “メディアとテキスト” というブロックを使えば実現できます。しかもレスポンシブ対応も可能です。
画像の配置指定による回り込みと異なる点はメディアの幅を指定する手段が%指定であることです。
画像の幅をフルサイズやpx指定に指定したい場合は “メディアとテキスト” は使えません。
“グループ” に適用するブロックスタイルを用意する
ブロックスタイルとは
Gutenbergエディターではブロック毎に任意のスタイル（CSS）を適用することができ、これをブロックスタイルと呼んでいます。
オリジナルのスタイルを用意する方法の詳細は下記ページを参考にしてみてください。
ブロックスタイルの登録
/js/myguten.js
wp.blocks.registerBlockStyle( 'core/group', {
name: 'flow-root',
label: '回り込み解除',
});
ブロックスタイルの登録はJavaScriptで行います。core/groupがブロック名でグループブロックのことを指しています。
functions.php
function myguten_enqueue() {
wp_enqueue_script( 'myguten-script', get_theme_file_uri( '/js/myguten.js' ), array(), wp_get_theme()->get( 'Version' ), false );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
functions.phpでJSファイルを読み込みます。
style.scss
.wp-block-group {
&.is-style-flow-root {
display: flow-root;
}
}
CSSでdisplay: flow-root;を指定しています。ここが今回の話の最重要ポイントです。サイトのデザインに合わせてmargin-bottom等を追加すると見やすくなると思います。
display: flow-root;
これを指定した要素を基準として表示領域が確保されることで、その後に続く要素はfloatの影響を受けなくなります。
参考リンク
MDN Web Docs – display
MDN Web Docs – ブロック整形コンテキスト
グループとブロックスタイルの使い方
グループ内に回り込みを利用したい画像と段落等を配置し、グループの後に回り込ませたくないブロックを配置します。
参考画像は回り込み（右寄せ・左寄せ）適用前の状態です。青枠の部分がグループになります。
画像に「左寄せ」を指定します。
後続の段落が画像の右側に回り込みますが、その次の段落も回り込みの影響を受けています。
グループを選択するとブロック設定欄に追加したスタイルが表示されているはずですので、これを選択してください。
ブロックスタイルの効果でグループブロックにdisplay: flow-root;が適用されます。
グループの外の段落はdisplay: flow-root;の効果でfloatの影響を受けなくなるため、回り込みが解除されます。
