📝

Wordpressブロックエディタ用プラグインを作る① 〜環境準備〜

2022/01/24に公開約2,500字

はじめに

この記事は公式チュートリアルを元に自分の備忘録として制作方法を記録したものです。

記事を書くきっかけとなったのはWordpress 5.9からブロックエディタプラグインの設定で block.json を使うようになり、開発が少し簡易になったことです。

https://ja.wordpress.org/team/handbook/block-editor/

https://www.webdesignleaves.com/pr/wp/wp_block_dev_env.html

最終的なディレクトリ構成

wp-develop/
 +- study/        # プラグイン学習用
 +- vendor/       # 既存のプラグイン・テーマを置く
 |  +- plugins/
 |     +- classic-editor
 +- .wp-env.json  # 設定ファイル

この章のゴール

  • WordPress environmentツールをインストール
  • Docker上で開発用Wordpressを動かす

事前に必要な環境

下記はすでにインストールされている前提で進めます。

  • Node v16
  • Docker desktop
  • Visual Studio Code

公式チュートリアルでは Node v14 と書かれてましたが、後述する npx @wordpress/create-block [プロジェクト名] の際にエラーが出たので Node v16 を使用します。

Node のインストールには nvm を使うよう書かれてますが、もちろんこれは自由です。
自分は nodebrew を愛用しています。

https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/

WordPress environment ツールのインストール

すでに自前で開発用Wordpress環境があるならこの章は不要です。

開発用のWordpress環境を作るためのDockerイメージをグローバルインストールします。

shell
$ npm -g install @wordpress/env

インストール完了したらWordpressを起動します。
wp-develop の部分は自分の環境にあわせて変更してください

shell
$ cd wp-develop
$ wp-env start

ブラウザから下記にアクセスして起動を確認します。

動作が確認できたらいったん終了させます。

shell
$ wp-env stop

WordPress environment ツールの注意点

Wordpressは起動フォルダごとに作成される。

wp-env start を実行するとDockerボリューム(約390MB)が作成され、設定や投稿はプロジェクト毎に別々に保存されます。
テストでほいほい作るとその度にディスク容量が圧迫されるのでお気を付けください。

Wordpressを削除するには

作成済みのWordpressを削除するにはチュートリアルの アンインストール – やり直し # が参考になります。

起動フォルダがプラグインフォルダとしてマウントされる

起動フォルダはWordpressのプラグインフォルダ内に自動的にマウントされ、プラグインが有効化されます。

プラグインを1つだけ開発するならそれもアリですが、将来的に複数のプラグインを作るなら後述する .wp-env.json を使ってマウントされないように設定することをお勧めします。

.wp-env.jsonで環境を指定

https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/#wp-envjson

使用するプラグイン、テーマなどをあらかじめ指定できます。
wp-develop/.wp-env.json を作成して下記の内容で保存します。

/wp-develop/.wp-env.json
{
  "plugins": [
    "./vendor/plugins/classic-editor"
  ]
}

下記の設定がされました。

  • 起動フォルダをプラグインにマウントしない
  • 既存の「classic-editor」を有効にする

おわり

ここまでで開発用Wordpressの準備ができました。
実装前の下ごしらえ編に続きます。

https://zenn.dev/dada_caracol/articles/a413e19fa40b76

Discussion

ログインするとコメントできます