【WordPress】カスタムブロック用のカテゴリーを追加する

2021/02/262021/03/02

当サイトのリンクには広告が含まれています。

前回、ブロックエディターの開発環境構築をしたので、カスタムブロックの開発に入っていきます。

前回の記事

【WordPress】カスタムブロックの開発環境構築ブロックエディターの登場により、これからはオリジナルのブロックを作る必要がどんどん増えていくのではないでしょうか。まだまだエディターは過渡期であり、情報が…

カスタムブロックはWordPressデフォルトのブロックのカテゴリーとは分けて、独自のカテゴリーにしておいたほうが分かりやすいと思うので、まずはブロックを作る前にカスタムブロック用にカテゴリーを新たに追加します。
（既存のカテゴリーにしたい場合は飛ばしてOK）

シリーズ記事

block_categoriesでカテゴリーを追加

プラグイン用のファイルcustom-block.phpを開きます。

一番下にadd_action( 'init', 'create_block_custom_block_block_init' );という記載があるので、その下に以下を追加します。

//ブロックカテゴリーの追加
function add_block_categories( $categories ) {
	$add_categories = [
		[
			'slug' => 'custom-block-category',  //スラッグ名
			'title' => 'カスタムブロック',  //表示名
			'icon' => 'edit',  //アイコン（なしでもOK）
		],
	];
	$categories = array_merge( $categories, $add_categories );
	return $categories;
}
add_filter( 'block_categories', 'add_block_categories' );

今回は、スラッグ名がcustom-block-category、タイトルがカスタムブロックというカテゴリーを追加するようにしました。

アイコンはなくてもいいですが、入れる場合はダッシュアイコンが使えます。
今回はこちらのEditアイコンを表示させてみました。

ブロックに追加したカテゴリーを設定する

新しく「カスタムブロック」というカテゴリーが追加されたので、このカテゴリーをブロックに設定してみます。

srcの中にあるindex.jsを開きます。
category: 'widgets'となっているところがカテゴリーの設定なので、ここの’widgets’を先ほど追加したカテゴリーのスラッグ'custom-block-category'に置き換えます。

registerBlockType( 'create-block/custom-block', {
	apiVersion: 2,
	title: __( 'Custom Block', 'custom-block' ),
	description: __(
		'Example block written with ESNext standard and JSX support – build step required.',
		'custom-block'
	),
	category: 'custom-block-category',  //'widgets'から変更
	icon: 'smiley',
	supports: {
		html: false,
	},
	edit: Edit,
	save,
} );

投稿画面を見ると、ブロックの一覧の一番下に追加した「カスタムブロック」カテゴリーがあり、最初ウィジェットカテゴリーにあったブロックがこちらに設定されているのが確認できました。