使用 create-block 工具

WordPress create-block 工具可以帮助你快速搭建一个新的区块插件。

在本课程中，你将了解开始使用 create-block 所需的内容、如何使用它，以及查看它生成的代码。

时间戳

简介：0:00 – 1:04
软件要求：1:04 – 2:07
在 macOS/Linux 上安装 nvm 和 Node/npm：2:07 – 3:54
在 Windows 上安装 nvm 和 Node/npm：3:54 – 5:14
使用 create-block 搭建区块：5:14 – 8:46

学习成果

了解 create-block 工具是什么
了解使用 create-block 需要哪些软件
学习如何安装所需的软件
查看 create-block 创建的代码

理解问题

create-block 工具是什么，它有什么用途？
使用 create-block 需要哪些工具和软件？
运行什么命令可以使用 create-block？
create-block 为最终区块文件创建的目录叫什么？

视频文字稿

查看文字稿

你好，欢迎来到 Learn WordPress。

在本教程中，你将学习如何使用 create-block 工具搭建一个新的区块插件。在本视频中，我们将介绍 create-block 工具是什么、使用 create-block 需要哪些软件、如何使用 create-block 搭建新区块，以及 create-block 生成的代码。

Create-block 是由 WordPress 贡献者开发的官方命令行工具，用于搭建或创建新的区块插件。它会生成开始开发新博客插件所需的一切内容，并集成无需配置的现代构建环境。你可以访问 WordPress 开发者资源页面中的区块编辑器手册，在参考指南 -> 软件包 -> @wordpress/create-block 下阅读更多关于 create-block 的内容。

要使用 create-block 工具，你需要一个本地 WordPress 安装、一个用于运行命令的终端，以及 Node.js 和 npm。你可以使用任何熟悉的本地 WordPress 安装，例如 LocalWP 或 DesktopServer。如果你还没有本地 WordPress 安装，请查看 learn.wordpress.org 上的《面向初学者的本地 WordPress 安装》教程。

如果你运行的是 Mac OS 或任何 Linux 操作系统，可以使用内置终端。对于 Windows 用户，我们建议安装并使用 PowerShell，你可以访问 microsoft.com/powershell 找到它。

最后，你需要安装 Node.js，它也会安装 npm。create-block 工具支持任何高于 12 版本的稳定版 Node.js。不过，根据你的开发需求，你可能需要能够在不同项目之间快速切换 Node.js 版本。幸运的是，你可以使用开源的 Node 版本管理器（也称为 nvm）来实现这一点。你可以访问 nvm.sh，它会将你引导到 GitHub 页面。使用 nvm 的好处是，如果版本要求发生变化，可以很容易地使用 nvm 更新 Node.js 版本。在本教程中，我们将安装核心区块开发所需的相同版本，该版本列在区块编辑器手册的“开发环境入门”页面中。

目前建议安装 Node.js 14 版本。如果你运行的是 macOS 或 Linux，可以打开默认的终端应用，并运行从 nvm 文档中复制的 npm 安装脚本来安装 nvm。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装 npm 后，你需要关闭终端并重新打开它。

然后，你可以使用 nvm install 命令安装所需的 Node.js 和 npm 版本。

nvm install 14

如果你使用的是 Windows 计算机，则需要安装 Windows 的 Chocolatey 软件包管理器，以便安装 nvm。首先，以管理员权限打开 PowerShell，方法是右键点击 PowerShell 菜单项，然后选择“以管理员身份运行”。接着打开 Chocolatey 设置文档，向下滚动到“使用 PowerShell 安装”说明。复制这些说明，然后在 PowerShell 窗口中右键点击以粘贴它们。

安装 Chocolatey 后，使用以下命令安装 nvm：

choco install -y nvm

安装 nvm 后，使用 nvm install 命令安装所需的 Node.js 和 npm 版本；

nvm install 14

最后，运行 nvm use 命令以使用刚刚安装的 Node.js 和 npm 版本。

nvm use 14.20.0

现在你已经可以使用 create-block 工具创建你的第一个区块了。在终端中，将目录切换到本地 WordPress 安装的 WP 内容插件目录。在我的示例中，它是：

