カスタム投稿タイプにヘッダーやフッターが表示される(WordPress不具合)

ある日突然、カスタム投稿タイプの編集画面のレイアウトが崩れた。

本来、というか今まで表示されてなかったヘッダーやフッターなどのブロックが、なぜか表示されるようになっている。

おそらく、WordPressのアップデートにより仕様が変更になった模様。

状態としては、テンプレートで作成したレイアウトがそのまま編集画面に反映されるようになっている。

作成したレイアウトにはヘッダーやフッターを挿入しているので、それが編集画面にもそのまま表示されるようになった、というわけ。

ただし、これは“カスタム投稿タイプの編集画面だけ”に起きる現象で、通常の投稿や固定ページの編集画面では発生しない。

しかも、ビジュアルエディタのみで発生し、コードエディタでは発生しない。

なんともややこしい話だが、海外フォーラムでもこの件について話題が上がっているので、おそらく間違いない。

カスタム投稿タイプの編集画面だけ、テンプレートがそのまま反映されてしまう。

今までは、タイトル(post-title)と本文(post-content)だけが編集画面に表示されていたが、

テンプレートに含まれるヘッダーやフッターも表示されるようになった、というわけ。

対策として、以下のコードを functions.php に記述する↓

// カスタム投稿タイプの編集画面でのみ適用(ヘッダーやフッターなどを非表示にするためのCSS)
add_action('enqueue_block_editor_assets', function () {
	$screen = get_current_screen();
	if ($screen && $screen->post_type === 'カスタム投稿タイプのスラッグ') {
		wp_enqueue_style(
			'prop-editor-style',
			get_stylesheet_directory_uri() . '/editor-style.css',
			array(),
			'1.0',
			'all'
		);
	}
});

あわせて、editor-style.css というCSSファイルを作成し、テーマディレクトリの直下に置く。

/* 編集画面で非表示にしたいブロックたち */
.editor-styles-wrapper [data-type="core/template-part"],
.editor-styles-wrapper [data-type="core/freeform"],
.editor-styles-wrapper [data-type="core/shortcode"],
.editor-styles-wrapper [data-type="core/html"] {
  display: none !important;
}

/* 本文外の見出しを非表示に(本文内は残す) */
.editor-styles-wrapper > .is-root-container [data-type="core/heading"] {
  display: none;
}
.editor-styles-wrapper [data-type="core/post-content"] [data-type="core/heading"] {
  display: block;
}

これで、カスタム投稿タイプの画面も、タイトルと本文だけの表示となる。