このガイドは WordPress でのブロック開発の基本原則をハンズオン形式で説明します。以下の手順に従うだけで、モダンな JavaScript (ESNext と JSX) を使用したカスタムブロックプラグインを数分で作成できます。ブロックのサンプル例では、著作権シンボル (©) と現在の年を表示します。どのウェブサイトのフッターにも最適でしょう。以下の短いデモ動画で、一連の手順の様子を見ることができます。
ブロックプラグインのひな形の作成
まず Node.js と npm がコンピュータにインストールされていることを確認してください。インストールされていなければ、Node.js 開発環境 ガイドを参照してください。
次に、@wordpress/create-block パッケージと @wordpress/create-block-tutorial-template テンプレートを使用して、完全な「Copyright Date Block」プラグインのひな形を作成します。
任意の場所で
create-blockを使用してブロックを作成できます。次に、生成されたプラグインフォルダの中からwp-envを使用します。WordPress のローカル開発環境が作成され、新しいブロックプラグインがインストール、有効化されます。
ローカル WordPress 開発環境がすでにセットアップされている場合は、ターミナルを使用してplugins/フォルダに移動してください。
プラグインを作成するフォルダを選択し、そのフォルダ内からターミナルで以下のコマンドを実行します。
npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
指定された slug (copyright-date-block) は、ひな形プラグインのフォルダ名と内部ブロック名を定義します。
WordPress のプラグインページに移動し、「Copyright Date Block」プラグインを有効化します。エディターでこのサンプルブロックが利用できるようになります。
基本の使い方
プラグインを有効化すると、ブロックがどのように動作するかを調べられます。次のコマンドを使用して、新しく作成したプラグインフォルダーに移動し、開発プロセスを始めてください。
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 のダッシュボードにログインします。プラグインはすでにインストールされ、有効化されています。エディターまたはサイトエディターを開き、他のブロックと同じようにCopyright Date ブロックを挿入してください。
wp-env の詳細については、wp-env 入門 を参照してください。