Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@KurozumiGH

create-guten-blockとwp-envで簡単にGutenbergブロック開発を行う

独自にGutenbergブロックを開発したい場合、一般的には、(1)Gutenbergブロックの開発プロジェクトと、(2)WordPressのテスト環境が必要になります。それぞれ全てをスクラッチで構築しても良いのですが、今回はcreate-guten-blockwp-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-envnpx wp-envと読み替えてください。

具体的な手順

今回はカスタムブロックmy-custom-blockS:\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番が使われるようになります。

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What is going on with this article?