搭建区块开发环境

WordPress 区块是 WordPress 网站存储和展示内容的默认方式。

让我们快速了解一下什么是区块、它们如何工作，以及开始开发它们需要什么。

WordPress 区块

区块在创建和编辑内容时用于文章和页面编辑器，以及在创建和编辑主题模板或模式时用于站点编辑器。

在底层，区块由一种特定格式的 HTML 注释组合而成，该注释定义了区块，如果需要，还会使用 HTML 实体来表示区块内容。

区块的结构

让我们看一个文章中区块的示例。

在你的本地 WordPress 安装中，创建一个新文章，给它一个标题，并在文章编辑器中输入一些文本。

然后，点击文章右上角的选项图标，选择代码视图。

<!-- wp:paragraph -->
<p>Hello World</p>
<!-- /wp:paragraph -->

如你所见，HTML 段落标签被包裹在名为 wp:paragraph 的 HTML 注释中。这些 wp:paragraph 注释是 WordPress 识别这是一个段落区块的方式。区块的实际内容是 wp:paragraph 标签内的所有内容，在这个例子中，就是 HTML 段落标签及其内部的内容。

现在点击“退出代码编辑器”，在侧边栏中，为区块应用一个背景颜色。

现在切换回代码视图，注意 wp:paragraph 标签包含了一些额外的数据。

<!-- wp:paragraph {"backgroundColor":"luminous-vivid-amber"} -->
<p class="has-background has-luminous-vivid-amber-background-color">Hello World</p>
<!-- /wp:paragraph -->

backgroundColor 属性以一种称为 JSON 的特殊格式添加到区块包装器中。当这篇文章在前端渲染时，WordPress 会将其转换为一个 CSS 类，应用到区块上。

准备工作

除了你的本地 WordPress 安装和代码编辑器之外，你还需要一些额外的工具来开发区块。

你需要一个终端来运行命令。

并且你需要安装 Node.js 和 npm。

关于终端的一切

你首先需要的是访问终端来运行命令。

终端是一种允许你使用文本命令与计算机交互的工具。它也被称为命令行或命令提示符。你的操作系统将决定终端的外观以及你可以使用哪些命令。

在 macOS 上，默认的终端称为 Terminal，位于你的应用程序 -> 实用工具文件夹中。你也可以通过点击 Launchpad 应用并搜索 Terminal 来启动它。

在大多数 Linux 发行版上，默认的终端也称为 Terminal，通常位于应用程序菜单中。

在 Windows 上，默认的终端称为命令提示符，位于开始菜单中。

然而，我们推荐在 Windows 上使用名为 PowerShell 的终端应用程序，因为可以配置 PowerShell 使其工作方式类似于 MacOS 和 Linux 上的终端。

某些 Windows 版本确实预装了 PowerShell，但我们推荐安装来自 Microsoft 网站的版本。要下载 PowerShell，请访问 https://learn.microsoft.com/en-gb/powershell/，点击下载 Powershell 按钮，并安装你下载的可执行文件。

安装完成后，你可以通过在开始菜单中搜索 PowerShell 来启动它。

一旦你有了一个可用的终端，你将能够安装开始开发区块所需的软件。

Node.js 和 npm

区块开发依赖于一个名为 React 的 JavaScript 框架。要使用 React，你需要在本地计算机上安装 Node.js 和 npm。

安装 Node.js

由于 npm 与 Node.js 捆绑在一起，你只需要安装 Node.js 即可开始使用。

虽然有多种方法可以安装带有 npm 的 Node.js，但我们推荐使用一个名为 nvm 的工具，它代表 Node 版本管理器。

你可以在 github.com/nvm-sh 找到关于 nvm 的详细信息。

这将使你能够根据所使用软件的要求，安装和使用不同版本的 Node.js。

在 MacOS 和 Linux 上安装 NVM

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

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

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

在 Windows 上安装 NVM

如果你使用的是 Windows 机器，你可以通过 Windows 的 Chocolatey 包管理器（特别是 Chocolatey CLI）来安装 nvm。

首先，右键点击 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'))

按回车键运行该命令。

一旦 Chocolatey CLI（也称为 choco）安装完成，使用以下命令安装 nvm。

choco install -y nvm

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

NVM 的使用

在录制本教程时，Node.js 当前的稳定 LTS（长期支持）版本是版本 20，但请查看 Node.js 网站，确认在您安装 Node.js 时是否有更新的版本。

要安装 Node.js 和 npm，请使用 nvm install 命令，并指定您要安装的版本号。

nvm install 20

也可以通过运行以下命令来安装最新的 LTS 版本。

nvm install --lts

然后，您可以运行 nvm list 来查看已安装的 Node.js 版本。

nvm list

由于 nvm 允许您运行多个版本的 Node.js，您需要告诉 nvm 您要使用哪个版本。可以通过运行 nvm use 命令，后跟版本号来实现。

nvm use 20

这会将当前终端实例的 Node.js 版本设置为版本 20。

此外，还可以使用 LTS 选项运行 npm use 命令。

nvm use --lts

最后，如果您确实安装了多个版本的 Node.js 和 npm，可以通过运行 nvm alias default 命令来设置默认使用的版本。

nvm alias default 20

然后，通过运行以下命令检查已启用的 Node.js 和 npm 版本。

node -v
npm -v

如果您正在处理多个需要不同 Node.js 和 npm 版本的项目，这将非常有用。

现在您已拥有所有必需的工具，可以开始您的区块开发之旅了。

其他资源

WordPress 开发者文档中有一个专门介绍区块编辑器的部分，其中包含大量关于区块、区块开发以及区块开发者可用的各种包的信息。

阅读“区块开发基础”部分也是一个好主意，以便更好地理解整个过程。