2020年1月25日（日本時間ではGMT+9だからひょっとすると26日になるのかな．．）でリリースされるWordPressのバージョン5.9。
ブロックエディタの仕様が結構変わるようで、SNSなどをチェックしていると、特に独自ブロック満載の有料テーマ作者さんたちがすごく苦労している模様。
まあまあこのサイトでも使っている【HABONE】テーマの場合は、段落ブロックやリストブロックにIcomoonのアイコン付の装飾（これを独自ブロックスタイルというらしいです．．ハイ）を加えてる位だから、問題ないでしょう．．が甘かったです。
テストサイトでWordPress Beta Testerプラグイン使って5.9RC2にしたら．．投稿（固定ページ）編集画面でアイコンが表示されない現象が発生！！対応前と対応後の様子については後ほど紹介しますので、同じ現象で困っている方が見えたら参考にしていただけると幸いです。
Icomoonに限らず、アイコンフォントをテーマ内に内装して呼び出している方は同じ現象が起こるかもしれませんので要チェックです
これは自作テーマで細々と配布させていただいてている【HABONE】テーマでの話なので、自身の環境に置き換えて解決してくださいね
編集画面でアイコンフォント（Icomoon）が表示されない現象
以下がWordPress5.9にしたら不具合が発生した投稿編集画面のスクリーンショットです。
左側のメイン画面ではきちんとIcomoonのチェックアイコンが出ているのに、右のスタイル選択画面では一切アイコンが表示されていません。
また、タブレットやモバイルプレビューでは、メイン画面もアイコンが表示されませんでした。
原因をいろいろ調べたら、WordPress5.9では、編集画面のスタイル選択やタブレット・モバイルプレビューがiframe（埋め込み）表示させるようになるという仕様変更によるものだということが発覚しました。
この仕様変更が果たしてどんな恩恵をもたらすのか．．というのは私が計り知れるところではありませんが、とにかく表示されないのはちょっと．．ということで不具合究明と対応を進めていきます。
まずはeditor-style.cssが適用されているかを確認
WordPressバージョンのどこか（いつからかは不明）から5.8.xまでは、少なくともアクションフックの「admin_head」を使って管理画面側のヘッダーへCSSを読み込ませていれば、ほぼフロントエンドの状態と同じになっていて、特別に必要なものは「admin-style.css」ファイルを作ってエンキューするか、同様に「admin_head」で読み込めばよかった（これは自身のテーマでそうしていたので間違いないと思います）。
でも、5.9ではまず、テーマ側で、editor-styleを有効にして、editor-style.cssを読み込む、エディタ側のCSSはここに書かないと読んでくれない？という仕様になったようです。
ん？editor-styleって、確か旧エディタの時の産物だったような．．と思いつつも、これも実際に読み込ませて確かめたので間違いないと思います。
ちなみに、WordPress5.9のエディタ側ではユーザーエージェントスタイルシート（ブラウザの標準スタイルシート）は割り当てられないようで、例えば見出しタグなどを後からCSSで何とかするという前提でひとまず何も指定していない場合には、ブロックエディタで見出しを追加しても通常の段落と同じ文字サイズや太さになったりします。また、投稿（固定ページ）タイトルも同様に通常のフォントサイズが割り当てられるので、とっても小さい表示になります。
これを解消するにも、前述したeditor-style.cssへ書いて読み込ませるやり方でないと反映されなかったので、自作テーマで「ん？」となった方はひとまずこの措置をしておきましょう。
まずは「editor-style.css」という空のファイルを作ってテーマの中（style.cssと同じ階層）へアップロードし、以下のコードをfunctions.phpへ追加すれば、有効になります。
/***** ブロックエディタ用にスタイルを追加 *****/
function ha_editor_style_init(){
// ブロックエディタ用スタイル機能をテーマに追加
add_theme_support( 'editor-styles' );
// ブロックエディタ用CSSの読み込み
add_editor_style('/editor-style.css');
}
add_action( 'after_setup_theme', 'ha_editor_style_init');そして、以下のような見出しとタイトルのスタイルを「editor-style.css」へ追記すれば、ひとまず体裁よくなります。
タイトルの大きさは【HABONE】テーマのフォントサイズ、見出しはGoogle Chromeのユーザーエージェントスタイルシートの値を使っていますので、自身のテーマの仕様に沿って調整してください。
textarea#post-title-0{
font-size:1.5em;
}
.wp-block-post-title {
font-size: 1.5em;
}
h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
h4 {
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
h5 {
display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
h6 {
display: block;
font-size: 0.67em;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}上記のスタイルを追加して、タイトルや見出しがそれとなく何となく体裁よく変化すれば、きちんとeditor-style.cssが読み込まれていることになります。
他の方法で読み込んだ場合でも「.editor-styles-wrapper .wp-block」が付加されているものはiframe内へ読み込まれるのでは？という感じもするのですが、テストしてみたところでは確実ではなさそうでした。その点上記のeditor-styleを有効にする方法では、自動で「.editor-styles-wrapper .wp-block」が付加されますし、エディタ用のスタイルとして確実に登録される方法ですから、より確実ではないかと思います。
独自ブロックスタイルの追加とアイコン対策
基本的に、5.8.xの段階で、何等かの方法で追加した独自ブロックのスタイルが問題なく編集画面で表示される（CSSが当たっている）ようであれば、特にすることはありません。
もしも、当たっていないようでしたら、先ほどのeditor-style.cssへ今ある独自ブロックスタイルに対するCSSの記述部分をコピーすれば、当たるようになると思います。
さて、問題はここから．．．．。
前述したように私の環境（テーマ）の場合では、Icomoonで作成してテーマに内装したアイコンフォントが、エディタ（編集画面側）の以下の場所で表示されない現象になりました。
- 右サイドバーの「スタイル」のところ
- 「モバイル」プレビューのメイン画面
- 「タブレット」プレビューのメイン画面
これを解消する方法をいろいろ調べたところ、enqueue_block_editor_assetsで読み込めばよいようなことが書いてありましたが、もともときちんと読み込ませているのにダメという状況でした（ひょっとしたらアイコンフォントとは関係ない話だったのかも．．）。
確認のため、デベロッパーツールを使って、iframeで出力される部分をどんどん展開し、iframeを作る部分のheadタグに何が読み込まれているのかを見てみたら、やはりIcomoonのCSSファイルは読み込まれていませんでした。
まあまあダメ元．．で、IcomoonのCSS（icomoonフォルダの中のstyle.css）の内容をeditor-style.cssへコピペしたところ、以下のようなエラーが出ました。エラーが出るということは読み込もうとしてるということなので、できなくはないと確信！！
エラー内容としては、fonts/icomoon…（要するに「fonts」フォルダの中にあるファイルの情報）が404（存在しない）ですよ！という意味なので、editor-style.cssへコピペした側の以下のコード部分を修正してみました。
修正前は
@font-face {
font-family: 'icomoon';
src: url('/fonts/icomoon.eot?9tadx3');
src: url('/fonts/icomoon.eot?9tadx3#iefix') format('embedded-opentype'),
url('/fonts/icomoon.ttf?9tadx3') format('truetype'),
url('/fonts/icomoon.woff?9tadx3') format('woff'),
url('/fonts/icomoon.svg?9tadx3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}修正後
@font-face {
font-family: 'icomoon';
src: url('../images/icomoon/fonts/icomoon.eot?9tadx3');
src: url('../images/icomoon/fonts/icomoon.eot?9tadx3#iefix') format('embedded-opentype'),
url('../images/icomoon/fonts/icomoon.ttf?9tadx3') format('truetype'),
url('../images/icomoon/fonts/icomoon.woff?9tadx3') format('woff'),
url('../images/icomoon/fonts/icomoon.svg?9tadx3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}違いは．．．そう、階層です。しかもちょっと懐かしい？相対URLでちゃんとしたファイルにたどり着くようにしたのです。
私の環境の場合は、editor-style.cssを「CSS」というテーマフォルダ直下のフォルダの中に入れてて、IcomoonのCSSとファイル・フォルダ類はテーマ直下にある「images」の中の「icomoon」フォルダに入れているので、editor-style.cssから見ると、
- 「..」で2つ上の階層に戻る（つまりテーマフォルダ直下に戻る）
- 「/images/…..」で目的のフォルダ・ファイルまでを示す
という風にして正常に読み込ませたら、うまくいきました。
以上、WordPressの編集画面で問題なく表示されていた段落ブロックスタイルのアイコンが、5.9で表示されなくなった時の解消方法でした。
