WordPress ブロックエディターのカスタムブロックは通常、プラグインを使用して登録され、特定のファイル群によって定義されます。@wordpress/create-block
パッケージは、ブロックの作成と登録に必要なファイル構造のひな形を作成する公式サポートツールです。プロジェクトを開始するために必要なすべてのコードを生成し、モダンな JavaScript ビルドセットアップ(wp-scripts
を使用)を構成の必要なく、統合します。
このパッケージは開発者が、WordPress のベストプラクティスに従ってブロック開発環境を素早くセットアップできるように設計されています。
クイックスタート
インストール
まず Node.js と npm
がコンピュータにインストールされていることを確認してください。インストールされていなければ、Node.js 開発環境 ガイドを参照してください。
任意の場所で create-block
を使用してブロックを作成できます。次に、生成されたプラグインフォルダの中から wp-env
を使用します。WordPress のローカル開発環境が作成され、新しいブロックプラグインがインストール、有効化されます。
ローカル WordPress 開発環境がすでにセットアップされている場合は、ターミナルを使用して plugins/
フォルダに移動します。
次のコマンドを実行すると、ブロックプラグインのサンプルのひな形を作成できます。
npx @wordpress/create-block@latest todo-list
cd todo-list
指定されたslug
(todo-list
) は、ひな形のプラグインのフォルダ名と内部ブロック名を定義します。
ローカルの WordPress のプラグインページに移動し、「Todo List」プラグインを有効化します。すると、サンプルのブロックがエディター内で利用可能になります。
基本的な使い方
create-block
はブロックのビルドに、モダンな JavaScript (ESNext と JSX) を使用することを想定しています。そのため、コードをブラウザが理解できる形にコンパイルする、ビルド手順が必要です。幸運なことに、wp-scripts
パッケージがこの処理を代行します。このパッケージの紹介は、wp-scripts 入門を参照してください。
create-block
はブロックのひな形を作成する際、wp-scripts
をインストールし、最も一般的なスクリプトをブロックのpackage.json
ファイルに追加します。デフォルトでは、以下のスクリプトが追加されます。
{
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
}
}
これらのスクリプトは npm run {スクリプト名}
コマンドを使用して実行できます。最もよく使うスクリプトはビルド手順を処理する start
と build
の2つです。
ブロックで作業するときは、 npm run start
コマンドを使用します。開発サーバーを起動し、コードの変更を検出するたびに、自動的にブロックをリビルドします。
ブロックをデプロイする準備ができたら、 npm run build
コマンドを使用します。コードが最適化され、本番環境に適用できます。
利用可能な各スクリプトの詳細については、 wp-scripts
パッケージドキュメント を参照してください。
他の実装
対話モード
詳細な指示が必要な開発者のために、create-block
パッケージには対話モードがあります。このモードでは、上の例の slug
のようにすべてのオプションを事前に手動で指定する代わりに、ステップごとに入力が求められます。
このモードを使用するには、次のコマンドを実行してください。
npx @wordpress/create-block@latest
プロンプトに従って、対話的にブロックを構成できます。
オプションを使用したクイックスタートモード
すでに create-block
のオプション に慣れていて、短い時間でセットアップを終えたければクイックスタートモードを使用してください。コマンドラインで直接特定のオプションを指定でき、対話的なプロンプトは不要です。
例えば、名前空間「my-block」を持つダイナミックブロック「my-plugin」を素早く作成するには、次のコマンドを使用します。
npx @wordpress/create-block@latest --namespace="my-plugin" --slug="my-block" --variant="dynamic"
テンプレートの使用
create-block
パッケージはテンプレートもサポートしています。定義済みの構成や構造に基づいてブロックを作成できます。これは特に、希望するブロック構造がある場合や、類似の構成で複数のブロックを作成する場合に便利です。
テンプレートを使用するには、--template
オプションの後にテンプレート名またはパスを指定します。
npx @wordpress/create-block --template="my-custom-template"
テンプレートはあらかじめセットアップしておき、create-block
パッケージにテンプレートの位置を知らせる必要があります。詳しくは create-block
のドキュメント を参照してください。また、外部プロジェクトテンプレート ガイドも参照してください。
追加のリソース
- create-block ツールの使用 (Learn WordPress チュートリアル)
- @wordpress/create-block (公式ドキュメント)
- @wordpress/scripts (公式ドキュメント)