TinyMCEで読み込んでいたエディタ用CSSをブロックエディタのGutenbergでも読み込む方法

TinyMCEエディタ用のCSSはadd_editor_style()という関数を使用すれば読み込むことができますが、この方法で読み込んだCSSを、ブロックエディタのGutenbergにも適用させる方法をご紹介します。

functions.phpにて、以下のコードを記述するだけ。

add_editor_style()で読み込んだエディタ用CSSをGutenbergにも適用するコード

add_theme_support( 'editor-styles' );

これだけで、add_editor_style()を使ってTinyMCEで読み込んでいたCSSをブロックエディタにも適用できます。

全てのセレクタに.editor-styles-wrapperが追記された状態でstyleタグとして吐き出されるので、ブロックエディタ用に新たにセレクタを追記する必要もありません。

ブロックエディタ専用のCSSやJSファイルを読み込む方法は以下の記事でまとめていますので、そちらも是非参考にしてみてください。

あわせて読みたい

WordPress5の新ブロックエディターGutenbergの編集画面に適用されるCSSやJSを読み込む方法 Classic Editor（旧エディタ）では、投稿編集画面にスタイルを適用させたい場合、add_editor_style()を使ってCSSを読み込んでいました。 しかし、新しいブロックエディ...