Gutenbergでブロックをブロックカテゴリーで管理する方法

Gutenbergでブロックカテゴリーを作成してブロックを管理する方法をまとめています。

現在使用しているテーマの機能をGutenbergに対応させるためにブロックを作成しているのですが、レイアウト要素に臨時で突っ込んでいた結果、使い勝手が悪くなりました。
テーマ専用のブロックをまとめたい場合に有効な方法です。

デフォルトのブロックカテゴリー

Gutenbergではデフォルトのブロックカテゴリーは普段表示されているものは全6種類あります。

一般ブロックの段落ブロックの使用時にブロック欄にインライン要素のブロックが出現するので、全7種類あります。※見た感じ

デフォルトのブロックカテゴリーリスト

• 最も使われているブロック
• 一般ブロック
• インライン要素
• フォーマット
• レイアウト要素
• ウィジェット
• 埋め込み

ブロックを作っていくと、デフォルトの機能とは別に自分で作ったブロックをまとめたくなりますよね。
あまりブロックカテゴリーに入れすぎると使い勝手が悪くなるので、まとめることが出来るブロックカテゴリーを使用して、ブロックを管理します。

テーマで使用するブロック専用のカテゴリーを作る方法

ブロックカテゴリーを作成するためのblock_categoriesフィルターが用意されていたので、それを使います。

Gutenbergのブロックをプラグインで作成した場合、プラグイン直下のphpファイルに記載しておけば良いでしょう。

上記で指定したslug部分の‘slug’ => ‘jin-blocks’,と、ブロックを作成した時のカテゴリー指定を連動させる必要があります。

下記一部抜粋しますが、registerBlockTypeでcategory: ‘jin-blocks’,の指定を共通にさせる必要があります。

registerBlockType( 'jin-blocks/chat', {
	title: __( '吹き出し', 'jin-blocks' ),
	description: __( '吹き出しを作ります。', 'jin-blocks' ),
	icon: 'format-aside',
	category: 'jin-blocks',

カテゴリーブロックのアイコン指定する方法

カテゴリーブロックで画像の様にアイコンを表示させたい場合は、 ‘icon’ => ‘wordpress’の部分にDeveloper Resources: Dashiconsに掲載されているアイコンを使用すれば簡単です。

画像右にある【dashicons-admin-comments】から接頭辞を抜いて【admin-comments】を指定すればOKです。

まとめ

Gutenbergのhandbookもまだまだ情報が足りてない状態で、Gutenbergのソースを見たり、既に公開されているGutenberg関連のプラグインのソースを眺めて試行錯誤しながらブロックを作っています。

jQueryに慣れていた私は初Reactなので、記述方法が？？？となる場合があるので、そろそろオライリーの本を買って基本を勉強しないと、本体ソースの読解が厳しい状態です。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Stoyan Stefanov

2,750円(05/17 11:40時点)

Amazon楽天市場

Amazonの情報を掲載しています

入門 React ―コンポーネントベースのWebフロントエンド開発

Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon HØjberg, Karl Mikkelsen

2,860円(05/17 11:40時点)

Amazon楽天市場

Amazonの情報を掲載しています