【WordPress】オリジナルのブロックカテゴリを追加する：Gutenberg

こんな疑問にお答えします。

そもそもなんでブロックカテゴリーがほしいと思ったのかというとオリジナルのブロックを作成した際にデフォルトのカテゴリに分類したくないなーと思ったことがきっかけでした。

オリジナルのブロックカテゴリーがほしいけど追加する方法がわからないという方に向けた記事になります。

Gutenbergのブロックカテゴリーとは

Gutenberg のブロックカテゴリーはオレンジ色の枠で囲った「一般ブロック」のようなカテゴリがブロックカテゴリーです。

WordPress でブログを書く際に「段落・リスト・見出し」などをグループに分けているカテゴリのことを指します。

参考：WordPress のまったく新しい使い方です。ここでお試しください。

Gutenbergのブロックカテゴリを追加する

実装するには functions.php に次のコードを貼り付けます。

/**
 * オリジナルのブロックカテゴリーの追加
 */
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
function my_plugin_block_categories( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-block',   //ブロックカテゴリーのスラッグ
                'title' => 'My Block',  //ブロックカテゴリーのタイトル
                'icon'  => 'wordpress',    //ブロックカテゴリーのアイコン
            ),
        )
    );
}

ちなみに、特定のカスタム投稿タイプでブロックカテゴリーの表示・非表示の制御をしたい場合は下記のコードを array_merge の前で編集すればOKです。

if ( $post->post_type === 'news' ) {
  return $categories;
}

ハマったポイント

上のコードを functions.php に実装しただけではブロックカテゴリーが表示されずにハマってしまいました。

実はブロックカテゴリーに「段落・リスト・見出し」のようなオリジナル（独自）のカスタムブロックを追加する必要があるみたいでした。

そこで次に簡単なオリジナルのカスタムブロックをオリジナルのブロックカテゴリに追加してみます。

Gutenberg：オリジナルブロックの追加

オリジナルのブロックを追加するにはJavaScript（React）で実装します。

実装例↓↓

( function( blocks, element ) {
	var el = element.createElement;

        //JavaScript のオブジェクト形式でスタイルを記述
	var blockStyle = {
		backgroundColor: '#900',
		color: '#fff',
		padding: '20px',
	};

        //registerBlockType でブロックを登録
	blocks.registerBlockType( 'gutenberg-examples/my-block', {
		title: 'ブロック例１',
		icon: 'universal-access-alt',
		category: 'my-block', // ブロックカテゴリーを指定する
		edit: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Hello World,（管理画面用のメッセージ）'
			);
		},
		save: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Hello World, （フロント画面用のメッセージ）'
			);
		},
	} );
} )( window.wp.blocks, window.wp.element );

上記コードを実装後、ブロックエディターを確認してみるとオリジナルのブロックカテゴリーが追加されていることを確認できました。

まとめ

オリジナルブロックの追加方法の詳細は下記の記事を参考になります。