cd development/websites/wordpress/wp-content/plugins

然后运行 create-block 命令，并向该命令传入一个插件 slug。slug 是插件的唯一名称。

npx @wordpress/create-block wp-learn-todo

这将在 wp-learn-todo 目录中创建一个新插件，安装所需的软件包，并创建必要的文件。你会注意到，我们不必安装 create-block 软件包。npx 命令允许我们从云端托管的位置运行该软件包。

新插件搭建完成后，你的 WordPress 安装中应该会有一个以传递给 create-block 的 slug 命名的新插件文件夹。

它就是 wp-learn-todo。让我们看看这个插件中最重要的目录和文件。

build 目录是最终区块资源文件构建并用于分发的位置。node_modules 包含开发所需的 Node 软件包或模块。src 或 source 目录是你进行大部分编码的地方，所有区块代码都在这里。package.json 文件决定了代码需要哪些软件包。readme.txt 是 WordPress.org 插件目录用来管理插件的文件。而 wp-learn-todo.php 文件是告诉 WordPress 这是一个插件的主插件文件。

如果我们打开 WordPress 并进入区块编辑器，就应该可以添加这个区块。首先，我们需要启用该区块，而 learn-todo 已经激活。现在让我们创建一篇新文章并添加一个新区块。就是它。目前它只包含一个带有一些文字的段落。

本教程关于使用 create-block 的内容就到这里。如果你准备开始构建自定义区块，请查看《为现有插件添加区块支持》教程。想了解更多 WordPress 开发者教程，请访问 learn.wordpress.org。

祝你编码愉快。

简介

在本课程中，你将了解一个名为 Create Block 的命令行工具，以及如何使用此工具搭建新的区块插件。

Create-block 是由 WordPress 贡献者开发的官方命令行工具，用于搭建或创建新的区块插件。

它会生成开始开发新区块插件所需的一切内容，并集成无需配置的现代构建环境。

你可以访问区块编辑器手册页面，阅读更多关于 create-block 的内容。

要求

要使用 create-block 工具，你需要一个本地 WordPress 安装、一个用于运行命令的终端，以及 Node.js 和 npm.

你可以使用任何熟悉的本地 WordPress 安装。如果你还没有本地 WordPress 安装，请查看 learn.wordpress.org 上的《本地 WordPress 安装（面向初学者）》教程：

如果你运行的是 MacOS 或任何 Linux 操作系统，可以使用内置终端。对于 Windows 用户，我们建议安装并使用PowerShell。

最后，你需要安装 Node.js，它也会安装 npm 软件包管理器：

Node.js – https://nodejs.org/en/
npm 软件包管理器 – https://www.npmjs.com/

务必确保使用正确的 Node.js 版本。幸运的是，你可以使用开源的 Node 版本管理器，也称为nvm，来实现这一点。

使用 nvm 的好处是，如果版本要求发生变化，可以很容易地使用 nvm 更新 Node.js 版本。

安装

如果你使用的是 MacOS 或 Linux，可以打开默认的终端应用，并运行从 nvm 文档中复制的 nvm 安装脚本来安装 nvm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装完成后，你可以使用 nvm install 命令安装所需的 Node.js 和 npm 版本。

nvm install 14

如果你使用的是 Windows 计算机，则需要安装 Windows 的Chocolatey软件包管理器，以便安装 nvm。更具体地说，你必须安装适用于 PowerShell 的 Chocolatey CLI

首先，以管理员权限打开 Powershell，方法是右键点击 Powershell 菜单项，然后选择“以管理员身份运行”。

打开Chocolatey CLI 设置文档，向下滚动到“使用 PowerShell 安装”说明。

复制这些说明，然后在 Powershell 窗口中右键点击以粘贴它们。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

按 Enter 键运行命令

安装 Chocolatey 后，使用以下命令安装 nvm。

choco install -y nvm

安装 nvm 后，使用 nvm install 命令安装所需的 Nodejs 和 npm 版本。

nvm install 14

最后运行 nvm use 命令，以使用刚刚安装的 Node.js 版本。