【WordPress】Guternbergにオリジナルのブロックカテゴリーを追加する方法

2018年12月17日2019年8月16日

WordPress5からの新エディタ、Guternbergでは様々なブロックタイプが用意されており、それぞれの特徴を元に、「ブロックカテゴリー」ごとに振り分けられています。

ブロックカテゴリーとは、下の画像の「一般ブロック」・「フォーマット」・「レイアウト要素」などのことです。

カスタムブロックなどを追加するとき、どのカテゴリーに追加すべきか？というのは地味に悩みどころ...。

まてよ、いっそのこと新しいブロックカテゴリを作ってしまえばいいのでは？

と思い、調べてみると結構簡単に追加できたので、備忘録として残しておきます。

いくつかブロックタイプを追加しても「このブロックはカスタマイズによって追加されたものだ」ということが分かりやすくて、結構個人的にはいい感じです。

オリジナルのカテゴリーを追加するPHPコード

ブロックカテゴリの登録は functions.php から可能です。

以下のように'block_categories'というフィルターフックを使用し、すでに登録済みの$categoriesに新しく追加したいカテゴリーの配列をマージさせてあげます。

例：「My category」というカテゴリーを登録

function my_plugin_block_categories( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-category',   //ブロックカテゴリーのスラッグ
                'title' => 'My category',  //ブロックカテゴリーの表示名
                'icon'  => 'wordpress',    //アイコンの指定（Dashicons名）
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

特定の投稿タイプでのみカテゴリーを追加したい場合は、上記２行目でのreturnの前に以下のようなコードを差し込むといいでしょう。

例：通常投稿タイプ以外はそのままのカテゴリーを返す

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

追加されたカテゴリーにカスタムブロックを追加すると出現する

functions.phpからカテゴリーを登録しただけでは、まだエディタには表示されません。

何かブロックがそのカテゴリーに登録されていないとダメみたいです。

そこで、何か適当にカスタムブロックを登録してあげるととりあえずカテゴリーの登録が確認できます。

例：とりあえずカスタムブロックを登録してみる

(function () {
    var el = wp.element.createElement,
        blocks = wp.blocks;
    blocks.registerBlockType('my-plugin/sample-block01', {
        title: 'サンプルブロック01',
        icon: 'wordpress-alt',
        category: 'my-category',    // 登録したカテゴリーを指定する
        edit: function () {
            return el(
                'p',
                {},
                'カスタムブローーーック！'
            );
        },
        save: function () {
            return el(
                'p',
                {},
                'カスタムブローーーック！'
            );
        },
    });
})();

7行目のcategory: 'my-category',にて、オリジナルのカテゴリーを指定しています。

ブロックが登録されると、以下のようにオリジナルのカテゴリーが出現します！

ちなみに、カスタムブロックの登録については以下の記事でチュートリアル式に詳しく説明していますので、ぜひ参考にしてみてください。