【Wordpress ブロックエディタ (gutenberg)】の編集画面と実際の画面のスタイリングを同じにしたい

Question

前提

今回、解決したい問題は、
ブロックエディタの編集画面のスタイリングと
実際の画面のスタイリングをできるだけ
同じようにしたいと思っています。

オリジナルのブロックを追加しているのですが
そこで困っているのが色の反映です。

現在の仕様

サイトのカラー設定をカスタムフィールドを使って
一括変更できるようにしています。
color-template.php　というテンプレート内の内容を
header.phpで呼び出し、
:rootで指定されるカラーをインライン化して
style.cssに適用されるようにしています。

以下が
color-template.phpの内容です。

<?php
    $pageID = 2405;
	$radio = get_field('color_templete',$pageID);
	if( $radio === "red_01"):
?>
    <?php if ( have_rows( 'set_1',$pageID ) ) : ?>
    <?php while ( have_rows( 'set_1',$pageID ) ) : the_row(); ?>
    <?php
        $dark = get_sub_field('color_dark');
        $main = get_sub_field('color_main');
        $light = get_sub_field('color_light');
    ?>
    <?php endwhile; ?>
    <?php else : ?>
    <?php endif; ?>
<?php elseif( $radio === "red_02"): ?>
    <?php if ( have_rows( 'set_2',$pageID ) ) : ?>
    <?php while ( have_rows( 'set_2',$pageID ) ) : the_row(); ?>
    <?php
        $dark = get_sub_field( 'color_dark' );
        $main = get_sub_field( 'color_main' );
        $light = get_sub_field( 'color_light' );
    ?>
    <?php endwhile; ?>
    <?php else : ?>
    <?php endif; ?>
.
.
省力
.
.
<?php endif; ?>
<style type="text/css">
    :root {
        --color0:<?php if($light){echo $light;}?>;/*とても薄い 50-200*/
        --color1:<?php if($main){echo $main;}?>;/*薄い 300-400*/
        --color2:<?php if($dark){echo $dark;}?>;/*メイン 500-600*/
        --colorG:#E0E0E0;/*グレー*/
        --colorB:#212121;/*ブラック*/
    }
</style>

この情報がstyle.cssで

    color: var(--color1);

のように書いてある箇所に反映される仕組みです。

解決したいこと

例えば、もともと『赤』を選択していて、
色の変更をしようと思いcolor-template.phpで『青』を選択した場合、
サイト全体の配色がもともと設定している青色のカラーコードが読み込まれるのですが、
実際の画面は色の変更がされますが、編集画面は変わりません。

ブロックエディタの場合、
編集画面用のCSSと実際の画面のCSSが必要になると思うのですが、
ここの紐づけが上手くできるようにしたいと思っています。

編集画面用のCSS：『acf.css』
実際の画面用のCSS：『style.css』

これをfunctions.phpで

<?php //ブロックエディタCSS適用
add_action('after_setup_theme', 'block_editor_css');
function block_editor_css() {
  add_theme_support('editor-styles');
  add_editor_style('style.css'); //実際の画面用CSS
  add_editor_style('acf.css'); //ブロックエディタ編集画面用CSS
}
?>

と切り分けて読み込んでいますが
現在の仕様では、『color-template.php』の内容を
編集画面用のCSS『acf.css』に適用できずに悩んでいます。

『color-template.php』でサイトの配色を一括変更した際に
編集画面の配色も一括変更されるようにしたいということです。

分かりづらい質問で申し訳ございませんが
お力添えいただけますと幸いです。

Answer 1

admin_headでそのcolor-template.phpを出力するようにすればいけるんでないかと思います。

Comments

[yuiku]

ありがとうございます。
admin_headに出力させるためにはfunctions.phpへの記述で可能でしょうか？
もしよければadmin_headに出力する方法と投稿と固定ページのみに反映させる出力方法を
ご存知でしたらご教授いただけますと幸いです。

require_once(get_template_directory() . '/color-templete.php');
add_action('admin_head-post-new.php', 'admin_custom_style');
add_action('admin_head-post.php', 'admin_custom_style');
add_action('admin_head-page-new.php', 'admin_custom_style');
add_action('admin_head-page.php', 'admin_custom_style');

これは違いますよね？

[KazuhiroHatano]

それじゃあ全ページの冒頭にcolor-templete.phpが出力されちゃいますね。
color-templete.phpを出力する関数を作ってそれをadd_actionしてください。

[yuiku]

ありがとうございます。
試してみます！