WordPressはバージョン5から、編集画面とその中身の処理が大幅に変更になりました。新エディタ（Gutenberg）の採用です。
エディタがブロック形式でコンテンツを作成することになったので、CSSの適用方法も変わりました。
GutenbergでのCSSの適用方法を分かりやすく解説します。
GutenbergでCSSを適用する方法はかんたんです。
まずは追加するコードから。これをfunctions.phpやプラグインのルートの.phpファイルに追加します。
add_action( 'enqueue_block_assets', function() {
$file_css = 'editor.css';
wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );
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などです。
// テーマのホームディレクトリに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' );
} );クラシックエディタとブロックエディタを両方使うときは、ふたつともコードを追加しなければなりません。
