ブロックプラグインのスキャフォールド

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

次に、@wordpress/create-block パッケージと @wordpress/create-block-tutorial-template テンプレートを使用して、完全な「著作権日ブロック」プラグインをスキャフォールドします。

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

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

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

  1. npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template

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

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

基本的な使用法

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

  1. cd copyright-date-block && npm start

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

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

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

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

新しいブロックをテストするために、任意のローカル WordPress 開発環境を使用できますが、スキャフォールドされたプラグインには wp-env の設定が含まれています。マシンに Docker がすでにインストールされ、実行されている必要がありますが、そうであれば npx wp-env start コマンドを実行します。

スクリプトの実行が完了すると、ローカル環境にアクセスできます: http://localhost:8888。ユーザー名 admin とパスワード password を使用して WordPress ダッシュボードにログインします。プラグインはすでにインストールされ、アクティブ化されています。エディターまたはサイトエディターを開き、著作権日ブロックを他のブロックと同様に挿入します。

wp-env ガイドを訪れて、さらに詳しく学んでください。

追加リソース