WordPressのブロック(Block)にカテゴリを作成して追加する

2023-01-272023-07-05

Blockを作るときに自分の作成したブロックをカテゴリで、まとめたいことがあります。
オリジナルのブロックカテゴリを作ってみます。

ブロックの作り方はこちら

WordPressのテーマでブロック(Block)を作成する方法テーマ用にブロックを作成したいと思い色々と調べました。JSXで各場合は環境の構築が必要です。WordPress では環境構築を簡単に行うためのパッケージとして @wordpress/…

利用するフィルター・フック

apply_filters( 
	'block_categories_all', 
	array[] $block_categories, 
	WP_Block_Editor_Context $block_editor_context
)

フックの block_categories は5.8より廃止され block_categories_all を使います。

functions.php に追加

 /**
  * オリジナルのブロックカテゴリーを追加
  */
 function add_block_categories( $categories , $post ) {

  $add_categories = [
    [
      'slug' => 'original-block',
      'title' => 'オリジナル',
      'icon' => 'admin-site-alt3',
    ],
  ];
  $categories = array_merge( $add_categories , $categories);
  return $categories;
}
add_filter( 'block_categories_all', 'add_block_categories', 10, 2);

あとは、ブロックを追加するとカテゴリが出現します。

block.json の category にスラッグを入力

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "block-namespace/block-slug1",
	"version": "0.1.0",
	"title": "block-title1",
	"category": "original-block",
	"icon": "",
	"description": "Example static block scaffolded with Create Block tool.",
	"supports": {
		"html": false
	},
	"textdomain": "block-slug1",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"attributes": {

	}
}

ブロックをビルドすれば、作成したオリジナルのカテゴリにブロックが追加されるはずです。

よかったらシェアしてね！