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

投稿日: カテゴリー

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

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

Gutenberg

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

ブロック

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

コメントを残す

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