ブロックテーマの背景画像設定を投稿や固定ページ編集画面では無効にする方法

WordPressのブロックテーマでは、サイト全体の背景画像や背景色、文字色などが指定できるようになっていて、これらの設定はサイトエディター（「テーマ」→「エディター」で開く画面）の「スタイル」という項目から変更できるようになっています。

でも、ここで背景画像を設定すると、サイトエディターとフロントエンドだけでなく、投稿や固定ページの編集画面にも反映されるので、例えば本サイトのように本文やサイドバーの部分は背景色があるという形態だと、いつも書く編集画面が使いにくくなってしまいますね。

そこで以下のコードを有効化しているテーマのfunctions.phpへ追加することで、大抵のブロックテーマで投稿や固定ページの編集画面のみ背景画像を無効にすることができます。

本文コンテンツの背景色については、サイトエディターの背景色の設定と、個別ページテンプレートの本文コンテンツを囲むグループの背景色を合わせる必要がありますのでご注意ください

function pwcn_disable_editor_background_image(){
$custom_css_pre = "
body.block-editor-iframe__body.editor-styles-wrapper.post-type-post.wp-embed-responsive {
	background-image: none;
}
body.block-editor-iframe__body.editor-styles-wrapper.post-type-page.wp-embed-responsive {
	background-image: none;
}
body.block-editor-iframe__body.editor-styles-wrapper.post-type-wp_block.wp-embed-responsive {
	background-image: none;
}
.editor-styles-wrapper.block-editor-writing-flow{
	background-image: none;
}
";
	
	//タブを除去
$custom_css_deltab = preg_replace('/\t+/', '', $custom_css_pre);
//改行を除去
$custom_css = str_replace(PHP_EOL, '', $custom_css_deltab);

//追加したスタイルコードをサイトエディタ側へインライン出力
	wp_add_inline_style( 'wp-edit-blocks', $custom_css ); 
}
add_action('init','pwcn_disable_editor_background_image');

一応コード内に以下のスタイルコードがないとダメなケースがありましたので入れていますが、必要なければ削除しても構いません。

.editor-styles-wrapper.block-editor-writing-flow{
	background-image: none;
}

また、カスタム投稿タイプの編集画面に適用させる場合には、以下のコードを追加して「カスタム投稿タイプのスラグ」となっている部分を実際のものに変更すれば適用されます。

body.block-editor-iframe__body.editor-styles-wrapper.post-type-「カスタム投稿タイプのスラグ」.wp-embed-responsive {
	background-image: none;
}

ちょっと詳しく話をすると、WordPressのブロックエディター（サイトエディターや投稿・固定ページ編集画面のエディター）はframeで埋め込まれていて、通常の管理画面側のスタイルは適用されず、上記のようにwp-edit-blocksへインラインで追加してやる必要があるんですね。

この手法はブロックに対して何かのスタイルを追加する際にも重宝すると思うので、覚えておいて損はないかもしれません（笑）。