create-block 入門

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 (公式ドキュメント)

原文

最終更新日: 2023年11月18日