開発者ブログ - マルチブロックプラグインの作成方法（How to build a multi-block plugin）

マルチブロックプラグインの利点
基本設定
- ブロックプラグインの作成
プラグイン構造のリファクタリング
追加ブロックの追加
動的ブロックの追加
まとめ
リソース

マルチブロックプラグインの利点

メンテナンスが少なく、依存関係の管理が容易
共有コードが増え、プラグイン間の重複を減らす
セキュリティの応答時間の改善の可能性（私は専門家ではありませんが、重要な依存関係に穴がある場合、1つのプラグインで対処し制御する方が10個のプラグインよりも簡単です）

カスタムブロックの作成やシステムのセットアップ、必要な要件に不慣れな場合は、WordPressでのブロック開発環境の作成をお読みください。

このチュートリアルに沿って構築している場合、参照用のプラグインの例がこの公開リポジトリにあります。

基本設定

このチュートリアルのセクションの終わりまでに、WP Multi Blockという単一のプラグインを構築し、2つの静的ブロックと1つの動的ブロックを登録します。ブロックプラグインの作成を始めましょう。

ブロックプラグインの作成

最初のステップは、ブロック用の基本プラグインをセットアップすることです。これには、公式にサポートされているcreate-blockツールを使用します。このツールは、/pluginsフォルダー内で1つの簡単なコマンドを実行することで、このプラグインのスキャフォールディングを処理します：

npx @wordpress/create-block@latest wp-multi-block

デフォルトでは、@wordpress/create-blockは静的ブロックを生成しますが、動的ブロックのみで開始したい場合は、--variant dynamicという引数を使用できます。チュートリアルに従っている場合は、後でこの引数を使用します。

静的ブロックと動的ブロックの違いは何ですか？非常に大まかに言えば、静的ブロックはsave()関数を使用して、ブロックのHTMLマークアップをデータベースのpost_contentテーブルに保存します。動的ブロックは、ページまたは投稿が表示されるときにサーバー側でコンテンツをレンダリングするためにPHPレンダコールバックを使用し、ブロックの属性のみをデータベースに保存します。詳細については、開発者ブログの静的ブロックと動的ブロックの違いは何ですか？をお読みください。

このチュートリアルの目的のために、基本コマンドを使用して静的ブロックから始めます。

プラグイン構造のリファクタリング

プラグイン内の複数のブロックをより良く整理するために、プラグイン構造にいくつかの変更を加えることができます。

マスターブロックディレクトリの作成


- 既存のファイルをすべて削除
- `````blocks`````という名前のフォルダーを作成
`````blocks`````ディレクトリを追加するのは、不要に思えるかもしれませんが、後で`````src/scripts`````やおそらく`````src/styles`````を追加できるようにしたいので、ブロックをグループ化することで長期的な整理とメンテナンスが改善されます。
 <a name="create-a-single-block"></a>
