使用 create-block 快速入门

WordPress 区块编辑器的自定义区块通常通过插件注册，并由特定文件集合定义。@wordpress/create-block 是官方支持的脚手架工具，可快速生成创建和注册区块所需的文件结构。它能生成项目初始代码，并集成现代化的 JavaScript 构建环境（使用 wp-scripts），无需额外配置。

该工具包旨在帮助开发者遵循 WordPress 最佳实践快速搭建区块开发环境。

快速开始

安装配置

请先确保计算机已安装 Node.js 和 npm。若未安装，请查阅 Node.js 开发环境指南。

您可以在任意目录使用 create-block 创建区块脚手架，然后在生成的插件文件夹内使用 wp-env 创建本地 WordPress 开发环境，该环境会自动安装并激活您的新区块插件。

若已搭建本地 WordPress 开发环境，请通过终端进入 plugins/ 目录。

执行以下命令创建示例区块插件：

npx @wordpress/create-block@latest todo-list
cd todo-list

其中提供的 slug 参数（todo-list）将作为插件文件夹名称和内部区块标识。

进入本地 WordPress 的插件管理页面，激活 "Todo List" 插件后，即可在编辑器中找到该示例区块。

基础使用

create-block 默认采用现代 JavaScript（ESNext 与 JSX）构建区块，这需要构建步骤将代码编译为浏览器可识别的格式。幸运的是，wp-scripts 工具包已自动处理此过程。关于该工具的详细介绍请参阅 wp-scripts 入门指南。

当 create-block 生成区块脚手架时，会自动安装 wp-scripts 并将常用脚本添加到区块的 package.json 文件中，默认包含：

{
    "scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	}
}

这些脚本可通过 npm run {脚本名称} 命令运行。最常使用的两个脚本是 start 和 build，它们负责构建流程。

开发区块时请运行 npm run start 命令，这将启动开发服务器并在检测到代码变更时自动重新构建。

准备部署区块时请运行 npm run build 命令，该命令会对代码进行优化并生成生产环境版本。

各脚本的详细说明请参阅 wp-scripts 的工具包文档。

其他实现方式

交互模式

为偏好引导式操作的开发者，create-block 提供了交互模式。此模式会逐步提示输入配置参数，无需像前文示例那样手动预先指定 slug 等所有选项。

运行以下命令启用此模式：

npx @wordpress/create-block@latest

根据提示逐步完成区块设置即可。

快速启动模式（选项参数）

若您已熟悉 create-block 的选项参数并希望快速完成配置，可使用快速启动模式。通过命令行直接传递特定参数，省去交互提示步骤。

例如，要快速创建命名空间为 "my-plugin"、区块标识为 "my-block" 的动态区块，可使用：

npx @wordpress/create-block@latest --namespace="my-plugin" --slug="my-block" --variant="dynamic"

使用模板

create-block 支持模板功能，允许基于预定义配置和结构创建区块。当您有特定区块结构偏好，或需构建多个相似配置的区块时，此功能尤为实用。

使用模板时，需通过 --template 选项指定模板名称或路径：

npx @wordpress/create-block --template="my-custom-template"

模板需预先设置以确保 create-block 能正确识别。更多细节请参阅 create-block 的模板文档，并查阅外部项目模板指南。

扩展资源

使用 create-block 工具（Learn WordPress 教程）
@wordpress/create-block（官方文档）
@wordpress/scripts（官方文档）

5.1 KiB Raw Blame History Unescape Escape