ProgrammingWordPress講座WordPressテックラボ
WordPressテックラボ

Gutenberg（グーテンベルク）のブロックエディタにスタイルを追加

WordPress の編集画面には、Gutenberg（グーテンベルク）というエディタが採用されています。Gutenbergは見出しや段落、リストなどをブロックと呼ばれる単位で追加していくことができ、直感的にデザインされたページを作成することができます。

このGutenbergで追加した見出しや段落には、デフォルトのスタイルが適用されます。編集する分にはこれでも十分ですが、更にテーマのデザインを適用することもできます。フロント側で表示されるデザインに近づけることができるので、とても便利です。ここでは、その方法についてご紹介します。

手順

ブロックエディタにスタイルを適用させる手順は以下になります。

  1. テーマフォルダ内にブロックエディタ用のCSSファイルを作成
  2. functions.phpファイルに用意したCSSファイルを読み込むコードを追加

CSSファイル作成

エディタに追加したいスタイルを定義します。ファイル名やパスは変更可能ですが、ここではテーマフォルダにeditor-style.cssファイルを作成します。editor-style.cssがブロックエディタ用CSSのデフォルトのファイル名になるので、特別な理由がなければこの名前にしておきましょう。

テーマフォルダ/editor-style.css

functions.phpにadd_editor_style()を定義

functions.phpに作成したブロックエディタ用CSSを読み込むコードを追加します。

/* ========================================================
管理画面ブロックエディタ用CSSの追加
=========================================================*/
add_action( 'after_setup_theme', function(){
	// ブロックエディタ用スタイル機能をテーマに追加 
	add_theme_support( 'editor-styles' );
	// ブロックエディタ用CSSの読み込み
	add_editor_style();
});

まず、add_theme_support()でブロックエディタ用スタイル機能を有効にします。その後、add_editor_style()でブロックエディタ用CSSを読み込みます。デフォルトでテーマ直下にあるeditor-style.cssを読み込みますが、次のように第1引数にファイルのパスを指定することもできます。

add_editor_style('/common/css/editor-style.css');

add_editor_style()の第1引数には現在のテーマディレクトリから相対パスでファイルを指定してください。

以上の手順でブロックエディタにブロックエディタ用CSSが適用されます。投稿画面を再読み込みするとCSSで設定したスタイルが反映されているのが確認できると思います。

add_editor_style()で読み込んだCSSはBODY閉じタグ直前にSTYLE要素として追加されます。このとき、CSS内の各セレクタに.editor-styles-wrapperというクラスが自動的に挿入されます。このクラスからスタイルを指定することでクラス名の重複問題を避けることができます。

なお、ここで設定したブロックエディタ用CSSはテーマ側には反映されません。ブロックエディタとテーマで同じスタイルを適用するには、テーマ側でも別途スタイルを追加してください。

関連記事