### 単一ブロックの作成
`````@wordpress/create-block`````を使用して、ブロックに必要なものだけをセットアップする方法があります。`````--no-plugin`````オプションを使用します。`````src/blocks`````ディレクトリ内で次のコマンドを実行します：
``````bash
npx @wordpress/create-block@latest block-one --no-plugin
`

VS Codeでの更新されたディレクトリ構造は次のようになります：

VS Codeからのブロック1のファイルとフォルダー構造のビュー。

ブロックタイプアクションの登録の更新

ブロックが新しいディレクトリに移動したので、register_block_typeアクション内のその位置への参照を更新する必要があります：

wp-multi-block.phpファイルを編集
既存の関数により良い名前を付け、multiblock_register_static_blocksを使用します
register_block_type関数内で、ブロックへの新しいパスを含める必要がありますので、/build/blocks/block-oneのようになります。

最終的なコードは次のようになります：

function multiblock_register_blocks() {
    register_block_type( __DIR__ . '/build/blocks/block-one' );
}
add_action( 'init', 'multiblock_register_blocks' );

ビルドファイルの更新

npm run buildを実行してビルドファイルを再生成する時間です。

これらの変更が機能することを確認し、プラグインを有効にしてエディターを更新し、最初のブロックを追加します。最終的には次のようになります：

最初の静的ブロックのエディタビュー。

追加ブロックの追加

追加のブロックを追加するのは、最初のブロックを作成したときと同じコマンドを実行するだけで簡単ですが、異なる名前を付けます。ブロック2を作成してください。

新しいブロックを作成

最初のブロックを作成したときと同じことを繰り返すことができます。src/blocksディレクトリ内で次のコマンドを実行します：

npx @wordpress/create-block@latest block-two --no-plugin

VS Codeでの更新されたディレクトリ構造は次のようになります：

VS Codeからの最初の2つのブロックのファイルとフォルダー構造のビュー。

ブロックタイプアクションの登録の更新

wp-multi-block.phpファイルを編集し、register_block_type関数を複製して/build/blocks/block-twoへの参照を変更します。

最終的なコードは次のようになります：

function multiblock_register_blocks() {
    register_block_type( __DIR__ . '/build/blocks/block-one' );
    register_block_type( __DIR__ . '/build/blocks/block-two' );
}
add_action( 'init', 'multiblock_register_blocks' );

ビルドファイルの更新

npm run buildを実行してビルドファイルを再生成する時間です。

これらの変更が機能することを確認し、エディターを更新して両方のブロックを追加します。最終的には次のようになります：

最初の2つの静的ブロックのエディタビュー。

動的ブロックの追加

これまで、静的ブロックのみを扱ってきましたが、動的ブロックにはどのように適用されますか？いくつかの更新を行うことで、静的ブロックとともに動的ブロックも含めることができます。両方のブロックタイプに不慣れな場合は、開発者ブログの静的ブロックと動的ブロックの違いは何ですか？をお読みください。

以前と同様に新しいブロックを作成しますが、今回は動的ブロックを作成していることを指定するオプションを追加します。ブロック3を作成してください。

動的ブロックを作成

再び@wordpress/create-blockを使用して動的ブロックを作成できます。src/blocksディレクトリ内で次のコマンドを実行します：

npx @wordpress/create-block@latest block-three --no-plugin --variant dynamic

ブロックタイプアクションの登録の更新

wp-multi-block.phpファイルを編集し、register_block_type関数を複製して/build/blocks/block-threeへの参照を変更します。

最終的なコードは次のようになります：

function multiblock_register_blocks() {
    register_block_type( __DIR__ . '/build/blocks/block-one' );
    register_block_type( __DIR__ . '/build/blocks/block-two' );
    register_block_type( __DIR__ . '/build/blocks/block-three' );
}
add_action( 'init', 'multiblock_register_blocks' );

ビルドおよび開始コマンドの更新

ビルドを更新する前に、ビルドコマンドに引数を追加する必要があります。--webpack-copy-phpを追加することで、ビルドプロセスに最終ビルドディレクトリにPHPファイルを含めるように指示します。

package.jsonを編集
buildおよびstartコマンドを更新して、webpackにPHPファイルをコピーするように指示します。

最終的なコマンドは次のようになります：

"build": "wp-scripts build --webpack-copy-php"
"start": "wp-scripts start --webpack-copy-php"

ビルドファイルの更新

npm run buildを実行してビルドファイルを再生成する時間です。

これらの変更が機能することを確認し、エディターを更新して3つのブロックをすべて追加します。最終的には次のようになります：

これまでに構築された3つのブロックのエディタビュー。

テキストドメインに関する注意


 <a name="recap-of-basic-setup"></a>
## 基本設定の要約
おめでとうございます！もしあなたがこのチュートリアルに従ってきたなら、3つのブロックを読み込み、単一の依存関係セットで維持されるマルチブロックプラグインを作成したことになります。そして、新しいブロックを追加するための手順を何度でも繰り返すことができます。覚えておくべき重要なポイントは次のとおりです：
- 各ブロック名は一意でなければならないため、ブロックファイル全体で`````names`````および`````titles`````への参照を更新するのを忘れないでください
- 各ブロックは`````register_block_type`````関数で登録されなければなりません
各動的ブロックは、`````register_block_type`````関数の一部としてPHPファイルへの参照を持っている必要があり、これは`````block.json`````ファイルで定義されています。
 <a name="advanced-configuration"></a>
## 高度な設定
この時点からの各セクションは完全にオプションですが、すでに完全に機能するマルチブロックを持っているので、プラグインの全体的な設定を改善し、開発をより効率化し、メンテナンスを簡素化し、コードの全体的な可読性を向上させるために、これらの追加手順を進めることをお勧めします。
このチュートリアルのセクションの終わりまでに、次のことを行います：
- もう1つの動的ブロックを追加
- ブロックの配列を作成
- `````foreach`````を使用するように関数を更新
- アセットを単一のリソースにコンパイルするためにwebpackを追加
- コアブロックスタイルを変更するスクリプトを追加します。
新しい`````register_block_type`````関数を追加するのは非常に簡単ですが、そのコードが20回以上繰り返されるとどうなるでしょうか？その代わりに、**ブロックの配列**を追加し、`````foreach`````を使用して配列内の各ブロックを登録します。
**別の動的ブロックの追加**
始める前に、テスト目的のために2つ目の動的ブロックを持つことが役立ちますので、`````src/blocks`````ディレクトリ内に作成してください：
``````bash
npx @wordpress/create-block@latest block-four --no-plugin --variant dynamic
`

