【Gutenberg対応】WordPressでフロントと編集画面用のJavaScriptとStyleを読み込む

フロントのみに反映するCSSとJavaScript

ここの部分は従来の方法とGutenbergと変更無いです。

function my_enqueue_front_assets() {
	
	//CSS
	wp_enqueue_style( 'my-style', get_template_directory_uri().'/assets/css/style.css', array() );

	//JavaScript
	wp_enqueue_script( 'my-script', get_template_directory_uri().'/assets/js/script.js', array(), '0.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_front_assets' );

wp_enqueue_script( 'my-admin-script', get_template_directory_uri().'/my-admin-script.js', ['jquery'], '', true);

フロントと編集画面両方に適用するCSSとJavaScript

WordPress5以降

function my_enqueue_frontend_editor_assets() {
	//CSS
	wp_enqueue_style('my-style', get_template_directory_uri().'/assets/css/style.css', array());

	//JavaScript
	wp_enqueue_script( 'my-script', get_template_directory_uri().'/assets/js/script.js', array(), '0.0.0', true );
add_action( 'enqueue_block_assets', 'my_enqueue_frontend_editor_assets' );

従来の方法

編集画面のみに適用するCSSとJavaScript

WordPress5以降

function my_enqueue_editor_assets() {
	wp_enqueue_style('my-admin-style', get_template_directory_uri().'/editor-style.css', ['my-style']);
	wp_enqueue_script( 'my-admin-script', get_template_directory_uri().'/my-admin-script.js', ['jquery'], '', true);
}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_editor_assets' );

従来の方法

とは言ってもWordPress5以降でもこの方法でいけます。

admin_enqueue_scriptでCSSとScript読み込み

function my_admin_script(){
	wp_enqueue_style('my-admin-style', get_template_directory_uri().'/editor-style.css', ['my-style']);
	wp_enqueue_script( 'my-admin-script', get_template_directory_uri().'/my-admin-script.js', ['jquery'], '', true);
}
add_action( 'admin_enqueue_scripts', 'my_admin_script' );

editor-style.cssを使って編集画面用のCSSを読み込む

function my_add_theme_support(){
	add_theme_support( 'editor-styles' ); //←gutenbergに必要
	add_editor_style( 'editor-style.css' );
}
add_action('after_setup_theme', 'my_add_theme_support');

色々な方々があって、じゃあ、どの方法がいいかと言うと、すみません、まだどれがいいのかよくわかっていません。

ただ、実際やってみるとわかるのですが、特に編集画面用のCSSでどうやら影響範囲が違うのです。

“enqueue_block_editor_assets”は編集画面の右サイドバーまで影響が及びます。