@wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg

@wordpress/create-blockと@wordpress/wp-envの2つでブロック開発環境の構築を試しました。

結果、今までのやり方の導入時に悩んでいた事柄に悩まされなくなるほど簡易に実行できました。

前提

  • ローカル(Mac使用)にWPを立ち上げてブロック開発できる環境を作る
  • @wordpress/wp-envと@wordpress/create-blockを使う
  • Sassを使いコンパイルする(今回はSCSS)

個別に大量のパッケージをインストールとか、依存関係とか、アレが足りないとか、コレのバージョンが違うとか、環境ごとに設定を作らなければならないとか、そういうので時間を取られるのは嫌なので楽に作ることを目的にしています。

概要

  1. @wordpress/create-blockを実行
  2. Dockerをインストール(wp-envの実行に必要)
  3. @wordpress/wp-envを実行

実は今回もつまづいていたのですが、「 環境立ち上げ → ブロック開発用スクリプトインストール 」という順番だと勘違いしていたのが原因でした。
「 ブロック開発用スクリプトインストール → 環境立ち上げ 」という順番が正解です。

ここを間違っていてうまくいかずに別の方法を探したり、不必要な修正を試みるなど、結構な時間無駄にしました…。

なお、ブロック開発用のまとまったスクリプトだけがあればいいという場合は、@wordpress/create-blockのみでよいはずです。

手順

@wordpress/create-blockを実行
  1. 開発用のディレクトリに移動(※そういう場所を作っているなら)
  2. $ npm init @wordpress/block todo-listのようにしてプラグインをディレクトリごと作成（最後のtodo-listがプラグインのディレクトリ名になるので任意で変更）
  3. 作成されたプラグインのディレクトリに移動して$ npm start

上記だけで作成可能であり、プラグインのDescriptionやAuthorなどの情報も仮入力された状態で出力されています。

なお、この仕組みはcreate blockという名称のようです(たぶん)。

Dockerをインストール

Dockerに関しては検索で色々出てくるのですが、私はDocker Desktopをインストールして対応しました。
他のどの方法であっても問題はないかと思います。

@wordpress/wp-envを実行
  1. $ npm -g i @wordpress/envで@wordpress/wp-envをインストール
  2. 前項の@wordpress/create-blockで作成したプラグインのディレクトリに移動
  3. $ wp-env startで起動
  4. http://localhost:8888にアクセスして確認
  5. 立ち上げたWPのログイン情報はusername: adminpassword: password

これだけです。とても簡単。

上記の@wordpress/wp-envを実行した時点で環境が立ち上がるので、ブロック用のJSファイルを修正し反映させたい場合は適宜npm run buildでビルドすることになります。

ビルドに関係ないPHPやCSS(後述するSCSSを導入する場合は除く)を変更した場合は、何もせずとも反映されます。

再開方法

初心者特有の問題とも言えそうですが、一旦終了した後どう再開すればいいのかよくわからないという事態があるかもしれません。
一応書きますと以下のようになります。

  1. ターミナルを起動(Macの場合)
  2. create-blockで作ったプラグインのディレクトリに移動
  3. $ wp-env startを入力して実行

補足

後で確認する際にどこで何を見たのかがわからなくなるので、使えるコマンドや関連する説明などをまとめます。

@wordpress/create-block の関連情報


//option
-t, --template <name>  template type name, allowed values: "es5", "esnext" (default: "esnext")
-V, --version          output the version number
-h, --help             output usage information

//記述例
$ npm init @wordpress/block --template es5

//Commnand
//そのブートストラップディレクトリ（es5テンプレートには適用されません）内で、いくつかのコマンドを実行できます。

//開発用のビルドを開始します。
$ npm start
//本番用のコードをビルドします。
$ npm run build
//JavaScriptファイルをフォーマットします。
$ npm run format:js
//Lints CSSファイル。
$ npm run lint:css
//Lints JavaScriptファイル。
$ npm run lint:js
//WordPressパッケージを最新バージョンに更新します。
$ npm run packages-update

それぞれのコマンドに関しては@wordpress/scripts | Block Editor Handbook | WordPress Developer Resourcesに詳細があります。

Sass(SCSS)を使う

以前も参考にさせていただいたMatt Watson氏の上記記事の情報で実現できました。

