目次
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.js
B. 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 start
Docker 内に、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. おわりに
本記事は、今後、追記する可能性があります。