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

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 { }のように変換されます。

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

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

注意：@importが使えない場合がある

読み込んだCSSファイル内では@importが動かない場合があります。これについては確かな文献を見つけられていません──。

複数のCSSファイルはそれぞれ読み込むほうが確実です。

反映される書き方は？

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

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

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' )を有効にするとブロックエディターにあらかじめ用意されているスタイルがフロントエンドに反映されるようになります。

補足

一部のスタイルは補う必要あり

クラシックテーマでは「プルクオート・テーブル」ブロックにおける配置位置の指定など、一部のスタイルがフロントエンドに自動的に反映されないものがあるようです。

新しい仕様のブロックテーマでは解決されているようですが、クラシックテーマで制作する場合は次のように補っています。

.wp-block-pullquote.alignleft {
  float: left;
}
.wp-block-pullquote.alignright {
  float: right;
}

.wp-block-table.alignleft {
  float: left;
}
.wp-block-table.alignright {
  float: right;
}
.wp-block-table.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

エディター専用CSSを用意するのもあり

エディター専用のCSSファイルをひとつ用意しておくと何かと便利です。
エディター側でのみルートのフォントサイズを小さくしたり編集エリアの余白を多めにとったりと、エディターの使いやすさに貢献できるかもしれません。
この場合もadd_editor_style()で読み込みます。

---

参考リンク
WordPress.org – テーマサポート
WordPress Codex – add_editor_style()

---