WordPressのGutenbergエディターにCSSを適用させるカスタマイズ方法

Gutenberg

WordPress5.0に向けて、Gutenbergの案内がダッシュボードに出るようになりました。

今日から新しいエディターを試しましょう。

僕も試験的にGutenbergを試してみたのですが、ビジュアルエディターを見やすくするために書いていたCSSが全く適用されない状態に。

Gutenbergにスタイルが適用されない

これを改善すべく、いろいろ調べたら方法が見つかったので紹介です。

スポンサーリンク
レクタングル(大)広告

Gutenbergでは以前のCSSが反映されない

これまでビジュアルエディターでは基本的に、functions.phpに「add_editor_style();」と書いて、テーマフォルダ直下のeditor-style.cssに対して、以下のように書けば

.mce-content-body h2{
  background-color: red;
  color: white;
  padding: 25px 30px;
}

以下のように反映されていました。

editor-style.cssでビジュアルエディターのスタイル変更

詳細はこちら。

Wordpressの記事を作成するとき、投稿画面のビジュアルエディターを用いている方も多いかと思います。ビジュアルエディター...

けれどGutenbergでは、全くスタイルが反映されなくなってしまいました。

Gutenbergではeditor-style.cssスタイルが適用されない

これを解決する方法を以下に書いておこうと思います。

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エディターを開くと、以下のようにスタイルが適用されています。

Gutenbergにスタイルを適用

あとは必要なCSSを、動作を見ながら付け加えていけばOKです。

まとめ

最初、Gutenbergエディターは従来のビジュアルエディターと全く動作が変わってしまうものと思っていました。

もちろん、一部動作が変わってしまった部分はあります。

けれど、ソースコードをよく見てみると、結局のところ従来のビジュアルエディターを根本として、見た目をCSSで変更して現在の「Gutenbergスタイル」になっているようです。

ですので、ビジュアルエディター用に設定したカスタムスタイルや、ツールバーのボタンなどはそのまま利用できます。

なので、テーマを制作・公開している側としては、「思っていた以上に以前の設定が使えた」ということで一安心しています。

もちろん、変更点も多々あるので、修正すべき点は修正しなければいけないんですけど。


ところで、「Gutenbergってなんだ?」と思って調べてみたら、活版印刷技術の発明者からきているんですね。

ヨハネス・グーテンベルク