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

ブロックエディターのカテゴリーには、アイコンをつける事が出来ます。
アイコンを付ける事で、他のカテゴリーと視覚的にも差が出来る事で選択する際に何のブロックなのかがより解りやすくなるでしょう!

実際の表示例(gutenberg 5.5.0時点)

表示されているSnow Monkeyアイコン等は、テスト開発に使用させて頂いていただけで、実際のSnow Monkey Blocks等と関係ありません。

SVGを使う為の準備が必要

使えるアイコンは、SVG形式で定義します。
SVGを簡単に使う方法は下記の記事をご参照下さい。

updateCategoryでSVGアイコンを設定

カテゴリーをblock_categoriesフィルターで追加した後にReact側でカテゴリーの定義をアップデートします。

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の記述は、アイコンを20ピクセル × 20ピクセルのSVGで生成している場合は不要です。また、SVGの生成は複合された単一のpathで生成するのをオススメします。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。