プラグインからブロックエディタ用にスタイルを追加する方法

テーマでエディタ用（ブロックエディタ用）にスタイルを適用する方法は、自作テーマで使っていて知っていたのですが、プラグインから、プラグインフォルダ内に設置したCSSファイルをブロックエディタに適用させようとして苦労したので、サンプルコードメモとして残しておきます。

まず、テーマからブロックエディタにスタイルを適用させる場合には、以下のコードのようにブロックエディタ用に作成したeditor-style.cssを読み込ませて、editor-styleにスタイルコードを書けば、ブロックエディタ内に反映させる方法が一般的ですね。

/***** ブロックエディタ用にスタイルを追加 *****/
function sample_editor_style_init(){
	// ブロックエディタ用スタイル機能をテーマに追加
	add_theme_support( 'editor-styles' );
	// ブロックエディタ用CSSの読み込み
	add_editor_style(trailingslashit( get_stylesheet_directory_uri() ) .'editor-style.css');

}
add_action( 'after_setup_theme', 'sample_editor_style_init');

コードにも注釈入れてますが、以下の流れで適用されるようになります。

1. テーマでエディタ用のスタイルを使えるようにする
2. ブロックエディタ用のCSS(editor-style.css)をエンキューする
3. after_setup_themeでテーマの有効化と同時にCSSが適用されるようにする

でもこれ、独自プラグインを作って、このコードを使っても、ブロックエディタへ適用できないんです。

そこでプラグインから、プラグインフォルダ内のCSSをブロックエディタに適用する場合には、以下のように記述します。

ファイルはプラグインフォルダ直下に置き、名前を「custom-editor-style.css」としています

/* プラグインからエディタにCSS反映させるコードサンプル */
function sample_enqueue_editor_styles() {
  wp_enqueue_style('my-plugin-block-editor',plugin_dir_url( __FILE__ ) . 'custom-editor-style.css',array(),'1.0.0');
}
add_action(  'enqueue_block_editor_assets', 'sample_enqueue_editor_styles');

要は、「enqueue_block_editor_assets」というアクションフックを使って、プラグインフォルダ内のスタイルをエンキューするということなんですね。

これだと、ブロック用とフロントエンド用に重複してスタイルコードを書かなければなりません。

そこで、どうせ同じようにスタイルをエンキューしてるのですから、もう一行追加して、フロントにも適用させるようにしておけば、コードも少なくて済みます。

/* プラグインからエディタとフロントにCSS反映させるコードサンプル */
function enqueue_editor_styles() {
  wp_enqueue_style('my-plugin-block-editor',plugin_dir_url( __FILE__ ) . 'custom-editor-style.css',array(),'1.0.0');
}
add_action(  'enqueue_block_editor_assets', 'enqueue_editor_styles'  );
add_action(  'wp_enqueue_scripts', 'enqueue_editor_styles'  );

---

分かってしまえばこんな簡単なコードで？とびっくりしますが、いろいろ調べてもなかなかこれだ！というページがなかったり、旧エディタ用のものだったりしましたので、備忘録を兼ねて公開しておきます。

誰かの参考になれば．．．。