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に適用できました!

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

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

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

 

ちなみに、'admin_head'アクションに直接<style>タグを出力しても、CSSはブロックエディタ に適用されます。

この記事が気に入ったら
フォローしてね!

コメント

コメントする

目次
閉じる
WordPressテーマ SWELLWordPressテーマ SWELL