153 lines
No EOL
3.5 KiB
Markdown
153 lines
No EOL
3.5 KiB
Markdown
---
|
||
name: woocommerce-email-editor
|
||
description: Setup and develop the WooCommerce block email editor. Use when working on email templates, transactional emails, or the email editor feature.
|
||
---
|
||
|
||
# WooCommerce 电子邮件编辑器开发
|
||
|
||
此技能为开发 WooCommerce 区块电子邮件编辑器提供指导。
|
||
|
||
## 何时使用此技能
|
||
|
||
在以下情况下调用此技能：
|
||
|
||
- 为电子邮件编辑器设置本地开发环境
|
||
- 处理电子邮件模板或交易电子邮件
|
||
- 修改电子邮件编辑器的 PHP 或 JS 包
|
||
- 测试电子邮件发送功能
|
||
|
||
## 开发环境设置
|
||
|
||
### 1. 启动 WooCommerce wp-env
|
||
|
||
```sh
|
||
pnpm --filter=@woocommerce/plugin-woocommerce -- wp-env start
|
||
```
|
||
|
||
站点默认运行在 `http://localhost:8888`。如果端口 8888 不可用，wp-env 会分配一个不同的端口。检查启动输出或运行 `wp-env info` 来查看您的实际网址。
|
||
|
||
### 2. 启动监听器
|
||
|
||
监听并构建管理员 JS 文件（包括电子邮件编辑 JS 包），并同步电子邮件编辑 PHP 包的更改：
|
||
|
||
```sh
|
||
pnpm --filter=@woocommerce/plugin-woocommerce watch:build:admin
|
||
```
|
||
|
||
### 3. 启用区块电子邮件编辑功能
|
||
|
||
访问 <http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=advanced§ion=features> 并启用区块电子邮件编辑器。
|
||
|
||
### 4. 编辑交易电子邮件
|
||
|
||
访问 <http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=email>
|
||
|
||
## 使用 Mailpit 进行邮件测试
|
||
|
||
要在本地测试邮件发送，请使用 Mailpit 作为本地 SMTP 服务器。
|
||
|
||
### 配置 SMTP
|
||
|
||
添加到 `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": ""
|
||
}
|
||
}
|
||
```
|
||
|
||
### 开始 Mailpit
|
||
|
||
```sh
|
||
docker run --rm --name=mailpit -p 1025:1025 -p 8025:8025 -d axllent/mailpit
|
||
```
|
||
|
||
或如果容器已存在：
|
||
|
||
```sh
|
||
docker start mailpit
|
||
```
|
||
|
||
### 查看电子邮件
|
||
|
||
打开 <http://localhost:8025> 以查看捕获的电子邮件。
|
||
|
||
### 重启 wp-env
|
||
|
||
创建或修改 `.wp-env.override.json` 后，重启环境：
|
||
|
||
```sh
|
||
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 包：
|
||
|
||
```sh
|
||
pnpm --filter=@woocommerce/email-editor build
|
||
```
|
||
|
||
## 测试 PHP 包
|
||
|
||
从 `packages/php/email-editor/` 目录运行测试。
|
||
|
||
### 设置
|
||
|
||
```sh
|
||
cd packages/php/email-editor
|
||
wp-env start
|
||
composer dump-autoload
|
||
```
|
||
|
||
### 运行集成测试
|
||
|
||
```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 --filter Table_Test
|
||
```
|
||
|
||
## 对 PHP 包进行代码检查
|
||
|
||
从 `packages/php/email-editor/` 目录运行。
|
||
|
||
### PHPStan
|
||
|
||
```sh
|
||
cd tasks/phpstan && ./run-phpstan.sh
|
||
```
|
||
|
||
为 PHP 7 兼容性：
|
||
|
||
```sh
|
||
cd tasks/phpstan && ./run-phpstan.sh php7
|
||
```
|
||
|
||
### PHPCS
|
||
|
||
```sh
|
||
composer run phpcs
|
||
``` |
