mcpField
W
woocommerce-email-editor

woocommerce-email-editor

github.com/woocommerce開発10.6k192 回インストール今日更新
リポジトリ

woocommerce-email-editor について

WooCommerce のブロックメールエディターを開発する人向けのスキルです。ローカル環境の構築、テンプレートや PHP・JavaScript パッケージの作業、Mailpit によるメール送信テストを案内します。

主な機能

  1. 01wp-env のローカル環境設定
  2. 02メールエディターの JS ビルドと監視
  3. 03Mailpit によるメール送信テスト
  4. 04PHP 統合テストと静的チェック

活用シーン

  1. 01ブロックメールエディターの開発環境構築
  2. 02トランザクションメールのローカル確認
  3. 03PHP パッケージの統合テスト実行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/woocommerce/woocommerce --skill woocommerce-email-editor

インストール後、Claude Code で/woocommerce-email-editorを入力して読み込まれたか確認します。

詳細

WooCommerce メールエディターの開発

このスキルでは、WooCommerce ブロックメールエディターの開発方法を説明します。

このスキルを使用する場合

次の場合にこのスキルを使用してください。

  • メールエディターのローカル開発環境をセットアップする
  • メールテンプレートやトランザクションメールを扱う
  • メールエディターの PHP パッケージまたは JS パッケージを変更する
  • メール送信機能をテストする

開発環境のセットアップ

1. WooCommerce wp-env を起動する
pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start

サイトはデフォルトで http://localhost:8888 で実行されます。ポート 8888 を使用できない場合、wp-env は別のポートを割り当てます。起動時の出力を確認するか、wp-env info を実行して実際の URL を確認してください。

2. ウォッチャーを起動する

管理画面の JS ファイル（メールエディターの JS パッケージを含む）を監視してビルドし、メールエディターの PHP パッケージの変更を同期します。

pnpm --filter=@woocommerce/plugin-woocommerce watch:build:admin
3. ブロックメールエディター機能を有効にする

http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=advanced&section=features にアクセスし、ブロックメールエディターを有効にしてください。

4. トランザクションメールを編集する

http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=email にアクセスしてください。

Mailpit を使ったメールテスト

ローカルでのメール送信をテストするには、ローカル SMTP サーバーとして Mailpit を使用します。

SMTP を設定する

plugins/woocommerce/.wp-env.override.json に追加します。

{
    "lifecycleScripts": {
        "afterStart": "./tests/e2e/bin/test-env-setup.sh && wp-env run cli wp plugin install wp-mail-smtp --activate"
    },
    "config": {
        "WPMS_ON": true,
        "WPMS_MAILER": "smtp",
        "WPMS_SMTP_HOST": "host.docker.internal",
        "WPMS_SMTP_PORT": "1025",
        "WPMS_SMTP_AUTH": false,
        "WPMS_SMTP_SECURE": ""
    }
}
Mailpit を起動する
docker run --rm --name=mailpit -p 1025:1025 -p 8025:8025 -d axllent/mailpit

または、コンテナーがすでに存在する場合は次を実行します。

docker start mailpit
メールを表示する

http://localhost:8025 を開くと、捕捉されたメールを確認できます。

wp-env を再起動する

.wp-env.override.json を作成または変更した後、環境を再起動してください。

pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start --update

主なパス

パス説明
packages/php/email-editor/メールエディターの PHP パッケージ
packages/js/email-editor/メールエディターの JS パッケージ
plugins/woocommerce/.wp-env.override.jsonローカルの wp-env 設定（Git の追跡対象外）

メールエディターパッケージのビルド

変更後に JS パッケージを再ビルドするには、次を実行します。

pnpm --filter=@woocommerce/email-editor build

PHP パッケージのテスト

packages/php/email-editor/ ディレクトリからテストを実行します。

セットアップ
cd packages/php/email-editor
wp-env start
composer dump-autoload
統合テストを実行する
wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist
特定のテストを実行する
wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist --filter Table_Test

PHP パッケージのリンティング

packages/php/email-editor/ ディレクトリから実行します。

PHPStan
cd tasks/phpstan && ./run-phpstan.sh

PHP 7 との互換性を確認するには：

cd tasks/phpstan && ./run-phpstan.sh php7
PHPCS
composer run phpcs

コメント

Markdown 対応