@wordpress/create-blockで一つのプラグインに複数のブロックを入れる

以前調査検討した際に断念したのですが、比較的簡易に実現する方法を知りましたのでメモとして。

[追記:2023.9.3]
[WP]create-block でブロックの追加とダイナミックブロックを作成する方法 | WordPress テーマ DigiPress
当記事より少し早いタイミングで上記の記事が出ていましたので、こちらの方向で最新情報を参照しつつ用いる方が良さそうです。

実現したいこと

• @wordpress/create-blockを使用してブロック作成
• 通常は1プラグインに1ブロックしか作れないが、1プラグインに複数ブロックを入れる

@wordpress/create-block

1. ブロック開発の環境構築におけるwp-scriptsとCreate Guten Blockのメモ – WEBUTUBUTU
2. @wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る – WEBUTUBUTU
3. 3度目のブロック開発環境(Docker Desktopとcreate-block) – WEBUTUBUTU

@wordpress/create-blockに関しては上記参照のこと。古い順に並んでいます。

対応策

• Registering Multiple Gutenberg Blocks Each Through its Own block.json File | Luigi Cavalieri

基本的には上記が詳しいと思いますが、作業としては以下の動画の説明の方が簡単です。

大まかな流れ

1. $ npx @wordpress/create-block multiple-blocksのようにして、複数ブロックを入れる用のブロックを作成
2. srcディレクトリ内にblocka用のディレクトリを作成
3. blockaにsrcディレクトリ内にあったファイルを移動
4. block.json内のパスを変更する(※補足1参照)
5. blockaを必要な数だけ複製してリネーム
6. 複数ブロックを入れる用のブロックのPHPファイル(1で作った場合はmultiple-blocks.phpのはず)を書き換える(※補足2参照)
7. $ mpn run buildでビルド

補足1 block.jsonの変更点

{
  "apiVersion": 2,
  "name": "create-block/blocka",
  "title": "Block A",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/index.css",
  "style": "file:./build/style-index.css"
}

上記を以下のように変更します。

{
  "apiVersion": 2,
  "name": "create-block/blocka",
  "title": "Block A",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

変更していない場合はビルド時に以下のようなエラーが出力され、該当のブロックはビルドされません。

Skipping "./build/index.js" listed in "src/blocka/block.json". File does not exist in the "src" directory.

補足2 multiple-blocks.phpの変更点

function create_block_multiple_blocks_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_multiple_blocks_block_init' );

上記を以下のように、srcディレクトリ内のブロック用ディレクトリの分だけregister_block_typeを記述します。

function create_block_multiple_blocks_block_init() {
  register_block_type(__DIR__ . '/build/blocka');
  register_block_type(__DIR__ . '/build/blockb');
}
add_action( 'init', 'create_block_multiple_blocks_block_init' );

構造

ディレクトリやファイル構造は以下のようになります。

multiple-blocks
- multiple-blocks.php
- build
- src
  - blocka
    - block.json
    - edit.js
    - editor.scss
    - index.js
    - save.js
    - style.scss
  - blockb
    - block.json
    - edit.js
    - editor.scss
    - index.js
    - save.js
    - style.scss
- package-lock.json
- package.json
- readme.txt

既存のブロックをまとめる場合

基本的には問題なく既存のブロックも中に入れてまとめられますし、ブロックを再度配置し直す必要もなく、そのまま使えます。

各ブロック共通のコードや画像などをまとめることができますが、その場合は適宜パスの変更が必要になります。

結び

実際に作業を行うと思った以上に簡単にできました。

ただし、この方法は本来意図されている方法ではないことに変わりはないので、今後も使えるのかわからない点には留意が必要です。
もしもの時は元に戻すことも検討しておく必要があるかもしれません。

参考

• Create Block: Create a more modular structure that is easier to extend to several blocks · Issue #25188 · WordPress/gutenberg