ブロック4を作成したら、npm run buildを実行して再度ビルドする必要があります。この新しいブロックはまだエディターには表示されませんので、最初にいくつかの関数を更新する必要があります。

配列を作成しforeachループを追加

新しいブロックを必要に応じて迅速かつ簡単にプラグインに追加できるようにする配列を作成します。これにより、register_block_type関数を追加する必要がなくなります。次に、foreachを使用して配列をループし、register_block_type関数内で各ブロックを登録します。wp-multi-block.phpファイルを編集し、multiblock_register_blocks関数を次のように更新します：

function multiblock_register_blocks() {
    $custom_blocks = array (
        'block-one',
        'block-two',
        'block-three',
        'block-four',
    );
    foreach ( $custom_blocks as $block ) {
        register_block_type( __DIR__ . '/build/blocks/' . $block );
    }
}
add_action( 'init', 'multiblock_register_blocks' );

これらの変更が機能することを確認するために、エディターまたはフロントエンドを更新し、4つのブロックをすべて追加します。最終的には次のようになります：

これまでに構築された4つのブロックのエディタビュー。

新しいブロックを追加する際には、ブロックの配列に素早く追加するだけで済み、残りのコードはスリムでメンテナンスが容易になります。

ブロックアセットの統合

デフォルトでは、スクリプトファイルの読み込みはblock.jsonファイルで処理されます。これは単一ブロックプラグインにはうまく機能しますが、マルチブロックプラグインではスクリプトファイルの読み込みを効率化することを検討するかもしれません。

このアプローチにはいくつかの利点と欠点がありますが、すべての人にとって理にかなっているわけではありません。一方では、読み込まれるアイテムの数を減らし、出力をより制御できます。また、ブロックがページに存在する場合にのみview.jsファイルを読み込むという素晴らしい機能を失います。

このチュートリアルの目的のために、好ましいアプローチは、JavaScriptおよびCSSファイルを統合してコンパイルし、将来的にgZipしてコンテンツ配信ネットワーク（CDN）でホストするという考え方です。これを設定するために、webpackを追加し、WordPressのデフォルトのwebpack設定を活用し、すべてを単一のスクリプトとスタイルシートにパッケージ化します。

webpack設定ファイルの作成

最初にwebpack設定ファイルを作成します。ここでは、@wordpress/scriptsパッケージからwebpack設定を展開し、その機能を維持しながら独自の設定を追加します。

プラグインのルートフォルダーにwebpack.config.jsファイルを作成し、次の内容を貼り付けます：

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );
module.exports = {
   ...defaultConfig,
   entry: {
   'multi-block-editor': [ path.resolve( __dirname, 'src/multi-block-editor.js' ) ],
   'multi-block-frontend': [ path.resolve( __dirname, 'src/multi-block-frontend.js' ) ],
   },
   output: {
   path: path.resolve( __dirname, 'build' ), filename: '[name].js',
   },
};

webpackファイルでは、@wordpress/scriptsパッケージの一部として利用可能な設定ファイルを展開し、エディターにコンパイルして読み込むために使用されるエントリを追加します。これらのエントリポイントには、multi-block-editorおよびmulti-block-frontendという名前を付けます。

エディターおよびフロントエンドエントリポイントの追加

次に、webpack.config.jsファイルで指定したエントリポイントファイルを作成する必要があります。

最初にブロックエディター用のスクリプトを追加します。srcディレクトリにmulti-block-editor.jsという名前のファイルを作成し、次の内容を貼り付けます：

import './blocks/block-one';
import './blocks/block-two';
import './blocks/block-three';
import './blocks/block-four';

次に、フロントエンドアセット用のスクリプトを追加します。srcディレクトリにmulti-block-frontend.jsという名前のファイルを作成し、今のところ次の内容を貼り付けます：

console.log( 'frontend test' )

エディターおよびフロントエンドアセットのエンキュー

エディターアセットのエンキュー

スクリプトとスタイルファイルが単一のファイルとして出力されるようになったので、enqueue_block_editor_assetsアクションを使用してエディターにエンキューする必要があります。


