インタラクティブブロックのスキャフォールド

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

次に、@wordpress/create-block パッケージと @wordpress/create-block-interactive-template テンプレートを使用して、「My First Interactive Block」プラグインを完全にスキャフォールドします。

プラグインを作成したいフォルダーを選択し、そのフォルダー内のターミナルで次のコマンドを実行します: 

  1. npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template

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

基本的な使用法

プラグインがアクティブになったら、ブロックの動作を探ることができます。次のコマンドを使用して、新しく作成されたプラグインフォルダーに移動し、開発プロセスを開始します。 

  1. cd my-first-interactive-block && npm start

create-block がブロックをスキャフォールドすると、wp-scripts がインストールされ、ブロックの package.json ファイルに最も一般的なスクリプトが追加されます。このパッケージの紹介については、wp-scripts の使い方 記事を参照してください。

npm start コマンドは、開発サーバーを起動し、ブロックのコードの変更を監視し、変更が行われるたびにブロックを再構築します。

変更が完了したら、npm run build コマンドを実行します。これにより、ブロックコードが最適化され、製品版として準備が整います。

ブロックの動作を確認する

すでにローカルの WordPress インストールが実行されている場合は、そのインストールの plugins フォルダー内で上記のコマンドを実行できます。そうでない場合は、wp-now を使用して、プラグインがインストールされた WordPress サイトを起動することができます。プラグインのフォルダー (my-first-interactive-block) から次のコマンドを実行してください。 

  1. npx @wp-now/wp-now start

「My First Interactive Block」ブロックを任意の投稿に挿入し、公開時にフロントエンドでどのように動作するかを確認できるはずです。

インタラクティビティ API の使用に関するより高度な例については、次のリソースを確認できます: