Gutenbergエディタにテーマ以外の外部CSSを追加する方法

テーマのCSSをエディタに適用することで公開後のデザインに近づけることができます。

今までのクラシックエディタではテーマディレクトリ配下のCSSを「add_editor_style」を使用して追加することができました。

この方法で追加していた場合は以下のコードを追加することでGutenbergエディタ（ブロックエディタ）のみに適用されるように自動でCSSを読み込んでくれます。

add_theme_support( 'editor-styles' );

テーマディレクトリ以外の場合、今までは「editor_stylesheets」フィルタなどをフックして登録していましたが、これで登録されたものはブロックエディタには反映されません。

ブロックエディタに反映させるためには「enqueue_block_editor_assets」アクションをフックし、そこで「wp_enqueue_style」を使用して任意のCSSを追加できます。

しかしこの方法で追加されたCSSは管理画面全体のデザインに影響を与える可能性があります。

それを避けたい場合は以下で紹介する方法を検討してください。

「block_editor_settings」フィルタ

「block_editor_settings」フィルタはブロックエディタに渡す設定を上書きできます。

add_filter ( 'block_editor_settings', function( $editor_settings, $post ) {
   /** @var array $editor_settings */
   /** @var WP_Post $post */

...

   return $editor_settings;
}, 10, 2 );

$editor_settings の styles にはWordPressがデフォルトで追加したCSS（font-familyなど）と上で紹介した「add_editor_style」で登録されたCSSが入っています。

フィルタ内でこの「styles」に追加や上書きをすることで管理画面全体に影響を与えない方法で読み込んでくれるようになります。

具体的には「wp-admin/edit-form-blocks.php」を「'editor-styles'」で検索してヒットしたあたりのコードを参考に実装が可能です。

• クラシックエディタ用のCSSファイルを列挙する「get_classic_editor_styles」
• ローカルファイルかどうかを判定する「is_local_file」
• ローカルパスをURLに変換する「convert_to_url」

のような関数を用意しておくと実装は以下のようになります。

add_filter ( 'block_editor_settings', function( $editor_settings ) {
   /** @var array $editor_settings */
   // $styles = $editor_settings['styles'];
   $styles = [];
   foreach ( get_classic_editor_styles() as $path ) {
      if ( ! is_local_file( $path ) ) {
         $response = wp_remote_get( $path );
         if ( ! is_wp_error( $response ) ) {
            $styles[] = [
               'css' => wp_remote_retrieve_body( $response ),
            ];
         }
      } else {
         if ( file_exists( $path ) ) {
            $styles[] = [
               'css'     => file_get_contents( $path ),
               'baseURL' => convert_to_url( $item ),
            ];
         }
      }
   }
   $editor_settings['styles'] = $styles;

   return $editor_settings;
} );

スタイルを調整する

フロント用のCSSなので、管理画面に埋め込まれたエディタでは表示が崩れることがあります。

そういう場合には先ほどの「enqueue_block_editor_assets」で調整用のCSSを読み込ませて表示を修正できます。

クラスを付与する

フロント側で付与されているクラスがエディタでは付与されないためデザインが崩れることがあります。

そういう場合にも先ほどの「enqueue_block_editor_assets」を使用することで解決できます。

1. 「wp_enqueue_script」を使用してJSファイルを読み込み
2. 「wp.domReady」にクラスを付与するコールバックを登録

wp.domReady(function () {
    // add body class
    $('#editor .editor-writing-flow').addClass('article main');
});

まとめ

add_theme_support( 'editor-styles' );

と「editor_stylesheets」だけで済むのが一番よいと思います。

テーマ配下にないCSSを使用する場合は「block_editor_settings」を使用することで管理画面全体に影響を与えないように追加できます。

エディタ用の調整は「enqueue_block_editor_assets」アクション内で登録したCSSやJSを使用して調整するとよいでしょう。