WordPress グーテンベルクにカスタムCSSを読み込む方法

WordPress のブロックエディタ「グーテンベルク（Gutenberg）」にカスタムCSSを読み込む方法を紹介します。
記事の表示と同じスタイルを管理画面内の見出しにも反映したい時に便利な方法です。

WordPress ブロックエディタ「グーテンベルク（Gutenberg）」にカスタムCSSを読み込む方法

まずは WordPress のテーマファイル内に読み込むCSS（editor-style.css）を作成してください。
また、記述のサンプルとして h2 タグに対しての装飾を記載します。

/* editor-style.css の例 */

.editor-styles-wrapper h2 {

  font-family: inherit;

  color: #001e55;

  padding: 0.5em 0.8em;

  border-left: 6px solid #001e55;

  background-color: #f6f7fa;

}

functionに.php にCSS を読み込む記述を追加

functionに.php に CSS を読み込む記述を追加します。

/*【管理画面】グーテンベルクにカスタムCSSを読み込む */

function my_custom_editor_style() {

    wp_enqueue_style(

        'my-editor-heading-style',

        get_theme_file_uri( 'editor-style.css' ),

        array( 'wp-edit-blocks' ),

        filemtime( get_theme_file_path( 'editor-style.css' ) )

    );

}

add_action( 'enqueue_block_editor_assets', 'my_custom_editor_style' );

functionに.php の更新はバックアップを残してから作業を行ってください。
組み込みがうまくゆけば、管理画面内の本文エディター内に、CSS が読み込まれ、h2タグに装飾されているはずです。

まとめ

WordPress グーテンベルクにカスタムCSSを読み込む方法を紹介しました。