WordPress5, 新エディタ(Gutenberg)にCSSを適用する方法

WordPressはバージョン5から、編集画面とその中身の処理が大幅に変更になりました。新エディタ（Gutenberg）の採用です。

エディタがブロック形式でコンテンツを作成することになったので、CSSの適用方法も変わりました。

GutenbergでのCSSの適用方法を分かりやすく解説します。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

GutenbergでCSSを適用する方法はかんたんです。

まずは追加するコードから。これをfunctions.phpやプラグインのルートの.phpファイルに追加します。

ブロックエディタとフロント（表示するWebページ）の両方にCSSを適用

add_action( 'enqueue_block_assets', function() {
	$file_css = 'editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );

ブロックエディタだけにCSSを適用

add_action( 'enqueue_block_editor_assets', function() {
	$file_css = 'editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );

plugins_url()は、プラグインのホームディレクトリにあるeditor.cssファイルのurlを作ります。テーマの場合は、

get_theme_file_uri( 'editor.css' )

にします。

（テーマのホームディレクトリにeditor.cssがある場合）

追加するコードはこれだけです。

'enqueue_block_assets'は、ブロックエディタ（編集画面）とフロント（公開ページ）の両方に適用します。ほとんどはこのアクションフックに処理を追加するだけでOK。

ブロックエディタだけにCSSを使いたいとき、'enqueue_block_editor_assets' を使います。

ブロックは、エディタのメニューやオプション設定もカスタマイズできるので、エディタだけ表示するコンテンツのCSSを書きます。

これまでのビジュアルエディタでは、add_editor_style(), add_theme_support()を使ってエディタ用のCSSを用意していましたが、Gutenbergでは必要ありません。

クラシックエディタを使うときは

クラシックエディタを使うとき、エディタはブロックエディタではなく、ビジュアルエディタを使うことになるので、さっきのスタイルは適用されません。

WordPress5以前の、ビジュアルエディタのスタイルを適用させます。

追加するphpファイルは、Gutenbergと同じようにfunctions.phpなどです。

WordPress5以前のエディタにスタイルを適用

// テーマのホームディレクトリにeditor-style.cssを配置すること！
add_action( 'admin_init', function() {
	add_editor_style( [ 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', 'editor-style.css' ] );
	add_theme_support( 'editor-style' );
} );