ブロックエディターと公開記事の表示を揃えるための3つのポイント【WordPress】

WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。

今回はエディターでの編集が少しでも快適になるよう、フロントエンド（公開後の記事やページ）とエディター上の表示を揃えるための最低限のポイントを確認してみます。

※ 全く同じ表示にすることを推奨するものではありません。必要な箇所だけ参考にしてみてください。

使用したバージョン WordPress 6.0

01. エディタースタイルの準備
- add_theme_support( ‘editor-styles’ )
02. エディターにフロントエンド用CSSを読み込む
03. エディター標準のスタイルをフロントエンドに反映させる
- add_theme_support( ‘wp-block-styles’ )
- 23.04.03追記：効果が少し変更された？
補足
- テンプレートに反映されない一部のブロック設定について
- エディター専用CSSを用意するのもあり

01. エディタースタイルの準備

add_theme_support( ‘editor-styles’ )

まずはfunctions.phpの設定でadd_theme_support( 'editor-styles' )を有効にします。
これによりエディターのスタイルを変更できるようになり、この後の設定が可能になります。

function my_setup_theme() {
	add_theme_support( 'editor-styles' );
}
add_action( 'after_setup_theme', 'my_setup_theme' );

02. エディターにフロントエンド用CSSを読み込む

add_editor_style()

フロントエンド（正確にはthe_content()が書き出す部分）に適用されるCSSファイルをブロックエディターに読み込みます。
該当するCSSファイルが複数ある場合は全て読み込みます。

// エディターにCSS読み込み
function wpdocs_theme_add_editor_styles() {
	add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

// エディターにCSS読み込み（複数）
function wpdocs_theme_add_editor_styles() {
	add_editor_style( array( 'style.css', 'css/example.css' ) );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

この時点でフロントエンドのCSSがエディターに適用されるようになりますが、いくつか次のような注意点があるので気をつけてください。

注意：一部の要素セレクターはクラス名セレクターに変換される

html及びbodyの要素セレクターはクラス名セレクター.editor-styles-wrapperに変換されます。editor-styles-wrapperはエディターの入力エリアを囲む要素で、これにより入力エリア内にのみCSSが適用される仕組みになっています。
セレクターbody ul { }の場合は.editor-styles-wrapper ul { }のように変換されます。

html（ルート要素）にフォントサイズを指定しており子要素でrem指定している場合、エディターではremの基準となる値が変わってしまうためフォントサイズがフロントエンドと合わなくなります。

フォントサイズの指定方法と違いを見直してみる【CSS】

ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。rem,em,px,%等、単位の選び方に迷った場合は参考にしてみてください。使用したバージョンGoogleChrome103....

注意：the_content() よりも上の階層から指定したセレクターは反映されない

the_content()より上の階層にあるbody以外の要素や独自のクラス名を含んだセレクターはエディターには反映されません。

注意：@importがあると読み込めない場合がある

add_editor_style()で読み込んだCSSファイル内で@importが使われている場合、うまく動かない場合があります。詳しくは関連記事を参考にしてください。

反映される書き方は？

the_content()で出力されるものとbodyで構成されたセレクターはエディターに反映されます。
要素の直接指定（h2, h3, p, ul等）やブロック独自のクラス名（wp-block-image, wp-block-table等）

Gutenberg ブロック名やクラス名一覧【WordPress】

ブロックエディターやtheme.jsonを利用しているとブロック名やクラス名が必要になることが多々あります。そんな場合の確認用にカテゴリー別一覧にしました。カテゴリーはブロック挿入ツールの分類に合わせています。使用したバージョンWordPr...

@importに関しては他の方法を使うほうが良さそうです。

add_editor_style()が効かない場合は@importが原因かも【WordPress】

add_editor_style()で読み込んだCSSファイルの内容がエディターに反映されない一例の紹介です。add_editor_style()が効かない状況に遭遇したら原因はこれかもしれません。代替となる解決策も紹介しています。add_...

倉庫番

ブロックエディターになってからは前述の add_theme_support( ‘editor-styles’ ) の記述が無いと add_editor_style() が有効にならないので注意してください。

add_editor_style() が効かない場合はここが原因かもしれません。

03. エディター標準のスタイルをフロントエンドに反映させる

add_theme_support( ‘wp-block-styles’ )

ブロックエディターで配置するいくつかのブロックにはデフォルトのスタイルが適用されています。
引用ブロックの左ボーダーや区切り線の幅などがこれに当たりますが、これらをフロントエンドに反映するためにはfunctions.phpでadd_theme_support( 'wp-block-styles' )を有効にする必要があります。

前述のadd_theme_support( 'editor-styles' )と合わせて有効にすればOKです。

function my_setup_theme() {
	add_theme_support( 'editor-styles' );
	add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'my_setup_theme' );

add_theme_support( 'wp-block-styles' )を有効にするとブロックエディターにあらかじめ用意されているスタイルがフロントエンドに反映されるようになります。