GutenbergのブロックエディターにフロントエンドのCSSを反映させる

投稿日 2020/01/21

Gutenbergのブロックエディター、せっかく導入しても編集画面のフォントや色味がフロントと全然違って意味ないよ！

と思ったのでなおしたという話。

functions.php の修正

functions.php に以下のコードを記述する。（自分の環境に合わせて適当に書き換えてね）

function editor_style() {
    add_theme_support( 'editor-styles' );
    // 親テーマのCSSを読み込み
    add_editor_style( get_template_directory_uri() . '/style.css' );
    // 子テーマのCSSを読み込み
    add_editor_style( get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'after_setup_theme', 'editor_style' );

function editor_style() {

add_theme_support( 'editor-styles' );

// 親テーマのCSSを読み込み

add_editor_style( get_template_directory_uri() . '/style.css' );

// 子テーマのCSSを読み込み

add_editor_style( get_stylesheet_directory_uri() . '/style.css' );

}

add_action( 'after_setup_theme', 'editor_style' );

add_theme_support( 'editor-styles' ); でブロックエディタにエディタ用のスタイルを反映するよう指示する。
add_editor_style( 'CSSファイルのパス' ); で実際に反映させるCSSを指定する。

指定したCSSは<style>要素に変換されてインラインで挿入されるようになる。

参考： Theme Support | Block Editor Handbook | WordPress Developer Resources

表示崩れが発生したら

まあ、基本的にはこれでいいんだけど、反映したいCSSのセレクタの範囲が大きすぎてエディタのツールバーとか他の部分にも影響しちゃうとか、remじゃなくてemでフォント指定しているのでフロントと文字の大きさが変わってしまうとか、実際には一筋縄でいかない場合が多い。

そういう場合は以下のような対処が考えられる。

元のCSSを、ブロックエディターでもフロントでもどちらでも正しく動くように修正する。
元のCSSを別名で保存し、中身をブロックエディター用に書き換え、そちらを読み込むようにする。
元のCSSはそのまま読み込み、問題がある部分の対応を施したブロックエディター用CSSを追加で作成してそれも読み込む。

あとは荒業として、「管理画面用のCSSを読み込ませてそっちでなんとかする」というのもある。

function add_custom_admin_style() {
    $css_url = get_stylesheet_directory_uri() . '/admin_style.css';
    echo '<link rel="stylesheet" type="text/css" href="' . $css_url . '">';
}
add_action( 'admin_head', 'add_custom_admin_style' );

function add_custom_admin_style() {

$css_url = get_stylesheet_directory_uri() . '/admin_style.css';

echo '<link rel="stylesheet" type="text/css" href="' . $css_url . '">';

}

add_action( 'admin_head', 'add_custom_admin_style' );

まあどっちでもCSSの調整はできるので好きにすればいいと思うね。