【SANGO】ブロックエディタで画像にテキストが回り込まない問題と対処法

この記事はWordPressのテーマによって挙動が異なる部分を扱っています。主にSANGOテーマでの例をご紹介します。

目次非表示

ブロックエディタで画像にテキストが回り込まなくなった
- 原因：HTML構造の変化
対処法：「グループ」ブロックで囲む
SWELLではそもそも回り込まない
まとめ

ブロックエディタで画像にテキストが回り込まなくなった

以前のWordPressでは、ブロックエディタで画像を挿入してツールバーから「左寄せ（または右寄せ）」を選ぶだけで、テキストを画像に回り込ませることが簡単にできていました。

しかし、ある時期のアップデートを境に、この動作ができなくなりました。
（SANGOテーマ使用中に気づいた点です）

エディタの編集画面上では回り込んで見えるのに、フロント側（実際の表示）では回り込まない——という状態になります。

原因を調べたところ、WordPressのアップデートによって画像ブロックが吐き出すHTMLの構造が変わったことが原因のようです。

回り込まないサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

↑私の環境下ではエディタ内（編集側）では回り込んでいるのですが、フロント側（表示側）では回り込んでいません。

原因：HTML構造の変化

以前のHTML構造：

<div class="wp-block-image">
<figure class="alignleft size-full is-resized"><img src="～～ /></figure>
</div>

現在のHTML構造：

<figure class="wp-block-image alignleft size-full is-resized">
  <img src="～" />
</figure>

以前は <div class="wp-block-image"> でラップされていたものが、現在は figure タグ自体に wp-block-image クラスが直接付く形に変わっています。この構造の変化により、floatによる回り込みが効かなくなっています。

対処法：「グループ」ブロックで囲む

これを回避するには、Wordpress標準の「グループ」というブロックを使うのが最もシンプルな方法です。

回り込むサンプル

画像ブロックとテキスト（段落）ブロックを、同じグループブロックの中にまとめて入れるだけで、フロント側でも正しく回り込みが反映されます。特別なコードの追加は不要です。

SWELLではそもそも回り込まない

SWELLテーマをお使いの場合は、グループブロックを使っても回り込みが機能しません。これはSWELL開発者による意図的な仕様です。

開発者さんが初心者向けに熟慮した結果のようです↓

WordPress初心者の多いSWELLでは、回り込みが必要な人よりも、「floatをよく知らず回り込みもさせたくないのに誤操作でfloatさせてしまい焦ってしまう人」の方が多数のため、現状ではこのような仕様にしています。

（そのようなケースでは不具合として報告されてくる方もけっこういらっしゃるので…。）

どうしても回り込みが必要な場合は、段落ブロックにクラスを付けて clear: none; を指定していただければと思います。
画像ブロックと段落ブロック < SWELLに関する質問

どうしても回り込みが必要な場合は、段落ブロックにカスタムCSSクラスを付けて clear: none; を指定する方法で対応できます。

まとめ

WordPressのブロックエディタで画像にテキストを回り込ませる方法は、テーマによって挙動が異なります。

テーマ	対処法
SANGO	画像と段落を「グループ」ブロックでまとめる
SWELL	`clear: none;` をCSSで指定する
その他	テーマのHTML構造・CSS設定を確認する

使用テーマに合わせた方法で対応してみてください。

この記事を書いた人