woocommerce/packages/js/create-product-editor-block/zh-cn/README.md
2026-04-15 10:18:01 +08:00

2.1 KiB

@woocommerce/create-product-editor-block

Create Product Editor Block 脚手架提供了一个功能齐全的现代开发环境,用于为 WooCommerce 中新的基于区块的产品编辑器开发基于区块的扩展。

默认工具

您可以使用内置的 wp-env 支持轻松启动并运行本地 WordPress 环境。它已配置为加载最新发布的 WordPress 版本、最新的 WooCommerce 夜间构建版本以及最新版本的 WooCommerce Beta Tester

如果您想更改所使用的 WordPress 和 WooCommerce 版本,可以通过修改 .wp-env.override.json 文件来实现。

代码检查、代码格式化和编译的工具支持默认已配置。

如果您已经配置了本地 WordPress 开发环境,可以将生成的项目文件夹映射到您的 plugins 文件夹下。

使用方法

生成项目文件夹

npx @wordpress/create-block --template @woocommerce/create-product-editor-block my-extension-name

开始开发

cd my-extension-name
npx wp-env start # 启动 WordPress 环境

默认情况下,创建的 wp-env 环境将启用新的基于区块的产品编辑器。您可以使用 WooCommerce Beta Tester 禁用它(禁用 product-block-editor 功能)。

导航到 http://localhost:8888/wp-admin/admin.php?page=wc-admin&path=%2Fadd-product 查看您的新区块!

进行更改并重新构建您的区块

cd my-extension-name
npm install # 安装依赖项
npm run build # 构建 JavaScript

此工具的开发

对于此工具本身的开发,您也可以在创建产品编辑器区块时指向本地目录:

npx @wordpress/create-block --template ./path/to/woocommerce/packages/js/create-product-editor-block my-extension-name

此工具是一个模板,与 @wordpress/create-block 一起使用,用于创建 WooCommerce 产品编辑器区块的起点。