``````bash
function multiblock_enqueue_block_assets() {
    wp_enqueue_script(
        'multi-block-editor-js',
        plugin_dir_url( __FILE__ ) . 'build/multi-block-editor.js',
        array('wp-blocks', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'),
        null,
        false
    );
    wp_enqueue_style(
        'multi-block-editor-css',
        plugin_dir_url( __FILE__ ) . 'build/multi-block-editor.css',
        array(),
        null
    );
}
add_action( 'enqueue_block_editor_assets', 'multiblock_enqueue_block_assets' );
`

フロントエンドアセットのエンキュー

次に、wp-multi-block.phpファイルに別の関数を追加してフロントエンドアセットをエンキューする必要があります：

function multiblock_enqueue_frontend_assets() {
    wp_enqueue_style(
        'multi-block-frontend-css',
        plugin_dir_url( __FILE__ ) . 'build/style-multi-block-editor.css',
    );
    wp_enqueue_script(
        'multi-block-frontend-js',
        plugin_dir_url( __FILE__ ) . 'build/multi-block-frontend.js',
        array(),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'multiblock_enqueue_frontend_assets' );

ブロックスタイルの更新

この設定では、各ブロックにはエディターとフロントエンドスタイル用の別々のファイルがあります。ほとんどの場合、フロントエンドで読み込むものはエディターでも読み込みたいものです。ここで私が好むのは、style.scssファイルをeditor.scssファイルにインポートすることです。これにより、フロントエンドクラスの1セットを維持しながら、エディターに固有のものを追加できます。

以下は、いくつかの更新後のブロック1用のeditor.scssファイルの例です。ボーダーはエディターにのみ追加され、.is-selectedを追加することで、ブロック1が選択されているときにのみボーダーが表示されます。

各ブロックのeditor.scssファイルを更新して、style.scssファイルをこの例のようにインポートします：

@import "./style.scss";
.wp-block-example-block-one.is-selected {
   border: 2px dotted #f00;
}

未使用ファイルの削除とblock.jsonのクリーンアップ

単一ファイルアセットが整ったので、ブロックを確認し、使用されていないview.jsファイルを削除できます。これらはもはやブロックを介して読み込まれません。独自のマルチブロックプラグインにブロックを追加していて、この機能が必要なブロックがある場合は、それらをフロントエンドエントリポイントjsファイルに含めることができます。view.jsファイルがインタラクティビティAPIを使用する際にどのように役割を果たすかを学ぶには、インタラクティビティAPIの初見をお読みください。

各ブロックのblock.jsonファイルを編集して、jsおよびcssファイルへの参照を削除します。削除する項目は次のとおりです：

"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"

注意：動的ブロックでは、次のようなレンダ行を削除しないようにしてください：

"render": "file:./render.php"

npm run buildを実行して新しいプラグインアセットを生成し、エディターおよび開発環境のフロントエンドで新しいブロックをテストしてください。

追加スクリプト

プラグインに含める最後のことは、コンパイルされたエディタースクリプトに追加スクリプトを追加する方法の例です。これらのスクリプトは、ブロックの修正やバリエーション、スロットフィル、またはその他の機能に使用できます。

コアボタンのアウトラインスタイルを削除する簡単なスクリプトを追加します。

ブロックスタイルを変更するスクリプトを追加

最初に、いくつかの新しい依存関係をインストールする必要があります：

npm install @wordpress/blocks @wordpress/dom-ready --save-dev

パッケージがインストールされたら、次のようなスクリプトファイルを作成します：

src/scripts/modificationsにスクリプトディレクトリを作成
button.jsという名前のファイルを作成し、次の内容を貼り付けます：

import { unregisterBlockStyle } from '@wordpress/blocks';
import domReady from '@wordpress/dom-ready';
domReady(() => {
   unregisterBlockStyle( 'core/button', array( 'outline' ) )
});

このスクリプトをブロックエディターエントリポイントに含める必要があります：

multi-block-editor.jsを編集
button.jsをインポートして、修正されたファイルが次のようになるようにします：

// Import the plugin blocks
import './blocks/block-one';
import './blocks/block-two';
import './blocks/block-three';
import './blocks/block-four';
// Import other block scripts
import './scripts/modifications/button';

ビルドファイルをnpm run buildで更新し、エディターを更新してください。ボタンを追加してみると、outlineスタイルオプションが消えていることがわかります。

エディター体験をキュレーションする方法に興味がある場合は、投稿WordPress編集体験をキュレーションする15の方法が、コンテンツ作成を効率化し、一貫性を確保し、パーソナライズされた編集体験を作成するための追加のコードスニペットを提供しています。

まとめ

著者のメモ：このアプローチが他の人々の今後の作業に役立つことを願っています。私のアプローチには改善の余地があると思いますし、コミュニティとしてそれをどのように行うことができるかを聞きたいです。

異なるアプローチのチュートリアルについては、InnerBlocksと投稿メタを使用したマルチブロックプラグインの設定の記事をご覧ください。

リソース

ドキュメント

開発者時間

Learn.WordPressのコース

レビュー、フィードバック、追加リソースに感謝します@bph、@milana_cap、@flexseth。