カスタムブロックを登録するinitアクションのメモ

create-blockを使ってカスタムブロックを作る際、PHPファイルに記述するinitアクションのコールバック関数が自分的に定形化してきたので、とりあえず現状のものをメモとして残しておく。

カスタムブロックを1つから2つへ

create-blockを使って独自のカスタムブロックの雛型を作ると、PHPのソースコードには次のようなinitアクションのコールバック関数が生成される（便宜上、関数名を短かめに修正）。

function hello_blocks_init() {
	register_block_type( __DIR__ . '/build' );
}

add_action( 'init', 'hello_blocks_init' );

register_block_type関数はブロックを登録するもので、第1パラメータにはブロックの定義内容が記述されているblock.jsonファイルまたはそのディレクトリのパス名を指定する。

1つのプラグインに2つ以上のカスタムブロックを作る場合は、1つ目のカスタムブロックのソースコード一式を「src」ディレクトリから移動させる。移動先のディレクトリは「src/blocks/〇〇〇〇」が一般的（お好みで「src/〇〇〇〇」のように「src」ディレクトリのすぐ下に各ブロックのディレクトリを配置するのもあり）。

カスタムブロックの配置ルールを決めたら、create-blockを使って2つ目のカスタムブロックの雛型を生成。initアクションのコールバック関数は次のように変更する。

function hello_blocks_init() {
	foreach ( glob( plugin_dir_path( __FILE__ ) . 'build/blocks/*' ) as $block_path ) {
		register_block_type( $block_path );
	}
}

glob関数で「build/blocks」ディレクトリ下のパス名を取得し、そのパス名をregister_block_type関数の第1パラメータとする（「build/blocks」ディレクトリ下にカスタムブロック以外のディレクトリやファイルを配置する場合は適宜調整を）。これにより「build/blocks」ディレクトリ下のblock.jsonファイルが読み込まれ、複数のカスタムブロックが登録される。

カスタムブロックの翻訳

カスタムブロックの翻訳は、PHP向けとJavaScript向けの対応が必要となり、カスタムブロックを登録するinitアクションのコールバック関数は次のように変更する（各翻訳ファイルはプラグインのlanguagesディレクトリに配置されているものとする）。

function hello_blocks_init() {
	load_plugin_textdomain( 'hello_blocks_domain', false, basename( __DIR__ ) . '/languages' );

	foreach ( glob( plugin_dir_path( __FILE__ ) . 'build/blocks/*' ) as $block_path ) {
		$block = wp_json_file_decode( $block_path . '/block.json' );
		$attr = [
			'title'       => __( $block->title, 'hello_blocks_domain' ),
			'description' => __( $block->description, 'hello_blocks_domain' )
		];
		register_block_type( $block_path, $attr );

		$script_handle = generate_block_asset_handle( $block->name, 'editorScript' );
		wp_set_script_translations( $script_handle, 'hello_blocks_domain', dirname( __FILE__ ) . '/languages' );
	}
}

PHP向けの対応では、まず load_plugin_textdomain関数でプラグインのMO（またはl10n.php）ファイルをロードする。各カスタムブロックのblock.jsonファイルを wp_json_file_decode関数で読み込み、block.jsonファイルの'title'と'description'の内容を翻訳したものをregister_block_type関数の第2パラメータに指定。これでブロックエディターのブロック名と説明文が翻訳された内容になる。

JavaScript向けの対応は、 wp_set_script_translations関数を使い、その第1パラメータには generate_block_asset_handle関数で 取得できるハンドル名を指定する。これでJavaScript用の翻訳内容が記述されたjsonファイルが読み込まれるようになる。