ブロックエディターでは、サイトエディターのスタイル設定から、簡単に背景画像を設定できるようになっています。
そこでは画像位置の固定（繰り返しの設定）と共に、画像の自動拡縮（coverやcontainなど）を指定できるようになっていて、大抵の場合は、繰り返しなし、縦横比を維持したまま画像を自動拡縮するcoverに設定するのではないでしょうか？
そうすることで、表示画面側では繰り返しなく縦横比を維持したまま、画面サイズに合わせて画像を拡縮してくれるのですが、その設定が投稿や固定ページの編集画面（ブロックエディター）にも反映されてしまうため、サイドパネルやブロック一覧などを表示して画面領域が狭くなった時や、そもそも画面サイズの小さいパソコンで編集する時などに、表示画面側では被らない隅の画像などが被ってしまい、編集しにくいことがあります。
このサイトはパソコンで表示させた時、左サイドに大きな鳥、右サイドに樹木の幹が見えると思いますが、表示画面側ではその間にコンテンツが表示されるものの、ブロックエディターを開くとこれらが編集領域に被って編集のしにくさを感じていました。
少なくとも私は編集画面の使いにくさはコンテンツを作る意欲を失うので、対策として、以下のスタイルコードを使って、ブロックエディター側だけ背景画像の振る舞い（スタイルコードでいうbackground-size）をautoにするようにしています。
/*** エディターの背景画像のサイズを変える（エディターを見やすくするため） ***/
body.block-editor-iframe__body.editor-styles-wrapper {
background-size: auto;
}同じようなことで困っている方はぜひ試してみてください。
ブロックエディター側にスタイルコードを反映させるには「enqueue_block_assets」にフックさせてスタイルシートを読み込む、またはeditor-style.cssを適切に読み込ませてそこへスタイルコードを追加する必要がありますのでご注意ください。
コメントを残す