カテゴリーにもアイコンを付けよう。updateCategory

ブロックエディター(Gutenberg)のカテゴリーにも、カテゴリー名の後の部分にアイコンを追加する事が出来ます。
アイコンを付ける事で、他のカテゴリーと視覚的にも差が生まれ、選択する際にどのプラグインに付属されているカテゴリーなのかを解りやすく出来るかもしれません。

カテゴリーにアイコンを付けた表示例(Gutenberg 5.7時点)

ブロックの色変更例
Not Wiz Blocksのカテゴリーに羽ペンのアイコンを追加した例

SVGを簡単に扱う為の事前準備が必要

別記事「ブロックのアイコンにSVGを!簡単に使う為の@svgr/webpack」をご参照ください。

updateCategoryでSVGアイコンを設定します

import CategoryIcon from 'カテゴリーアイコン名.svg';
 
const {
  updateCategory,
} = wp.blocks;
 
updateCategory(
  'ブロックのカテゴリーslug名',
  {
    icon: (
      <CategoryIcon
        style={ {
          width: '20px',
          height: '20px',
        } }
        className="components-panel__icon"
      />
    )
  }
);

上記のような記述を、editor側のjsファイル(enqueue_block_editor_assetsフィルター内で読ませているjsファイル)で処理すると、アイコンをカテゴリー名の横に表示する事が可能です。

style要素の記述は、SVGアイコンを20ピクセル × 20ピクセルで生成している場合は不要です。またブロックエディター内で正しく表示を行う為にも、SVGファイルは複合された単一のpathで生成するのをオススメします。