クイックスタート

インストール

まず、コンピュータに Node.js と npm がインストールされていることを確認してください。まだの場合は、Node.js 開発環境 ガイドを確認してください。

create-block を使用して、ほぼどこでもブロックをスキャフォールドし、その後生成されたプラグインフォルダ内から wp-env を使用します。これにより、新しいブロックプラグインがインストールされ、アクティブ化されたローカル WordPress 開発環境が作成されます。

すでに独自の ローカル WordPress 開発環境 が設定されている場合は、ターミナルを使用して plugins/ フォルダに移動します。

次のコマンドを実行して、例のブロックプラグインをスキャフォールドします: 

  1. npx @wordpress/create-block@latest todo-list
  2. cd todo-list

提供された slug (todo-list) は、スキャフォールドされたプラグインのフォルダ名と内部ブロック名を定義します。

ローカル WordPress インストールのプラグインページに移動し、「Todo List」プラグインをアクティブ化します。これにより、エディタで例のブロックが利用可能になります。

基本的な使用法

create-block は、ブロックを構築するために最新の JavaScript (ESNext および JSX) を使用することを前提としています。これには、コードをブラウザが理解できる形式にコンパイルするビルドステップが必要です。幸いなことに、wp-scripts パッケージがこのプロセスを処理します。このパッケージの紹介については、wp-scripts を使い始める を参照してください。

create-block がブロックをスキャフォールドすると、wp-scripts がインストールされ、ブロックの package.json ファイルに最も一般的なスクリプトが追加されます。デフォルトでは、これらには次のものが含まれます: 

  1. {
  2.    "scripts": {
  3.    "build": "wp-scripts build",
  4.    "format": "wp-scripts format",
  5.    "lint:css": "wp-scripts lint-style",
  6.    "lint:js": "wp-scripts lint-js",
  7.    "packages-update": "wp-scripts packages-update",
  8.    "plugin-zip": "wp-scripts plugin-zip",
  9.    "start": "wp-scripts start"
  10.    }
  11. }

これらのスクリプトは、コマンド npm run {script name} を使用して実行できます。最も頻繁に使用する2つのスクリプトは、ビルドステップを処理する start と build です。

ブロックの作業を行う際は、npm run start コマンドを使用してください。これにより、開発サーバーが起動し、コードの変更が検出されるたびにブロックが自動的に再ビルドされます。

ブロックをデプロイする準備ができたら、npm run build コマンドを使用します。これにより、コードが最適化され、プロダクション準備が整います。

各利用可能なスクリプトの詳細については、wp-scripts パッケージドキュメント を参照してください。

代替実装

インタラクティブモード

よりガイド付きの体験を好む開発者のために、create-block パッケージはインタラクティブモードを提供します。上記の例の slug のように、すべてのオプションを手動で指定する代わりに、このモードではステップバイステップで入力を促します。

このモードを使用するには、次のコマンドを実行します: 

  1. npx @wordpress/create-block@latest

プロンプトに従って、インタラクティブにブロック設定を構成します。

オプションを使用したクイックスタートモード

すでに create-block オプション に精通していて、よりスムーズなセットアップを希望する場合は、クイックスタートモードを使用できます。これにより、インタラクティブなプロンプトを排除し、コマンドラインで特定のオプションを直接渡すことができます。

たとえば、「my-plugin」という名前空間を持つ「my-block」という名前のダイナミックブロックを迅速に作成するには、次のコマンドを使用します: 

  1. npx @wordpress/create-block@latest --namespace="my-plugin" --slug="my-block" --variant="dynamic"

テンプレートの使用

create-block パッケージは、テンプレートの使用もサポートしており、あらかじめ定義された構成や構造に基づいてブロックを作成できます。これは、好みのブロック構造がある場合や、類似の構成を持つ複数のブロックを構築している場合に特に便利です。

テンプレートを使用するには、--template オプションを指定し、その後にテンプレート名またはパスを続けます: 

  1. npx @wordpress/create-block --template="my-custom-template"

テンプレートは事前に設定する必要があるため、create-block パッケージはそれらを見つける場所を知っています。詳細については、create-block ドキュメント を参照し、外部プロジェクトテンプレート ガイドを確認してください。

追加リソース