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 );

特定の投稿タイプでのみカテゴリーを追加したい場合は、上記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',にて、オリジナルのカテゴリーを指定しています。

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

オリジナルカテゴリーの出現簡単でしたね!

 

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

WordPressの新エディタ「Guternberg」でカスタムブロックを追加する方法(基礎編)WordPressの新エディタ「Guternberg」でカスタムブロックを追加する方法(基礎編)
WEMO
- Thank you for reading. -
自分の価値を生み出すWordPressテーマ、SWELL

【限定セール中!】Gutenberg完全対応!驚きの書き心地を体感しよう。

エックサーバー 当サイトはエックスサーバーで運営しています。
mixhost 速度重視ならMixHostがオススメ!

コメント

コメントする