[WordPress5]作ったBlockのアイコンを変える方法

WordPress5 の Gutenbergで自作のBlockのアイコンを変更するには？という時のメモ。

準備

Blockの素は、create-guten-blockというジェネレーターを使ってます。参照先のやり方に従って、wp-content/plugins/ フォルダに、このコマンド。

npx create-guten-block my-block
cd my-block
npm start

アイコンをハートに変更

編集するファイルは、src/block/block.js 

まずは、アイコンをハートに変えるには。このソースにある、icon: を heart に書き換えます。こんな感じで。

registerBlockType( 'cgb/block-my-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'myblock - 私のBlock' ), // Block title.
	icon: 'heart', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.

アイコンを人参に変更

今度は、icon: のところを carrot に変更すると。

registerBlockType( 'cgb/block-my-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'myblock - 私のBlock' ), // Block title.
	icon: 'carrot', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.

その他のアイコンは？

今回の、ハートと人参は、ソースのコメントにあるこのリンクから探しました。

Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.