WordPress | Gutenbergで画像の回り込みを解除する方法
新エディタ「Gutenberg」で画像の横に文章を回り込ませるとそれを解除する手段がどうにもイマイチですよね
「カスタムHTML」 のブロックはフォーマットの中にあります
「画像」ブロックを使う
通常の「画像」ブロックで追加した画像左寄せ（文章回り込み）の解除方法は「カスタムHTML」のブロックを追加して<div style="clear:both;"></div>と記述
実際に上記の方法で解除して結果がこちら↓
左寄せを選んで画像の横にテキストを回り込ませています
回り込みを解除したい場所にカスタムHTMLブロックを追加して<div style="clear:both;"></div>と記述
これにて解除されております
「インライン画像」ブロックを使う
ブロックカテゴリのインライン要素にある「インライン画像」ブロックを使うと<P>タグ内で画像とテキストが入力可能で、ひとつのブロック要素として扱われます
この方法は折り返しを含む2行目からは回り込まずに画像の下に表示されます
テキスト1行のみの回り込みで良いならこれも使えるかもしれません
実際に上記の方法で解除して結果がこちら↓
インラン画像ブロックテストインラン画像ブロックテストインラン画像ブロックテストインラン画像ブロックテストインラン画像ブロックテスト
「メディアと文章」ブロックを使う
ブロックカテゴリのレイアウト要素にある「メディアと文章」ブロックを使うと画像と同時に横にテキストブロック、画像の下にもブロックが追加されます
CSSを見ると「メディアと文章」ではグリッドレイアウトで構成されていて、画像（メディア）のclass「wp-block-media-text__media」には「grid-area:media-text-media」
画像の横にあるテキストブロックのclass「wp-block-media-text__content」には 「grid-area:media-text-content」が設定されています
グリッドレイアウトなので回り込み解除用のブロックは不要
（画像下のブロックを消してしまっても復活する模様）
実際に上記の方法で解除して結果がこちら↓
画像下のテキストエリア
追加されるテキストブロックの文字が大きいですね！
メディアのタイトルエリアとして大きくしといたよって事でしょうか
HTMLでみると「has-large-font-size」というclassが付与されています
通常の文字サイズにしたい場合はこのclassを取っ払うか、このブロックを削除すると通常のテキストブロックが生成されるのでそれで。
どのブロックで画像を挿入するべきか
文章の回り込みが必要なければ通常の「画像」ブロックで良さそう
回り込ませる時は「メディアと文章」ブロックですかね
グリッドレイアウトなので古いブラウザが未対応な部分もあるかもしれませんが、いやグリッドレイアウト未対応はもう殆ど使われてないですかね、多分。