TT2をはじめとするブロックテーマで、テンプレートを追加(カスタムテンプレートを追加)すると、フロントエンド側では以下のような形でbodyclassが付与されます。

【固定ページで作成したカスタムテンプレートを使った場合】
page-template-wp-custom-template-カスタムテンプレートスラグ

【投稿で作成したカスタムテンプレートを使った場合】
post-template-wp-custom-template-カスタムテンプレートスラグ

例えば、「page-wide」というスラグ(カスタムテンプレート名)を持つテンプレートを追加すると、以下の画像のように、フロントエンドでは「page(またはpost)-template-wp-custom-template-page-wide」というクラスがbodyタグに追加されるというものです。

【TT2】カスタムテンプレートを選択した際に、エディタ側にもbodyclassを付与する方法(メモ)|Personal WP Customization Notes (PWCN)

でも、ブロックエディタ側には、このbodyclassが追加されないんです。

【TT2】カスタムテンプレートを選択した際に、エディタ側にもbodyclassを付与する方法(メモ)|Personal WP Customization Notes (PWCN)

いろいろ調べていると、iframe内に出力されているようなのですが、できればbodyclassに付与して同じスタイルコードを使いたい。

そんな時に便利なコードを紹介します。

紹介するコードは、こちらのページに掲載されているものを少し変えて、フロントエンドと同じクラスが付与されるようにしたものです(コード提供者に大感謝!!)

以下のコードをテーマのfunctions.phpや独自プラグインのプログラムへ追加するだけです。

/***** エディター側にbodyclassを追加 *****/
if ( !function_exists( 'sample_admin_body_template_class' ) ){
function sample_admin_body_template_class( $str_classes ) {
    global $post;
    $template_slug = get_page_template_slug( $post );
    $classes   = explode(' ', $str_classes);
    $classes[] = $template_slug;
global $post_type;
	$pre_type = $post_type.'-template';
	$new_str_classes = join($pre_type, $classes);

    return $new_str_classes;
}
}
add_filter( 'admin_body_class', 'sample_admin_body_template_class' );

参考ページのコードでは、管理画面(編集画面)側に出力されるクラスに「投稿タイプ-template」が付加されず、完全一致にならないため、管理画面側の判別関数を追加(コードの赤字部分)して完全一致するようにしています

1点、注意事項として、カスタムテンプレートでないテンプレートのbodyclassにも「page-template-(投稿の場合はpost-template-)」というクラスが出力されてしまいますが、クラスが1つ追加されるだけで、特に使うこともないでしょうから、このままで大丈夫でしょう。

調べると、他にもJSを使う方法などが紹介されていますが、このコードが一番単純かつ、すぐに実現できるコードなので、メモを兼ねて公開しておくこととしました。

ただし..この方法では実現できないことがあります。それは..

ブロックテーマのテンプレート編集画面ではbodyclassが付与されないことです。

原因は、テンプレート編集画面は、投稿編集画面などのように特定のテンプレートを適用させていないので、当然ながら「get_page_template_slug」関数で使用しているテンプレートを判定することは無理なので、結構な時間を使って調べ、いろいろと試行してみましたが、私の能力では残念ながら実現できませんでした。

冒頭の参考ページ内のリンクなどでいろいろと言及されているようですが、この件については解決に至っていない(というか、エディタという名前のいろいろなものがごちゃごちゃになっていそうな感じ)ので、今後のテーマエディター(今はベータ版みたい)の改善に期待したいところです。