WordPress:Gutenbergにオリジナルのブロックカテゴリを追加する方法

WordPress:Gutenbergにオリジナルのブロックカテゴリを追加する方法

Gutenbergでオリジナルのブロックカテゴリを追加する方法です。
作成したブロックがデフォルトカテゴリのいずれにも当てはまらないときやオリジナルブロックを複数作成していてデフォルトとは異なるのをハッキリ区別したいときに使えます。

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

実装にはblock_categories()を用いてfunctions.phpへ下記のように記述します。
'icon'の部分を指定するとカテゴリ名の横にアイコンが表示され、Dashiconsのアイコンならスラッグを記述するだけで表示させることができます。
また、作成したブロックカテゴリはそのカテゴリにブロックがひとつも属していないと表示されないので、併せて属したいブロックのカテゴリ指定も作成するブロックカテゴリのスラッグ名(このサンプルコードの場合はexample-category)にしておきます。

functions.php

add_filter( 'block_categories', 'add_block_categories' );
function add_block_categories( $categories ) {
  $add_categories = [
    [
      'slug' => 'example-category',
      'title' => 'サンプルカテゴリー',
      'icon' => 'admin-site-alt3',
    ],
  ];
  $categories = array_merge( $categories, $add_categories );
  return $categories;
}
独自のブロックカテゴリを作成

記述後、表示を確認するとイメージのように「サンプルカテゴリー」という新たなカテゴリが追加されているのを確認でき、中に自身で作成したブロックが属しているのを確認できます。

先頭にブロックカテゴリを追加する

上の方法では作成したブロックカテゴリは末尾(「埋め込み」カテゴリの下)に追加されますが、array_merge()の記述順を逆にすることで先頭(「一般ブロック」の上)に追加することができます。

functions.php

add_filter( 'block_categories', 'add_block_categories' );
function add_block_categories( $categories ) {
  $add_categories = [
    [
      'slug' => 'example-category',
      'title' => 'サンプルカテゴリー',
      'icon' => 'admin-site-alt3',
    ],
  ];
  $categories = array_merge( $add_categories, $categories );
  return $categories;
}

特定の投稿タイプのみに追加

カテゴリを特定の投稿タイプのみに追加したい場合はfunctions.phpへ下記のように記述します。
下記は例として「投稿」のみ「サンプルカテゴリー」というブロックカテゴリを追加する例で、実装後に確認すると「投稿」では追加されていますが「固定ページ」ではブロックカテゴリが表示されないのを確認できます。

functions.php

add_filter( 'block_categories', 'add_block_categories', 10, 2 );
function add_block_categories( $categories, $post ) {
  if ( $post->post_type === 'post' ) {
    $add_categories = [
      [
        'slug' => 'example-category',
        'title' => 'サンプルカテゴリー',
      ],
    ];
    $categories = array_merge( $categories, $add_categories );
  }
  return $categories;
}

ちなみに、複数の投稿タイプがあって「固定ページ以外で追加したい」などを行いたいのであれば、条件分岐部分を$post->post_type !== 'page'のように指定してあげれば実装可能です。

アイコンを任意で指定

カテゴリ名横に任意のアイコンを表示

カテゴリ名横のアイコンをDashiconsではなく自身で用意したアイコンなどにしたい場合はJSを併用します。
ブロックカテゴリの追加としてfunctions.phpに、アイコン設定としてブロックエディタで読み込んでいるJSにそれぞれ下記のように記述します。

JSはupdateCategoryの第1引数に対象のブロックカテゴリのスラッグを、第2引数にアイコンのサイズやパスなどを指定します。
アイコンサイズは任意ですが、用意する際は18x18pxのサイズが丁度良くておすすめです。

functions.php

add_filter( 'block_categories', 'add_block_categories' );
function add_block_categories( $categories ) {
  $add_categories = [
    [
      'slug' => 'example-category',
      'title' => 'サンプルカテゴリー',
    ],
  ];
  $categories = array_merge( $categories, $add_categories );
  return $categories;
}

example.js

const el = wp.element.createElement;
const categoryIcon = el(
  'svg',
  { width: 18, height: 18, viewBox: '0 0 18 18' },
  el( 'path', {
    d: 'M14.9 6h-.5c-.4-1.2-1.1-2.3-2-3.1V.3c0-.1-.1-.1-.2-.1-1 0-1.8.6-2.2 1.4-.6-.2-1.3-.3-2-.3-2.4 0-4.5 1.2-5.7 3.1l-.1.1c-.1.2-.3.3-.6.3-.4 0-.7-.3-.7-.7 0-.3.2-.6.5-.7.2 0 .3-.2.2-.4 0-.2-.2-.3-.4-.3-.6.2-1 .7-1 1.4 0 .8.6 1.4 1.4 1.4h.1c-.3.8-.4 1.6-.4 2.5 0 2.1 1 4.1 2.7 5.3v1.6c0 .5.3.9.8.9h.6c.5 0 .9-.4.9-.9v-.5c1.1.3 2.2.3 3.4 0v.5c0 .5.3.9.8.9h.6c.5 0 .9-.4.9-.9v-1.6c1.1-.9 1.9-2 2.3-3.4h.5c.5 0 .9-.4.9-.9V6.9c.1-.5-.3-.9-.8-.9zm-4.1.8c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9c-.1.5-.5.9-.9.9z'
  } )
);
wp.blocks.updateCategory( 'example-category', { icon: categoryIcon } );

Close the search window,
please press close button or esc key.