エディタのフォントを設定する方法（WordPress5.4以降）

こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。

WordPress5.4以上のアップデートに伴い、Nao Lightは
「管理画面のエディタのフォントが適用されていない！」
問題を修正しました。

しかし、従来は適用されていたのに、どうして適用されなくなったのか？

原因：「そのクラスCSSが適用されなくなったから」

単純な話です。指定していたクラスのCSSが適用されなくなりました。

どうも、指定はちゃんと入っているものの、別のCSSで上書きされていたようです。

適用できる新しい書き方

管理画面のエディタに指定のフォントを適用するには、テーマ直下に「editor-style.css」を配置します。
そのファイルをfunction.phpで読みこませるように指定することで、その中に書いたCSSが反映されます。

editor-style.cssは以下の通りです。

div.editor-styles-wrapper {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

「div.editor-styles-wrapper」です。divタグの中のeditor-styles-wrapperに適用させることで、エディタに指定のフォントを反映されるようになります。

参考）従来の書き方

.editor-block-list__block {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

今まではこれで適用されましたし、検索するとこのやり方が当たると思います。
しかし、適用範囲を確認してみるとわかりますが、これだと5.4以降は上書きされています。

参考）管理画面のエディタにeditor-style.cssを適用させるfunction.phpの書き方

以下のようになります。「enqueue_block_editor_assets」にアクションフックをかけます。

function customEditorSettings() {
    wp_enqueue_style('theme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css');
}
add_action('enqueue_block_editor_assets', 'customEditorSettings');