WordPress環境内にブロックの雛形を作成した状態で、同じプラグインディレクトリに複数のブロックをビルドする方法を見ていきます。

1点目のブロックをビルド

プラグインディレクトリにsrc/my-blockディレクトリを作成し、srcファルダの中身をsrc/my-blockディレクトリを移動する。@wordpress/create-blockコマンドを使用して雛形をインストールした場合は、既に次のようなフォルダ構造になっているかもれないため、2点目のブロックをビルドへ進む。

• my-block
  • src
    • my-block

my-block.phpを編集し、ビルドディレクトリのmy-blockディレクトリを指定する

function create_block_my_block_block_init() {
	register_block_type( __DIR__ . '/build/my-block' );
}
add_action( 'init', 'create_block_my_block_block_init' );

buildフォルダを削除して再ビルドする

2点目のブロックをビルド

src/my-blockディレクトリをコピーして、src/my-second-blockディレクトリへリネームする。

• my-block
  • src
    • my-block
    • my-second-block

対応するブロック名に書き換える。

• block.json
  • “name”: “create-block/my-second-block”へ編集
  • “title”: “My Second Block”へ編集
• index.css、style.scss
  • クラス名を.wp-block-create-block-my-second-blockへ編集

my-block.phpを編集して、2点目のブロックをWordPressに登録する。

function create_block_my_block_block_init() {
	register_block_type(__DIR__ . '/build/my-block');
	register_block_type(__DIR__ . './build/my-second-block');
}
add_action('init', 'create_block_my_block_block_init');

複数ブロックの登録は別の記述方法でもできる。

function create_block_my_block_block_init() {
	$blocks =array(
		'my-block',
		'my-second-block'
	);

	foreach($blocks as $block){
		register_block_type( __DIR__ . '/build/' . $block );
	}
}
add_action( 'init', 'create_block_my_block_block_init' );