ブロックエディターでCSS・JavaScriptを読み込むフックまとめ
ブロックエディターにおいて、スタイルやスクリプトを読み込むためのフックまとめです。
以下のハンドブックを要約したものになります。
こちらはブロックテーマのアプローチです。
WordPress Developer Resources
Including Assets – Theme Handbook | Developer.WordPress.org
Many block themes do not need to load any assets. For design aspects, specifically, much of this can be handled through the Global Settings…
目次
「エディター」と「ブロックエディター」
- エディター：管理画面全体の編集UIを指す。
- ブロックエディター：投稿・固定ページのブロック編集機能を指す。
なお、WordPress7.1以降、ブロックエディターはiframe 化されています。
アセットを読み込むフック
ざっくりと以下の紹介をします。
wp_enqueue_scripts：フロントエンドで読み込む。add_editor_style()：エディター用スタイルシート(インライン出力)。enqueue_block_editor_assets：エディターUI用(iframeの外のみ)。enqueue_block_assets：フロントとエディターの両方で読み込む。enqueue_block_assets+is_admin()：エディターのみで読み込む。
CSSを読み込む
フロントエンドのスタイルシート
wp_enqueue_scripts：フロントエンドで読み込まれます。
function theme_enqueue_scripts() {
wp_enqueue_style(
'theme-style',
get_theme_file_uri('assets/css/style.css'),
array(),
filemtime(get_theme_file_path('assets/css/style.css'))
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');エディタースタイルシート
add_editor_style()：エディターのiframe内にインライン出力されます。
テーマのstyle.cssと、エディター用のCSSを読み込む例です。
function theme_setup() {
add_editor_style(array(
get_stylesheet_uri(),
get_parent_theme_file_uri('assets/css/editor-style.css')
));
}
add_action('after_setup_theme', 'theme_setup');JavaScriptを読み込む
フロントエンドのJavaScript
wp_enqueue_scripts：フロントエンドで読み込まれます。
スタイルシートと同じフックです。
function theme_enqueue_assets() {
// wp_enqueue_style(
// 'theme-style',
// get_theme_file_uri('assets/css/style.css'),
// array(),
// filemtime(get_theme_file_path('assets/css/style.css'))
// );
wp_enqueue_script(
'theme-script',
get_theme_file_uri('assets/js/script.js'),
array(),
filemtime(get_theme_file_path('assets/js/script.js')),
array('strategy' => 'defer')
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');エディターのJavaScript
enqueue_block_editor_assets: エディター（iframeの外）に読み込まれます。
ブロックエディター（iframe内）では読み込まれません。
独自ブロックやツールバーコントロールの追加、エディタープラグインの登録などで使います。
function theme_enqueue_editor_assets() {
wp_enqueue_script(
'theme-editor',
get_theme_file_uri('assets/js/editor.js'),
array(),
filemtime(get_theme_file_path('assets/js/editor.js')),
true
);
}
add_action('enqueue_block_editor_assets', 'theme_enqueue_editor_assets');どちらも読み込む
enqueue_block_assets：フロントとエディターの両方に読み込まれます。
iframe内のコンテンツにアセットを追加する主要な方法で、エディターUI用のアセット追加やエディターAPIとの連携には使用しません。
エディターのみに読み込む場合は is_admin() で条件分岐します。
function theme_enqueue_block_assets() {
// Web fonts
wp_enqueue_style(
'theme-yakuhanjp',
'https://cdn.jsdelivr.net/npm/yakuhanjp@5.0.0/dist/css/yakuhanjp.css'
);
// Editor only
if (is_admin()) {
wp_enqueue_script(
'theme-editor-content-scripts',
get_theme_file_uri('assets/js/editor-content-scripts.js'),
array(),
filemtime(get_theme_file_path('assets/js/editor-content-scripts.js')),
array('in_footer' => true)
);
}
}
add_action('enqueue_block_assets', 'theme_enqueue_block_assets');まとめ
ベストプラクティスは更新されていくので、ハンドブックなど一次情報を確認しながら使用するのが良いかと思います。
あわせて読みたい
【WordPress】エディタにCSSを読み込む方法の最適解はどれ
子テーマやプラグインから、エディター画面にCSSを読み込ませる方法がいくつかありましたので、最適解を探っていこうと思います。 今回は、以下の２通りご紹介します。 …
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