大まかな流れとしては以下のようになりますが、記事に書かれたスクリプトをコピペすればいいというわけではないので、参考にする場合は記事を上から順に目を通した方がよいです。

  1. srcディレクトリにscssディレクトリをつくり、style.scssとeditor.scssを作る
  2. package,jsonやbuildディレクトリと同階層にあるstyle.cssとeditor.cssを削除する(削除対象のCSSファイル内の記述が必要な場合は、先ほど同じ名称で作成したそれぞれのSCSSファイルに転記しておく)
  3. index.jsにstyle.scssとeditor.scssをimportする
  4. package,jsonと同階層にwebpack.config.jsを作成して記事内の最下部付近のスクリプトを記述する
  5. npm run buildでビルドする

ただ、記事内で以下のようにインストールせよと書かれているパッケージはインストールせずとも動きました。


npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
npm install ignore-emit-webpack-plugin --save-dev

別の情報を元に調べていた際にcss-loaderはただ書けば動くというのだけ確認していたのですが、他も書かずともエラーにならず動作しました。
もしもこれらがインストールされていないとエラーがでるのであれば、インストールすれば動作するはずです。

近い将来SassやPostCSSをコンパイルする仕組みが同梱される可能性

上記のスレッドとコメントと見ますと、wp-scriptsにコンパイルするためのパッケージが用意されそうではあります。
調べられていませんが、もしかしたらこの影響でsass-loaderなどをインストールしなくてもよくなったのかも？

wp-scriptsで用意されるならwebpack.config.jsを自分で用意する必要も無くなりそうなので、より簡易に環境構築ができるようになります。

@wordpress/wp-env の関連情報

上記ページの中盤以降を見ればわかりますが、トラブルシューティングや関連情報が充実している印象です。


//開始
$ wp-env start

//停止
$ wp-env stop

//ポート番号を変更して起動する場合
$ WP_ENV_PORT=3333 wp-env start

//再起動(Dockerコンテナも自動で再起動)
$ wp-env stop
$ wp-env start

//Dockerの再起動
//1.システムトレイ、または、メニューバーの Docker アイコンをクリックする。
//2.Restart を選択する。
//Docker再起動後に以下実行
$ wp-env start

//データベースのリセット
//警告: 次のコマンドは、ローカル WordPress 環境内の投稿、ページ、メディア等を完全に削除します。
$ wp-env clean all
$ wp-env start

//すべてを破壊して、最初からやり直す
//警告: 次のコマンドは、ローカル WordPress 環境内の投稿、ページ、メディア等を完全に削除します。
$ docker rm -f $(docker ps -aq)
$ docker volume rm -f $(docker volume ls -q)
$ rm -rf "../$(basename $(pwd))-wordpress"
$ wp-env start

.wp-env.jsonによる設定

まだ試していませんが、.wp-env.jsonを作成して設定を変更することができるようです(起動時に自動でつくられるわけではないはず)。

またさらに.wp-env.jsonを上書きする.wp-env.override.jsonでの設定もできる模様です。

本番にアップロードする際のファイル

@wordpress/create-blockで作成したプラグインディレクトリにはやはりnode_modules内に多量のスクリプトが入っているため、実際に本番にアップロードするには一手間いりそうです。

プラグイン用のPHPファイルにはbuildディレクトリを含めたパスで記述されているため、全体の構成はそのままにアップロードする必要があるはずです。

誰に見られていいのかなどはありますが、今後のことを考えるとpackage.jsonなどの設定ファイルはあった方がいいように思うので、node_modulesだけを削除してアップロードする形がよいのかなと考えています。

srcディレクトリも要らないと言えば要らないのですが、仮にクライアントワークで納品した場合にこれらがないと作成者以外が触る際に苦労するように思うためです。

結び

まだ.wp-env.jsonなど試していない部分があるので、さらに設定やら追加が必要になる可能性もあります。

今後もう少し変わりそうですが、@wordpress/create-blockを使うよりもCreate Guten Blockを使った方が簡単かもしれません。

しかしながら最低限のインストール状況で問題ないならば、今までに比べてかなり簡単に環境が構築できるようになると思われます。

末尾ですが、ハンドブックの日本語版には感謝を。
翻訳対象が一部とはいえ、今回のwp-envとcreate blockの部分は訳していただけているので、英語とにらめっこせずとも簡単に手が出せます。

5人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