通常、1プラグインに1ブロックしか作れません。これだとテーマにブロックを作りたいなど手間になります。おそらく非公式だと思いますが、理論上は間違いではないと思うので問題はないかと思います。
今回は、プラグインではなくテーマにブロックを実装する方法で説明します。プラグインでも同じことなのでお試しください。
まず、 @wordpress/scripts（wp-script）で環境を構築します。この時点で1つのブロックが作成できます。環境の構築については以下を、ご覧ください。
開発環境構築方法
WordPressのテーマでブロック(Block)を作成する方法
テーマ用にブロックを作成したいと思い色々と調べました。JSXで各場合は環境の構築が必要です。WordPress では環境構築を簡単に行うためのパッケージとして @wordpress/…
目次
テーマファイル構成
もともとの themes-block フォルダの中は以下のようになっています。このブロックを２つ作成する方法で説明します。
└── 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.scssblock.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 buildbuild ディレクトリの中に、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',
)
);まとめ
この方法なら、一つのプラグインで複数のブロックが実装可能になります。プラグインの数が増えることに疑問を抱いていたので、モヤモヤが解消しました。
ただし、公式ではないと思うので注意が必要かと思います。
コメント