私の Gutenberg / ブロック開発環境メモ

すぐ忘れるのでメモ。node環境はコンテナ内のものを使用する。

Docker をインストール済
VS-Code に以下の拡張機能をインストール済
- Dev Containers
- ESLint
- WordPress Playground for VS Code

Gutenberg

Gutenbergリポジトリをフォークして、ローカルにクローンする。
ブランチを切る。
docker-compose.yml

version: "3"

services:
  node:
    image: node:20.11.0
    container_name: node
    tty: true
    volumes:
      - /Users/atachibana/atachibana/wordpress/patch/gutenberg:/home/node/gutenberg
    ports:
      - 3000:3000
      - 8080:8080
    working_dir: /home/node/gutenberg

docker-compose up -d
VS-Codeの「リモートエクスプローラー」で「node node」を選択し、「新しいウィンドウでアタッチする」をクリック。新しいウィンドウが開く。
コンテナ内の「/home/node/gutenberg」を開く
ターミナルを開き、npm install、そして npm run dev を実行して、しばらく待つ。
コードを編集する。lint が効いているので、構文を間違うと波線とエラーが表示され、「問題」タブにも同じエラーが表示される。逆に言うとこれが出ない場合は、7. が終わっていないので待つ(恐らく末尾のステータスエリアに何か出ている)。
コードをpushする際はここでは行わず、別ウィンドウでローカルにgutenbergワークスペースを開き、作業する。このとき「core」が変更されていると表示されるので無視して、git add しないようにする。

ブロック

ディレクトリ = /Users/atachibana/atachibana/docker-block
docker-compose.yml

version: "3"

services:
  node:
    image: node:20.11.0
    container_name: node-block
    tty: true
    volumes:
      - /Users/atachibana/atachibana/docker-block/plugins:/home/node/plugins
    ports:
    working_dir: /home/node/plugins

docker-compose up -d
VS-Codeの「リモートエクスプローラー」で「node-block」を選択し、「新しいウィンドウでアタッチする」をクリック。新しいウィンドウが開く。
コンテナ内の「/home/node/plugins」を開く
ターミナルを開き、npx create-block 等を実行する。
別のターミナルを開き、プラグインのディレクトリに移動して以下で Playground
npx @wp-now/wp-now start

コメントを残すコメントをキャンセル