WordPress5の新ブロックエディターGutenbergの編集画面に適用されるCSSやJSを読み込む方法

Classic Editor（旧エディタ）では、投稿編集画面にスタイルを適用させたい場合、add_editor_style()を使ってCSSを読み込んでいました。

しかし、新しいブロックエディター（Guternberg）では、この関数で指定したCSSファイルは読み込まれないようです。

新エディタ用のCSSを読み込ませるには、以下のようにします。

ブロックエディタで読み込むCSSファイルを指定

function add_my_assets_to_block_editor() {
    wp_enqueue_style( 'my-gutenberg-style', get_stylesheet_directory_uri() . '/assets/css/my-gutenberg-style.css');
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

wp_enqueue_scriptsアクションフックとは別に、WordPress5からは新しくenqueue_block_editor_assetsアクションフックが実装されており、こちらでwp_enqueue_style()関数を使ってCSSファイルを読み込みます。

このほか、同じアクションフック内でwp_enqueue_script()を使用することで、JSファイルも自由に読み込むことが可能です。

追記：add_editor_style()で読み込んだファイルもGutenbergに適用できました！

たった１行のコードで簡単に読み込めることがわかりました。笑

コードは以下の記事で紹介していますので、是非参考にしてみてください。

あわせて読みたい

TinyMCEで読み込んでいたエディタ用CSSをブロックエディタのGutenbergでも読み込む方法 TinyMCEエディタ用のCSSはadd_editor_style()という関数を使用すれば読み込むことができますが、この方法で読み込んだCSSを、ブロックエディタのGutenbergにも適用させ...