WordPressで独自のブロックエディターを実装するために、プラグインの雛形を作成する公式サポートツールとして @wordpress/create-block があります。
このサポートツールを実行するとブロック開発が行える雛形が簡単に用意される大変ありがたいツールです。
ですが、1プラグインで1つのブロックが設定できる雛形となっており、1プラグインで複数ブロックに対応させる方法がありませんでした。
オプションも無く、設定方法を調べても作成したブロックをビルドするコマンドの wp-scripts コマンドでの設定を変更するものばかりが見つかりました。
古い情報だったのか(?) 執筆時の 2023年12月 ではもっと簡単に設定できたので記事としてまとめておきます。
設定方法
@wordpress/create-block で作成される src/ ディレクトリ配下にディレクトリとして設置することで対応できました。
コマンドとしては以下で確認できます。
$ npx @wordpress/create-block@latest todo-list
$ cd todo-list
$ rm -rf src/*
$ cd src/
$ npx @wordpress/create-block@latest --no-plugin one
$ npx @wordpress/create-block@latest --no-plugin twoディレクトリ構造としては以下のようになります。
├── package-lock.json
├── package.json
├── readme.txt
├── src
│ ├── one
│ │ ├── block.json
│ │ ├── edit.js
│ │ ├── editor.scss
│ │ ├── index.js
│ │ ├── save.js
│ │ ├── style.scss
│ │ └── view.js
│ └── two
│ ├── block.json
│ ├── edit.js
│ ├── editor.scss
│ ├── index.js
│ ├── save.js
│ ├── style.scss
│ └── view.js
└── todo-list.phpプラグインのPHPファイルに以下のようにブロックを登録すれば読み込まれます。
register_block_type( __DIR__ . '/build/one' );
register_block_type( __DIR__ . '/build/two' );blocks ディレクトリを作成して wp-script のビルド対象を変更するオプションを指定する記事なども見つかりましたが、初期で作成される src/ ディレクトリ配下に置くだけで複数ブロックをビルド可能になっているので、こちらの方が簡単に設定できるかと思います。
以上、参考になりましたら幸いです。
コメントを残す