WordPress

WordPress: @wordpress/env と @wordpress/scripts を使ってカスタムブロック開発環境をセットアップする

投稿日:2021年11月12日 更新日:

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. おわりに

本記事は、今後、追記する可能性があります。

5. 参考

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPressの記事ページ上で、投稿ID/ページIDを取得するブックマークレット

WordPressの記事ページ上で、記事IDを取得するブックマークレットを作りました。

WordPress の投稿記事に画像を貼る手順と sizes 属性値の変更

目次1. はじめに2. 事前の追加設定3. 投稿記事を作成する時に、画像を挿入する手順[メディアを追加] ボタンから画像を挿入4. 参考 1. はじめに この Webサイトは WordPress で作 …

WordPress の robots.txt に関する処理はどうなっているのか?

WordPressでの robots.txt に関する処理を調べてみました。 少しネットで調べてみると「robots.txt を自分で作成してルートディレクトリに置いておけば、それが使われるし、なけれ …

WordPress

【WordPress】Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが表示されました

WordPressで、Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが発生しました。

WordPress

WordPress テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。 スポンサードリンク 目次1. 問題点2. 対策準備作業style.css に変更を加えた後に必要な作業3. まと …