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 {script name} 运行。您最常使用的两个脚本是 start 和 build，因为它们处理构建步骤。

在您的块上工作时，使用 npm run start 命令。这将启动开发服务器，并且每当检测到任何代码更改时会自动重新构建块。

当您准备好部署您的块时，使用 npm run build 命令。这将优化您的代码并使其达到生产就绪状态。

有关每个可用脚本的更多详细信息，请参阅 wp-scripts 包文档。

其他实现方式

交互模式

对于更喜欢更引导式体验的开发人员，create-block 包提供交互模式。与其像上面的示例中那样手动指定所有选项（如 slug），此模式将逐步提示您输入。

要使用此模式，请运行命令：

npx @wordpress/create-block@latest

按照提示交互式配置您的块设置。

使用选项的快速入门模式

如果您已经熟悉 create-block 选项 并希望获得更简化的设置，您可以使用快速入门模式。这允许您在命令行中直接传递特定选项，从而无需交互式提示。

例如，要快速创建一个名为“my-block”、命名空间为“my-plugin”且为动态块的块，请使用此命令：

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 文档 中了解更多，并查看 外部项目模板 指南。

其他资源