このガイドでは WordPress のブロックエディターを拡張、変更する、ブロックや他のプラグインの作成に必要な開発環境のセットアップ方法を紹介します。
ブロック開発環境には、ブロックエディター開発の成功に必要なツールが含まれます。3つの主要な要素があります。
- コードエディター
- Node.js 開発ツール
- ローカルのWordPress 環境 (サイト)
Gutenberg プロジェクト自体に貢献するには、コードによるコントリビューション入門 の中の追加ドキュメントを参照してください。
コードエディター
コードの記述にはコードエディターを使用します。使い慣れたどのエディターでも使用できます。機能としてテキストファイルを開き、編集し、保存する手段があれば十分です。
好みのコードエディターがなければ、Visual Studio Code (VS Code) は、JavaScript で開発するコアコントリビューターの中で人気のある選択肢です。3つの主要なプラットフォーム (Windows、Linux、Mac) で動作し、オープンソースで、Microsoft によって活発にメンテナンスされています。VS Code にはまた、プラグインや拡張機能 (その中には多数の WordPress 開発用のものも含まれます) を提供する活気あるコミュニティがあります。
Node.js 開発ツール
Node.js (node) はオープンソースの実行環境で、ウェブブラウザの外で JavaScript を実行できます。Node.js は WordPress のすべての JavaScript 開発に必要ではありませんが、最新の JavaScript ツールを使用したり、ブロックエディター用に開発する場合は必須です。
Node.js とそれに付随する開発ツールを使用することで、以下が可能です。
- ブロックエディターの開発に必要な WordPress パッケージのインストールと実行 (
wp-scriptsなど) - WordPress 環境のセットアップ。
wp-envやwp-nowを使用 - 最新の ECMAScript の機能を使用して、ESNext でコードを書く。
- JavaScript コードの Lint、フォーマット、テスト
create-blockパッケージを使用したカスタムブロックのひな形作成
まだまだ続きます。最新の JavaScript 開発は難しいかもしれませんが、WordPress では wp-scripts や create-blockのような、プロセスを効率化するツールを提供しています。そしてこれらも Node.js 開発ツールで作成されています。
ブロック開発に推奨される Node.js のバージョンは、Active LTS (Long Term Support) です。しかし、異なるバージョンが必要な場合もあります。このため、nvm のような Node.js バージョン管理ツールの使用を強く推奨します。必要な場合に node のバージョンを切り替えられます。Node Package Manager (npm) と Node Package eXecute (npx) も WordPress パッケージの利用では必要です。どちらも自動的に Node.js と一緒にインストールされます。
ブロック開発に Node.js ツールと WordPress が提供するパッケージを使用するには、コンピュータに適切な Node.js 実行環境を設定する必要があります。この方法については、以下のリンクを参照してください。
ローカルの WordPress 環境
WordPress のローカル環境 (サイト) を準備すると、制御可能な、効率的で、安全な開発スペースを入手でき、本番サイトにデプロイする前にコードをビルドし、テストできます。WordPress と同じ要件がローカルサイトにも適用されます。
WordPress コミュニティでは、ローカルに WordPress 環境を構築するツールが数多く提供されています。ブロックエディターハンドブックでは、オープンソースで WordPress プロジェクト自身が保守している wp-env を取り上げます。これはまた Gutenberg 開発における推奨ツールです。
セットアップ方法については、wp-env 入門 ガイドを参照してください。
またハンドブック全体を通して、
wp-nowへの言及を目にすることがあるかもしれません。これは WordPress Playground を利用した軽量なツールで、シンプルなローカル WordPress 環境のセットアップを効率化します。まだ実験段階ですが、WordPress のリリース、プラグイン、テーマを素早くテストするのに適しています。
完全なリストではありませんが、wp-env を使いたくない場合の選択肢をいくつか紹介します。