Back to Details

woocommerce-email-editor

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WooCommerce Email Editor Development

WooCommerce 邮件编辑器开发

This skill provides guidance for developing the WooCommerce block email editor.
本技能为WooCommerce区块邮件编辑器的开发提供指导。

When to Use This Skill

何时使用本技能

Invoke this skill when:
  • Setting up local development for the email editor
  • Working on email templates or transactional emails
  • Modifying the email editor PHP or JS packages
  • Testing email sending functionality
在以下场景调用本技能：
  • 搭建邮件编辑器的本地开发环境
  • 处理邮件模板或事务性邮件
  • 修改邮件编辑器的PHP或JS包
  • 测试邮件发送功能

Development Environment Setup

开发环境搭建

1. Start WooCommerce wp-env

1. 启动WooCommerce wp-env

sh
pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start
Site runs at 
http://localhost:8888
by default. If port 8888 is unavailable, wp-env assigns a different port. Check the startup output or run 
wp-env info
to see your actual URL.
sh
pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start
站点默认运行在
http://localhost:8888
。如果8888端口不可用，wp-env会分配其他端口。请查看启动输出或运行
wp-env info
查看实际URL。

2. Start the watcher

2. 启动监听程序

Watches and builds admin JS files (including the email editor JS package) and syncs Email Editor PHP package changes:
sh
pnpm --filter=@woocommerce/plugin-woocommerce watch:build:admin
监听并构建后台JS文件（包括邮件编辑器JS包），并同步邮件编辑器PHP包的变更：
sh
pnpm --filter=@woocommerce/plugin-woocommerce watch:build:admin

3. Enable the block email editor feature

3. 启用区块邮件编辑器功能

Visit http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=advanced&section=features and enable the block email editor.
访问http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=advanced&section=features并启用区块邮件编辑器。

4. Edit transactional emails

4. 编辑事务性邮件

Visit http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=email
访问http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=email

Email Testing with Mailpit

使用Mailpit测试邮件

To test email sending locally, use Mailpit as a local SMTP server.
要在本地测试邮件发送功能，可使用Mailpit作为本地SMTP服务器。

Configure SMTP

配置SMTP

Add to 
plugins/woocommerce/.wp-env.override.json
:
json
{
    "lifecycleScripts": {
        "afterStart": "./tests/e2e-pw/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": ""
    }
}
将以下内容添加到
plugins/woocommerce/.wp-env.override.json
：
json
{
    "lifecycleScripts": {
        "afterStart": "./tests/e2e-pw/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": ""
    }
}

Start Mailpit

启动Mailpit

sh
docker run --rm --name=mailpit -p 1025:1025 -p 8025:8025 -d axllent/mailpit
Or if the container already exists:
sh
docker start mailpit
sh
docker run --rm --name=mailpit -p 1025:1025 -p 8025:8025 -d axllent/mailpit
或者如果容器已存在：
sh
docker start mailpit

View emails

查看邮件

Open http://localhost:8025 to see captured emails.
打开http://localhost:8025查看捕获到的邮件。

Restart wp-env

重启wp-env

After creating or modifying 
.wp-env.override.json
, restart the environment:
sh
pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start --update
创建或修改
.wp-env.override.json
后，重启环境：
sh
pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start --update

Key Paths

关键路径

PathDescription
packages/php/email-editor/
Email Editor PHP package
packages/js/email-editor/
Email Editor JS package
plugins/woocommerce/.wp-env.override.json
Local wp-env config (gitignored)
路径描述
packages/php/email-editor/
邮件编辑器PHP包
packages/js/email-editor/
邮件编辑器JS包
plugins/woocommerce/.wp-env.override.json
本地wp-env配置（已被Git忽略）

Building the Email Editor Package

构建邮件编辑器包

To rebuild the JS package after changes:
sh
pnpm --filter=@woocommerce/email-editor build
修改后重新构建JS包：
sh
pnpm --filter=@woocommerce/email-editor build

Testing the PHP Package

测试PHP包

Run tests from the 
packages/php/email-editor/
directory.
在
packages/php/email-editor/
目录下运行测试。

Setup

环境搭建

sh
cd packages/php/email-editor
wp-env start
composer dump-autoload
sh
cd packages/php/email-editor
wp-env start
composer dump-autoload

Run integration tests

运行集成测试

sh
wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist
sh
wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist

Run a specific test

运行指定测试

sh
wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist --filter Table_Test
sh
wp-env run tests-cli --env-cwd=wp-content/plugins/email-editor ./vendor/bin/phpunit --configuration phpunit-integration.xml.dist --filter Table_Test

Linting the PHP Package

PHP包代码检查

Run from the 
packages/php/email-editor/
directory.
在
packages/php/email-editor/
目录下运行。

PHPStan

PHPStan

sh
cd tasks/phpstan && ./run-phpstan.sh
For PHP 7 compatibility:
sh
cd tasks/phpstan && ./run-phpstan.sh php7
sh
cd tasks/phpstan && ./run-phpstan.sh
如需兼容PHP 7：
sh
cd tasks/phpstan && ./run-phpstan.sh php7

PHPCS

PHPCS

sh
composer run phpcs
sh
composer run phpcs