画像ブロック：ズームアウト時に画像が左寄せになる

[t-hamano]

注：ズームアウトトグルは、「APIバージョンが2以下のブロックが存在しない場合＝エディターがiframeになる場合」のみ表示されます。そのため、Arkhe Blocks ProなどAPIバージョン2のブロックが含まれる場合、この問題は再現できません。

動画

https://github.com/user-attachments/assets/afd22ae0-e5db-4c1c-a0f5-7d27e807edd8

原因

Arkheでは、デフォルトで画像を左右中央寄せにするために、以下のようなCSSが定義されています。

[data-type="core/image"] {
    > .components-resizable-box__container,
    > .components-resizable-box__container > img {
        margin-inline: auto;
    }
}

これは通常モードでは正しく適用されますが、ズームアウトモードではResizableBoxコンポーネントの代わりにただのdivタグになるため、このスタイルが当たらなくなってしまうようです。

デフォルトのHTML

<figure class="wp-block-image">
  <div class="components-resizable-box__container">
    <img src="" alt="">
    <div>
      <div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-right"></div>
      <div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-bottom"></div>
    </div>
  </div>
</figure>

ズームアウト時のHTML

<figure class="wp-block-image">
  <div>
    <img src="https://live.staticflickr.com/4572/38004374914_6b686d708e_b.jpg" alt="画像に alt 属性が指定されていません。ファイル名: 38004374914_6b686d708e_b.jpg">
  </div>
</figure>

対策

ズームアウト時にリサイズできなくなること自体はGutenbergのバグだと思いますが、取り急ぎ対処するならば、以下のようにクラス名を使わない事で解決できると思います。

[data-type="core/image"] {
    > div,
    > div > img {
        margin-inline: auto;
    }
}