以前はWindows上でUbuntu(Hyper-V仮想環境)を使って開発してました。
最近Dockerに少しだけ慣れてきて、その手軽さに感動しております。
今回はブロックエディタの開発と、成果物の確認を、とんでもなく手軽に試すメモです。

１．環境を汚さず最速でブロックエディタ開発。
２．出来上がったブロックエディタを開発者以外の人が「ブラウザ上(サーバー不要)」で動作確認。

環境

Windows + Docker + VSCode で試しています。

コンテナの準備

今回は(Windows側のコマンド)

docker run -it --name block-dev ubuntu:latest

適当にUbuntuイメージ(コンテナ名をblock-devにした)からコンテナ走らせて(以降はコンテナ側のコマンド)

apt update

aptを更新

apt install nodejs npm

nodejsとnpmをインストール(初めから入ってるイメージ使ったほうが楽ではある)。

初期化

とりあえず適当な場所に作業ディレクトリを作ります。

mkdir -p /var/www/plugins

複数のプラグインを作成する場所、/var/www/pluginsディレクトリを作りました。

cd /var/www/plugins

移動します。
以後ここにブロックエディタのプラグインを作成します。

その前に２つのパッケージをインストールします。

npm install -g @wordpress/create-block

この作業は一度だけでいいです。
グローバルに@wordpress/create-blockパッケージをインストールします。
簡単にブロックエディタを開発できる便利なパッケージです。

npm install -g @wp-now/wp-now

この作業も一度だけでいいです。
wp-nowをグローバルにインストールします。
wp-nowを使うとWordPressにプラグインがインストールされた状態でサーバーを起動できます。

ブロックの作成

npx @wordpress/create-block@latest kurage

このコマンドを実行すると/var/www/pluginsにkurageという名前のプラグインディレクトリが作成されます。

cd kurage

kurageに移動。

ls

一覧を見てみる。

drwxr-xr-x   5 root root   4096 Feb 16 20:36 .
drwxr-xr-x   3 root root   4096 Feb 16 20:34 ..
-rw-r--r--   1 root root    369 Feb 16 20:34 .editorconfig
-rw-r--r--   1 root root    431 Feb 16 20:34 .gitignore
drwxr-xr-x   3 root root   4096 Feb 16 20:36 build
-rw-r--r--   1 root root    930 Feb 16 20:34 kurage.php
drwxr-xr-x 936 root root  36864 Feb 16 20:36 node_modules
-rw-r--r--   1 root root 635529 Feb 16 20:36 package-lock.json
-rw-r--r--   1 root root    550 Feb 16 20:36 package.json
-rw-r--r--   1 root root   1811 Feb 16 20:34 readme.txt
drwxr-xr-x   3 root root   4096 Feb 16 20:34 src

kurage.phpが一般のプラグインを作成するときのファイルで、
ここにブロックの登録がされてます。

srcがソースコード置き場、buildがトランスパイルされたコードなどが入るディレクトリです。

エディタ部分を書き換えてみます。

apt install vim

viをインストール

vi src/kurage/edit.js

以下のように書き換え。

export default function Edit() {
        return (
                <p { ...useBlockProps() }>
                        { __( 'Kurage editor! DAAAAAAAAAAAAAAAAAA', 'kurage' ) }
                </p>
        );
}

何をやっているのかというと、
ブロックエディタのコードを少し書き換えただけですね。
書き換えたものが反映しているかを試すためです。

npm run build

ビルドするとソースコード(./src)からブロックエディタのコード一式(./build)が生成されます。

npx wp-now start

プラグインディレクトリで実行します。
プラグインがインストールされた状態でサーバーを起動します。
以下のメッセージが出ます。

root@43bb739a08f8:/var/www/plugins/kurage# ls
build  kurage.php  node_modules  package-lock.json  package.json  readme.txt  src
root@43bb739a08f8:/var/www/plugins/kurage# npx wp-now start
Starting the server......
directory: /var/www/plugins/kurage
mode: plugin
php: 8.0
wp: 6.7.2 (resolved from alias: latest)
Downloading WordPress 6.7.2...
Downloading SQLite...
Server running at http://localhost:8881

これで以下のURLでアクセス・・・

http://localhost:8881

う・・・。

そのままブラウザからアクセスできない・・・。
コンテナ起動時にポートを指定・・・

docker run -p 8881:80 ....

みたいにするの面倒なので、VSCodeに頼りました(ほかにやり方あったら教えてください)

VSCodeの「Dev Container」拡張機能を使ってDockerにアクセス。

VSCodeを新しく開き「Shift+Ctl+p」でコマンドパレットを開く。
「Dev Containers: Attach to Running Container」から「/block-dev」を選択(block-devは今回命名したコンテナ名)。

プロジェクトはコンテナ側のディレクトリ/var/www/plugins/kurageと連動してます。
ターミナルを開いて、ポートタブを開いてポートを追加(8881)をすると、Windows側のブラウザでこのアドレスでアクセスできる。

viを使わずともVSCodeから編集できるので最初っからこうしておけばよかったかも。

「My WordPress WebSite」からダッシュボードに向かう。

プラグイン一覧を見ると今回作成した「kurage」プラグインが有効になっている。

新規投稿をしてみる。
ブロックを追加する際、「ku」を入力すると、補完で先ほど作成した「kurage」ブロックエディタが登場する。

ブロックエディタを追加すると「Kurage editor! DAAAAAAAAAAAAAAAAAA」が表示されている。

これでブロックエディタが完成しました。
いや、まだZIPにしてません。

作成したプラグインをDockerコンテナから取得

再びWindows側のコマンド。
新たにプロントを開き、今回編集したプラグインディレクトリをダウンロードする。

docker cp block-dev:/var/www/plugins/kurage kurage

kurageディレクトリをダウンロードできますので、そのディレクトリを.zipで圧縮します。

「kurage.zip」を作成。

ブラウザ上で動作を試す

無事プラグイン「kurage.zip」は作成できましたか？
このプラグインをブラウザ上で確認してみます。

テスト用のサーバーを用意しなくてもブラウザ上でWordPressを動せます。

WordPressってサーバー上で動いてるんじゃないの！？
って思うでしょ！？

ブラウザ上で「PHPとSQLite」を使って実現しているみたいです。
WebAssemblyを使ってるみたいです。

それが本家(Playgroundというやつ)にあります。

ここにアクセスして今回作成したプラグイン(kurage.zip)の動作を確認します。

Playgroundにアクセス

インストール画面にいって、「kurage.zip」をアップ。

インストール画面に「kurage」が確認できます。

新規投稿でブロックを追加したら思惑通り表示されてます。