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

画像の配置による回り込みのおさらい

右寄せ・左寄せの仕様

ブロックエディター（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 – ブロック整形コンテキスト

グループとブロックスタイルの使い方

---