独自にGutenbergブロックを開発したい場合、一般的には、**(1)Gutenbergブロックの開発プロジェクトと、(2)**WordPressのテスト環境が必要になります。それぞれ全てをスクラッチで構築しても良いのですが、今回はcreate-guten-blockとwp-envを使って、簡単に環境を構築する方法を紹介します。
なお、この手順は2020/4/19時点の内容なので、将来はもっと便利な方法が出てきているかもしれません。
今回採用した方法と、他の方法
環境構築の方法に正解はなく、色々な方法で環境を構築できます。
参考までに、他の選択肢と、今回採用した方法をのせておきます。（ここにある方法が全てでもありません）
(1)Gutenbergブロックの開発プロジェクト作成方法
-
全てを自分で作成する
ソースファイルやビルド用の環境など全てを自分で構築する方法です。
自由な構成ができる反面、環境作成には手間がかかります。 -
@wordpress/scriptsを使う方法
https://developer.wordpress.org/block-editor/packages/packages-scripts/
@wordpress/scriptsを使えばシンプルなGutenbergブロックの環境を作成できます。
PHPファイルやSass環境の構築などは自分で行う必要があります。 -
create-guten-blockを使う方法（今回採用した方法）
https://github.com/ahmadawais/create-guten-block
create-guten-blockを使うとプラグインのテンプレートやSass環境などが自動で作成されます。
基本的にはsrcフォルダ配下のコードを編集していく形になります。
(2)WordPressのテスト環境の作成方法
-
レンタルサーバなどに独自にサーバを立てる
一般に公開するときと同じように、テスト用の環境をレンタルサーバなどに用意する方法です。
修正したプラグインを都度アップロードする必要があったり、複数環境を作成しづらい…など色々と手間がかかるのでおすすめしません。 -
docker-composeでWordPress環境を作成する方法
docker-compose.ymlにWordPressやdbコンテナの定義を書いて環境を作成する方法です。
この方法を使っている人も多いと思いますが、docker-compose.ymlの編集などが少し面倒です。 -
wp-envを使う方法（今回採用した方法）
https://developer.wordpress.org/block-editor/packages/packages-env/
wp-envを使うとプラグインやテーマのフォルダでwp-env startとするだけで、WordPressやdb環境が自動で作成され、プラグインやテーマが自動でバインドされた状態になります。
内部ではdocker-composeが使われていますが、利用する側はdocker-composeを意識せずに使えます。
利用するWordPressのバージョンやポート番号など、細かい設定は.wp-env.jsonを作っておけばOKです。
環境準備
事前に次の環境が必要になります。
- Windows 10 Pro（macOSやLinuxなどでも可能なはず）
- Docker Desktop（Docker Composeも自動で入ります）
- Node.js（Docker環境ではなく、Windows側にNode.jsのインストールが必要です）
- wp-envのインストール
コマンドプロンプトでnpm install @wordpress/env -g
グローバル環境にインストールしていますが-gをつけずにローカルにインストールも可能。
ローカルにインストールした場合は、wp-envをnpx wp-envと読み替えてください。
具体的な手順
今回はカスタムブロックmy-custom-blockをS:\my-custom-blockフォルダで開発＆テストする前提の手順になります。
create-guten-blockで開発プロジェクト作成
コマンドプロンプトを開いて以下のコマンドを実行します。（#で始まる部分はコメントです）
# フォルダに移動
cd /d s:\
# my-custom-blockプロジェクトの作成
npx create-guten-block my-custom-block
# プロジェクトフォルダに移動してsrcフォルダを監視（srcフォルダの内容が変われば自動でビルドされる）
# 終了したい場合はCtrl+C
cd my-custom-block
npm start
wp-envを使ってテストする方法
もう一つ別でコマンドプロンプトを開いて以下のコマンドでWordPress環境を作成します。
ポイントとしては、プラグイン用のフォルダS:\my-custom-blockでwp-envコマンドを実行することです。
# プラグインのフォルダに移動
cd /d s:\my-custom-block
# wp-envでWordPressの実行
# @wordpress/envをローカルにインストールした場合はnpx wp-envで実行
wp-env start
WordPressが起動したら、http://localhost:8888/ でWordPressにアクセスできます。
WordPressのHello world!ページが表示されると思うので、管理画面に入りたい場合はLoginから、User:admin、Password:passwordでログインしてください。最初は英語版になっていますが、WordPressの設定から日本語に変更できます。
なお、この時点でmy-custom-blockプラグインは有効になっています。
WordPressを終了させたい場合はwp-env stopでOKです。
wp-envの設定
wp-env startを実行するフォルダに.wp-env.jsonを入れておくと、その設定に従ってwp-envの環境が作成されます。今回の例ではS:\my-custom-block\.wp-env.jsonになります。
必須ではありませんが、内容も簡単なので、次のような感じで.wp-env.jsonを作っておくことをおすすめします。
{
"core": null,
"plugins": [ "." ],
"port": 10088,
"testsPort": 10089
}
これで、最新のWordPress（"core":null）で、ポート番号に10088番が使われるようになります。