【Gutenberg】WordPressのブロックエディタにCSSを追加してサイト表示と統一する

WordPressもバージョン6の時代に入り、ますますブロックエディタへと移行していっています。

ビジュアルエディタ時代（クラシックエディタや旧エディタとも呼ばれます）に使えたadd_editor_style()も、ブロックエディタでは通用しなくなっています。そのため、エディタを見やすくするために書いたCSSがブロックエディタには適用されていないという状態になっています。

原因は簡単。ビジュアルエディタとブロックエディタでは、CSSの反映のさせ方が違うのです。

ビジュアルエディターの公式サポートは2021年までとされており、今後ますますブロックエディタを使用する機会が増えるはずです。

ここでは、GutenbergのブロックエディタにCSSを適用するためのカスタマイズ方法をメモしておきます。

GutenbergのブロックエディタにCSSを適用させる方法

まずは、サンプルコードです。解説などは後述しますので、コードだけで大丈夫な方は以下を参考に適宜修正して下さい。

functions.phpに以下を追記

// GutenbergのブロックエディタにCSSを適用
function block_editor_css() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' ); // ブロックエディタ用
  add_editor_style( 'singular.css' );     // サイト用のCSSも追加可能
  add_editor_style( 'somedir/additional.css' ); // ディレクトリ内でも可能
}
// アクションフックに登録
add_action('after_setup_theme', 'block_editor_css');

コード解説

ここからは上記コードの解説をしていきます。

Step1. 関数を作る

ビジュアルエディタ（クラシックエディタ）の時と違い、必要な処理が複数行に渡る上にadd_action()でアクションフックを使うので、専用の関数を作ります。

function block_editor_css() {
}

これ以降のStepで、上記関数内に必要な処理を記述していきます。

Step2. add_theme_support()を使って、ブロックエディタへのCSS適用を有効にする

ブロックエディタへのCSS追加を有効にします。方法としては、add_theme_support()を使います。

※ここまででは、まだCSS読み込まれません。以降をご参照の上コードを追加して下さい。

function block_editor_css() {
  add_theme_support( 'editor-styles' ); // ブロックエディタ用CSSを有効にする
}

Step3. add_editor_style()で適用するCSSを指定する（複数可）

add_editor_style()で、ブロックエディタへ追加するCSSを指定していきます。

引数にはCSSへのパスを指定します。（テーマディレクトリからの相対パス）

CSSは複数追加可能で、サイト用に使用したCSSも再利用して読み込むことができます。

function block_editor_css() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' ); // ブロックエディタ用
  add_editor_style( 'singular.css' );     // サイト用のCSSも追加可能
  add_editor_style( 'yourdir/additional.css' ); // ディレクトリ内でも可能
}

Step4. add_action()でafter_setup_themeに登録する

最後に、アクションフックのafter_setup_themeに作った関数を登録したら完成です。

function block_editor_css() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
  add_editor_style( 'singular.css' );
  add_editor_style( 'yourdir/additional.css' );
}
// アクションフックに登録
add_action('after_setup_theme', 'block_editor_css');

以上です。最後までお読み頂きありがとうございました。