【解決】WordPress 「Classic Paragraph」ブロックのツールバーアイコンが正しく表示されない

「TinyMCE Advanced」プラグインをインストールすると投稿編集画面では「Classic Paragraph」ブロックを使用できるようになります。これはWordPress標準搭載の「クラシック」ブロックと機能にほとんど違いがないのでどちらを使うかはお好み次第だと(私は)思っています。

「Classic Paragraph」ブロックは再利用ブロックに使える という情報も目にしましたが活用してないので詳しくは知りません。

あれっ？「Classic Paragraph」ブロックのツールバーのアイコンがおかしい

そんなある日、「Classic Paragraph」ブロックのツールバーのアイコンの一部が四角いマークになっていることに気が付きました。

いつからこのようになってしまったのか定かではありません。カーソルを当てれば何のボタンかは分かるのでそのうちアップデートで直るだろうと放置してましたが２カ月以上このままなので気になって調べてみました。

一方「クラシック」ブロックのほうは問題が見当たりません。両者のツールバーアイコンのスタイルを見比べていると、適用されているフォントが異なっておりアイコン表示できるフォントになってないことが分かりました。自分で触ることはしてないのでWordPressテーマのほうか「TinyMCE Advanced」プラグインのアップデートの影響でこうなったのかもしれません。

投稿編集画面にスタイルを適用する

「クラシック」ブロックのほうで正しく表示されているスタイルを真似て「Classic Paragraph」ブロックにスタイルを追加することにしてみます。フォントを dashicons にしたらアイコンが表示できそうです。

投稿編集画面にスタイルを適用させたい場合、WordPress5.0以降のGuternberg では enqueue_block_editor_assetsアクションフックが導入されているそうですのでそちらを使用してみます。functions.php に以下のコードを記述しました。ハンドル名(‘my-gutenberg-style’)は任意です。

/*-------------------------------------------*/
// 「Wordpress5.3」＋「JIN v2.360」＋「TinyMCE Advanced ver5.3.0」にて、
// 投稿編集画面で「Classic Paragraph」ブロックのツールバーアイコンが正しく表示
// されない問題を解消します。
/*-------------------------------------------*/
add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-gutenberg-style', get_stylesheet_directory_uri() . '/gb-custom/asset/my-gb-custom.css');
} );

子テーマのディレクトリには 次の css ファイルを作成しました。

.wp-block[data-type="tadv/classic-paragraph"] .mce-btn i {
font-family: dashicons !important; }

ファイルの配置場所、ファイル名は任意です。

.wp-block[data-type=”tadv/classic-paragraph”] とあるのが「Classic Paragraph」ブロックを差しており、そのツールバーアイコンのフォントを dashicons としています。

再表示してみると、ツールバーアイコンが正しく表示できました😃！！