custom-blocksで複数のブロックを作成する

@wordpress/create-blockのパッケージを使用する際、1つのプラグインで複数のブロックを作成できないかを試してみたので、その内容をメモ。
WordPressのバージョン6.4.1を使用しています。

設定方法

ターミナルでpluginsディレクトリへ移動して、create-blockをインストールします。

npx @wordpress/create-block multiple-custom-blocks

今回は複数のブロックを管理するので、multiple-custom-blocksという名前で作成しました。

パッケージのインストール完了後、multiple-custom-blocksディレクトリの中に移動します。
buildディレクトリが作成されている場合は削除しておいてください。

1つ目のブロック作成

まずは複数のブロックを作成する想定で、デフォルトで入っているブロックを「custom-text」というブロックに変更してみます。
srcディレクトリ内にcustom-textという名前のフォルダを作成して、src内の全てのファイルをcustom-textフォルダに移動して、以下のようなファイル構成にします。

• src
  • custom-text
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
• multiple-custom-blocks.php
• …略

multiple-custom-blocks.phpのregister_block_type関数のパラメータにあるパスを「/build」から「/build/custom-text」変更します。

function multiple_custom_blocks_multiple_custom_blocks_block_init() {
	register_block_type( __DIR__ . '/build/custom-text' );
}
add_action( 'init', 'multiple_custom_blocks_multiple_custom_blocks_block_init' );

src/custom-text/block.jsonのnameとtitleの値を変更します。

{
	～略～
	"name": "create-block/custom-text",
	"version": "0.1.0",
	"title": "Custom Text",
	～略～
}

src/custom-text/style.scssのclass名を変更します。

.wp-block-create-block-custom-text {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

これで変更作業が完了したので、ビルドを行います。

npm run build

管理画面でMultiple Custom Blocksのプラグインを有効にして、ブロックエディタで確認してみると、Custom Textというブロックを追加できました。

この段階での構成は以下のようになっています。

• build
  • custom-text
• src
  • custom-text
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
• multiple-custom-blocks.php
• …略

2つ目のブロック作成

次にブロックを別途追加してみます。
srcディレクトリ内に作成したcustom-textフォルダを複製して、custom-text2という名前にします。

multiple-custom-blocks.phpで、custom-text2の分のregister_block_type関数を増やします。

function multiple_custom_blocks_multiple_custom_blocks_block_init() {
	register_block_type( __DIR__ . '/build/custom-text' );
	register_block_type( __DIR__ . '/build/custom-text2' );
}
add_action( 'init', 'multiple_custom_blocks_multiple_custom_blocks_block_init' );

src/custom-text2/block.jsonのnameとtitleの値を変更します。

{
	～略～
	"name": "create-block/custom-text2",
	"version": "0.1.0",
	"title": "Custom Text2",
	～略～
}

src/custom-text2/style.scssのclass名を変更します。
あわせて最初のブロックとの違いが分かるように、背景色をオレンジに変更しておきます。

.wp-block-create-block-custom-text2 {
	background-color: orange;
	color: #fff;
	padding: 2px;
}

これで追加作業完了なので、ビルドを実行します。

npm run build

ブロックエディタで確認してみると、Custom Text2というブロックの追加が確認できました。

サイト上の表示も意図した状態になっています。

最終的な構成は以下のようになります。

• build
  • custom-text
  • custom-text2
• src
  • custom-text
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
  • custom-text2
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
• multiple-custom-blocks.php
• …略