ラボラジアン 目次
1. はじめに
@wordpress/env と @wordpress/scripts を利用した、WordPress のカスタムブロック開発環境の作成手順を紹介します。
| @wordpress/env | Docker を使って、ローカル環境に WordPressサイトを用意することができるツールです（Webサーバーやデータベースが作成されます）。 |
|---|---|
| @wordpress/scripts | WordPress のプラグインなどを開発する際に役立つツールセットです。 |
2. 前提環境
- Windows 10
- WSL 2 に Ubuntu を導入して使用する。
3. 手順
(1) 準備
- Docker Desktop のインストールして起動しておきます。
- Node.js (Windows用) をインストールします。
(2) @wordpress/env を導入する
WSL 2 のターミナルで以下を実行し、@wordpress/env を導入します。
$ npm install -g @wordpress/env(3) カスタムブロックの雛形を用意する
カスタムブロックの雛形として生成するディレクトリの名前を “starter-block” とした場合、以下のようにコマンドを実行します（任意の名前で構いません）。
$ npx @wordpress/create-block starter-block
$ cd starter-blockまた、この後 @wordpress/env を使って生成する WordPress 環境からこちらのディレクトリにアクセスできるように、パーミッションを変更します。
$ chmod -R a-x,go-wx,u+w,a+rX .(4) npm start コマンドでエラーを起こさないための作業
このあと npm start コマンドを実行して、ソースファイルをビルドすることになりますが、ここでいろいろとエラーになる可能性があります。そのための作業です。
A. wp-scripts.js ファイルに実行権限を与える
このコマンドで利用されている wp-scripts.js ファイルに実行権限を与えます。
$ chmod a+x ./node_modules/@wordpress/scripts/bin/wp-scripts.jsB. package.json ファイルを一部書き換える
package.json ファイル内の "scripts" 内にある “start” プロパティの値を書き換えます。
まず、以下の行を
"build": "wp-scripts build",以下に書き換えます。
"build": "(umask 22 && wp-scripts build --mode production)",次に、以下の行を、
"start": "wp-scripts start",以下のように修正します。
"start": "(umask 22 && wp-scripts start --mode development)",この操作により、npm start コマンドがビルドの際に生成するファイルのパーミッションが緩くなり、Docker からアクセスできるようになります。
C. webpack.config.js に設定を追加
カレントディレクトリに webpack.config.js ファイルを生成し、以下を記述します。
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
watchOptions: {
poll: true
}
}これをしないと、npm startコマンドで継続してファイルを監視してくれません。
参考：Watch and WatchOptions | webpack
D. その他
それから、もし npm start を実行してもビルドされないような場合は、@wordpress/scripts パッケージの再インストールで直る可能性があります。
$ npm uninstall @wordpress/scripts && npm install --save-dev @wordpress/scripts
(5) WordPress サイトを用意する
@wordpress/env を使って WordPress サイトを用意します。以下のコマンドを実行してください。
$ wp-env startDocker 内に、Apache や MariaDB のインスタンスが生成され、WordPressサイトが稼働されますが、カレントディレクトリは Docker と共有されており自動的に読み込まれます（有効になります）。
開発用サイトは http://localhost:8888、テスト用サイトは http://localhost:8889 でアクセスできます。
WordPressユーザー情報は、ユーザー名: admin パスワード: password です。
また、この WordPress サイトの環境を停止するコマンドは以下です。
$ wp-env stop(6) src ディレクトリ内のファイルをビルドする
src ディレクトリ内のファイルを修正した場合、開発用にビルドするのであれば、
$ npm start- 常にファイルの変更が監視され、変更があれば自動的にビルドしてくれます（開発用ビルド）。
本番用にビルドするのであれば、
$ npm run buildを実行します。
4. おわりに
本記事は、今後、追記する可能性があります。
