WordPressのブロック(Block)を複数まとめて開発する方法

WordPressブロックを複数同時に作成

通常、1プラグインに1ブロックしか作れません。これだとテーマにブロックを作りたいなど手間になります。おそらく非公式だと思いますが、理論上は間違いではないと思うので問題はないかと思います。

今回は、プラグインではなくテーマにブロックを実装する方法で説明します。プラグインでも同じことなのでお試しください。

まず、 @wordpress/scripts(wp-script)で環境を構築します。この時点で1つのブロックが作成できます。環境の構築については以下を、ご覧ください。

目次

テーマファイル構成

もともとの themes-block フォルダの中は以下のようになっています。このブロックを2つ作成する方法で説明します。

└── wp-content
    └── themes
        └── sample01 //使用するテーマのディレクトリ
            ├── category.php
            ├── front-page.php
            ├── functions.php
            ├── index.php
            │    ...
            └── themes-block
                      ├── build              //ビルドすると自動生成
                      ├── node_modules       // npm で自動生成
                      ├── package-lock.json  // npm で自動生成
                      ├── package.json       // npm で自動生成
                      └── src
                           ├── block.json
                           ├── edit.js
                           ├── editor.scss
                           ├── index.js
                           ├── save.js
                           └── style.scss

まず、以下のように srcフォルダ内に block1 block2 というフォルダを作成します。
block1 に、srcフォルダのファイルを移動し、block2 にはコピーをして以下のような構成にします。

└── wp-content
    └── themes
        └── sample01 //使用するテーマのディレクトリ
            ├── category.php
            ├── front-page.php
            ├── functions.php
            ├── index.php
            │    ...
            └── themes-block
                      ├── build
                      ├── node_modules
                      ├── package-lock.json
                      ├── package.json
                      └── src
                           ├── block1
                           │     ├── block.json
                           │     ├── edit.js
                           │     ├── editor.scss
                           │     ├── index.js
                           │     ├── save.js
                           │     └── style.scss
                           └── block2
                                 ├── block.json
                                 ├── edit.js
                                 ├── editor.scss
                                 ├── index.js
                                 ├── save.js
                                 └── style.scss

block.jsonの書き換え

block1/block.json

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "block-namespace/block-slug1",
	"version": "0.1.0",
	"title": "block-title1",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example static block scaffolded with Create Block tool.",
	"supports": {
		"html": false
	},
	"textdomain": "block-slug1",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

block2/block.json

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "block-namespace/block-slug2",
	"version": "0.1.0",
	"title": "block-title2",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example static block scaffolded with Create Block tool.",
	"supports": {
		"html": false
	},
	"textdomain": "block-slug2",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

ビルドを実行

$ npm run build

build ディレクトリの中に、block1 と block2 のファルダが作成されビルドされているはずです。

テーマでブロックを読み込み

// index.asset.php をインクルード
$asset_file1 = include( get_theme_file_path('/block-src/build/block1/index.asset.php'));
$asset_file2 = include( get_theme_file_path('/block-src/build/block2/index.asset.php'));

// ブロックのスクリプトを登録
wp_register_script(
	'test-theme-block-script1',
	get_theme_file_uri('/themes-block/build/block1/index.js'),
	$asset_file1['dependencies'],    //依存しているスクリプトの配列
	$asset_file1['version']          //バージョン
);

wp_register_script(
	'test-theme-block-script2',
	get_theme_file_uri('/themes-block/build/block2/index.js'),
	$asset_file1['dependencies'],    //依存しているスクリプトの配列
	$asset_file1['version']          //バージョン
);

//ブロックタイプの登録
register_block_type( 
	'block-namespace/block-slug1',
	array(
		//エディター用スクリプトにブロック用スクリプトのハンドル名を指定して関連付け
		'editor_script' => 'test-theme-block-script1',
	)
);

register_block_type( 
	'block-namespace/block-slug2',
	array(
		//エディター用スクリプトにブロック用スクリプトのハンドル名を指定して関連付け
		'editor_script' => 'test-theme-block-script2',
	)
);

まとめ

この方法なら、一つのプラグインで複数のブロックが実装可能になります。プラグインの数が増えることに疑問を抱いていたので、モヤモヤが解消しました。

ただし、公式ではないと思うので注意が必要かと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コスト最小で制作をしたいという意識強め(笑)

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次