WordPress5.0に向けて、Gutenbergの案内がダッシュボードに出るようになりました。
僕も試験的にGutenbergを試してみたのですが、ビジュアルエディターを見やすくするために書いていたCSSが全く適用されない状態に。
これを改善すべく、いろいろ調べたら方法が見つかったので紹介です。
目次
Gutenbergでは以前のCSSが反映されない
これまでビジュアルエディターでは基本的に、functions.phpに「add_editor_style();」と書いて、テーマフォルダ直下のeditor-style.cssに対して、以下のように書けば
.mce-content-body h2{ background-color: red; color: white; padding: 25px 30px; }
以下のように反映されていました。
詳細はこちら。
けれどGutenbergでは、全くスタイルが反映されなくなってしまいました。
これを解決する方法を以下に書いておこうと思います。
GutenbergエディターにCSSを適用させる方法
主な手順はこちら。
- functions.phpのソースコードを書く
- テーマフォルダ直下にeditor-style.cssを作成しスタイルを書く
functions.phpのソースコードを書く
まずはテーマ(子テーマ)のfunctions.phpに以下のコードを貼り付けます。
/////////////////////////////////////// // Gutenberg用のCSSを読み込む /////////////////////////////////////// add_action( 'enqueue_block_editor_assets', 'gutenberg_stylesheets_custom_demo' ); function gutenberg_stylesheets_custom_demo() { //現在適用しているテーマのeditor-style.cssを読み込む $editor_style_url = get_theme_file_uri('/editor-style.css'); wp_enqueue_style( 'theme-editor-style', $editor_style_url ); // //JavaScriptも読み込み可能 // wp_enqueue_script( 'theme-gutenberg-js', get_theme_file_uri('/js/gutenberg.js'), array( 'jquery' ), false, true ); }
get_theme_file_uri関数を利用しているので、親テーマが適用されている場合は親テーマフォルダ内のeditor-style.css、子テーマが適用されている場合は子テーマフォルダ内のeditor-style.cssが読み込まれます。
コメントアウトしてある部分は、JavaScriptファイルを読み込む場合の例です。
Gutenbergになってから、通常ページのようにCSSやJavaScriptを読み込めるようになりました。
なので、リソースファイルの読み込みという点において、カスタマイズの自由度は以前より、上がったように思います。
参考 Theme Support – The new Gutenberg editing experience – WordPress
テーマフォルダ直下にeditor-style.cssを作成しスタイルを書く
次に適用しているテーマ(子テーマ)直下にeditor-style.cssファイルを作成します(ある場合はそれを利用)。
そして、editor-style.cssに以下のように書き込みます。
.mce-content-body h2{ background-color: red; color: white; padding: 25px 30px; }
書き込むスタイルは環境に合わせて変更してください。
動作確認
これで、Gutenbergエディターを開くと、以下のようにスタイルが適用されています。
あとは必要なCSSを、動作を見ながら付け加えていけばOKです。
まとめ
最初、Gutenbergエディターは従来のビジュアルエディターと全く動作が変わってしまうものと思っていました。
もちろん、一部動作が変わってしまった部分はあります。
けれど、ソースコードをよく見てみると、結局のところ従来のビジュアルエディターを根本として、見た目をCSSで変更して現在の「Gutenbergスタイル」になっているようです。
ですので、ビジュアルエディター用に設定したカスタムスタイルや、ツールバーのボタンなどはそのまま利用できます。
なので、テーマを制作・公開している側としては、「思っていた以上に以前の設定が使えた」ということで一安心しています。
もちろん、変更点も多々あるので、修正すべき点は修正しなければいけないんですけど。
ところで、「Gutenbergってなんだ?」と思って調べてみたら、活版印刷技術の発明者からきているんですね。