构建自定义古腾堡区块：权威WordPress区块开发教程

许多人在开始构建古腾堡区块和应用程序时遇到了障碍。学习曲线陡峭，主要是因为开发环境的安装和配置过程复杂。此外，扎实的JavaScript、Node.js、React和Redux知识是这个复杂过程的必备要素。虽然官方的WordPress区块编辑器手册提供了大量信息，但您可能会发现自己迷失在细节的海洋中。

Gutenberg项目的首席架构师Matías Ventura在接受WP Tavern采访时表示，虽然有些人可以快速学习它，但这仍然是一个很大的障碍。他认为，文档在组织和演示方面可能需要改进，并希望在这方面做出更多努力。

考虑到这一点，我们决定提供一个分步教程，旨在帮助读者开始使用Gutenberg区块开发。

### 古腾堡区块开发先决条件

对于本教程，唯一需要的技能是对WordPress插件开发有深入的了解，并且至少对HTML、CSS、JavaScript和React有基本的了解。这确实是一个雄心勃勃的项目，但在完整性和简单性之间找到正确的平衡点或决定包含哪些主题并省略哪些主题并不容易。中高级读者可能会原谅我们没有深入探讨某些概念，例如React状态、Redux存储、高阶组件等。这些主题需要额外的空间和注意力，并且可能对于开始区块开发来说太高级了（除非您是React开发人员）。出于同样的原因，我们不会涵盖与Gutenberg区块开发相关的一些更高级的主题，例如动态区块和元框。有了本文结尾您将获得的知识，您将能够立即开始享受乐趣并提高工作效率。一旦您开始构建区块，您将准备好进一步提高您的技能并自行构建更高级的古腾堡区块。

### 什么是古腾堡区块？

自2018年12月首次发布以来，区块编辑器在各个方面都得到了极大的改进：更强大的API、更高级的用户界面、改进的可用性、大量新区块、全站点编辑的首次实现等等。简而言之，即使古腾堡仍在大力开发中，它也已经走过了漫长的道路——如今，区块编辑器已成为可靠的功能性页面和网站构建器的成熟候选者。

从开发人员的角度来看，Gutenberg是一个基于React的单页应用程序(SPA)，它允许WordPress用户在WordPress中创建、编辑和删除内容。但是，这不应该让您想到传统内容编辑器的增强版。相反，它重新定义了WordPress中的整个编辑体验。在古腾堡，内容被划分为区块，这些区块是用户可以用来创建文章和页面或整个网站的“砖块”。但从技术上讲，什么是区块？

WordPress喜欢这样定义区块：“区块”是用于描述标记单元的抽象术语，这些标记单元组合在一起形成网页的内容或布局。这个想法将我们今天在WordPress中实现的概念与短代码、自定义HTML和嵌入发现结合到一个一致的API和用户体验中。标题、段落、列、图像、画廊以及构成编辑器界面的所有元素，从侧边栏面板到区块工具栏控件，都是React组件。那么，什么是React组件？W3Schools提供以下定义：组件是独立且可重用的代码。它们的用途与JavaScript函数相同，但独立工作并通过render()函数返回HTML。

### 设置您的WordPress开发环境

设置现代JavaScript开发环境需要扎实的高级技术知识，例如Webpack、React和JSX、Babel、ESLint等。被吓倒了？不要！WordPress社区已经通过提供强大的工具来帮助您避免混乱的手动配置过程。为简单起见，我们不会在本文中介绍转译（不过，我们建议您在了解区块开发的基础知识后熟悉一下）。相反，我们将介绍两种替代工具，您可以使用它们在几分钟内快速轻松地设置现代JavaScript开发环境。您可以选择对您的项目最方便的一个。

设置JavaScript开发环境以构建Gutenberg区块是一个三步过程：

1. 安装Node.js和npm
2. 设置开发环境
3. 设置区块插件

让我们开始吧。

#### 1. 安装Node.js和npm

在安装您的开发环境并注册您的第一个区块之前，您需要安装Node.js和Node包管理器 (npm)。注：Node.js是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。npm，通常被称为Node包管理器，被认为是“世界上最大的软件注册表”。您可以通过几种不同的方式，安装Node.js和npm。但首先，您可能需要检查该软件是否已安装在您的计算机上。为此，请启动终端并运行以下命令：node -v。如果结果为command not found，则您的计算机上未安装Node.js，您可以继续安装。对于本文，我们选择了最简单的安装选项，即Node Installer。您需要做的就是下载与您的操作系统相对应的版本并启动安装向导：Node.js下载页面。安装Node.js后，再次在终端中运行node -v命令。您还可以运行npm -v命令以确认您有可用的npm包。您现在配备了以下工具：npx（Node.js包运行器）和npm（Node.js包管理器）。下一步是安装开发环境。

#### 2. 设置你的开发环境

在本地计算机上安装最新版本的Node.js和npm后，您将需要一个WordPress开发环境。您可以使用本地开发环境，也可以使用官方WordPress工具。让我们来看看这两种选择。

##### 选项 1：本地开发环境

您可以选择不同的本地开发工具，例如MAMP或XAMPP：在本地环境中创建一个新的WordPress网站。

##### 选项 3：wp-env

您也可以选择官方wp-env工具，它提供了一个本地WordPress开发环境，您可以直接从命令行启动。Noah Alen将其定义如下：本地WordPress环境现在就像运行单个命令一样简单。wp-env是用于本地WordPress环境的零配置工具。它提供有关选项的决策，以便用户可以快速启动WordPress而不会浪费时间。事实上，我们的目标是让所有人都能轻松访问这些环境——无论您是开发人员、设计师、经理还是其他任何人。如果您决定试一试，安装wp-env所需的工作量很小。只需按照以下步骤操作：第 1 步：确认Docker和Node.js安装为了满足技术要求，您首先需要在您的计算机上安装Docker和Node.js。那是因为wp-env创建了一个运行WordPress网站的Docker实例。对代码所做的任何更改都会立即反映在WordPress实例中。对wp-env的安装步骤，请参考官方文档。

#### 3. 设置你的区块插件

现在您需要一个入门区块插件来构建。但是，无需手动创建包含所有必要文件和文件夹的开发区块插件，您只需运行一个开发工具，即可提供开始区块开发所需的所有文件和配置。同样，您有几个选项可供选择。让我们来看看每一个。

##### 选项 1：使用@wordpress/create-block设置区块插件

@wordpress/create-block是用于创建Gutenberg区块的官方零配置工具：创建区块是一种官方支持的创建区块的方法，用于为WordPress插件注册区块。它提供了一个没有配置的现代构建设置。它生成PHP、JS、CSS代码以及启动项目所需的所有其他内容。它很大程度上受到create-react-app的启发。向@gaearon、整个Facebook团队和React社区致敬。本地环境启动并运行后，您可以通过简单地运行命令npx @wordpress/create-block来设置起始区块，它将提供创建插件脚手架和注册新区块所需的所有文件和文件夹。让我们运行一个测试，看看它是如何工作的。从命令行工具导航到/wp-content/plugins目录并运行以下命令：npx @wordpress/create-block my-first-block。当要求确认时，输入y继续：使用@wordpress/create-block创建一个区块。该过程需要一些时间。完成后，您应该得到以下响应：区块插件已创建。现在启动您的WordPress开发环境并转到WordPress仪表盘中的插件屏幕。一个名为“My First Block”的新插件应该已添加到您的插件列表中：区块插件已成功安装。注：如果您使用wp-env工具并从包含插件的目录运行wp-env start，它将自动挂载并激活该插件。如果您从任何其他目录运行wp-env start，将创建一个通用的WordPress环境（另请参阅WordPress开发站点）。如果需要，激活插件，创建一个新的博客文章，向下滚动区块插入器到小工具部分，然后选择你的新区块：使用@wordpress/create-block构建的初学者区块。现在返回终端并将当前目录更改为my-first-block：cd my-first-block。然后运行以下命令：npm start。这使得您能够在开发模式下运行插件。要创建生产代码，您应该使用以下命令：npm run build。

##### 选项 4：使用create-guten-block设置区块插件

create-guten-block是用于构建古腾堡区块的第三方开发工具：create-guten-block零配置开发工具包 (#0CJS) 可在几分钟内开发WordPress Gutenberg区块，无需配置React、webpack、ES6/7/8/Next、ESLint、Babel等。就像官方工具create-block一样，create-guten-block基于create-react-app，可以帮助您轻松生成您的第一个区块插件。该工具包提供了创建现代WordPress插件所需的一切，包括以下内容：React、JSX和ES6语法支持。幕后webpack开发/生产构建过程。ES6之外的语言附加功能，例如对象扩展运算符。自动前缀CSS，因此您不需要 -webkit或其他前缀。一个构建脚本，用于将JS、CSS和图像与源映射捆绑在一起进行生产。使用单个依赖项cgb-scripts对上述工具进行无忧更新。请注意以下警告：权衡是这些工具已预先配置为以特定方式工作。如果您的项目需要更多自定义，您可以“eject”并自定义它，但是您需要维护此配置。

### 初学者区块脚手架的演练

无论您选择两种开发工具中的哪一种——create-block或者create-guten-block——您现在都有一个区块脚手架，您可以将其用作构建区块插件的起点。但究竟什么是区块脚手架？区块脚手架是一个简写术语，描述了WordPress识别区块所需的支持目录结构。通常，该目录包括index.php、index.js、style.css等文件，而这些文件又包含register_block_type。我们选择了官方的Create Block开发工具，因为它在Block Editor Handbook中使用。但即使您决定使用第三方工具，例如create-guten-block，您的体验也不会有太大不同。话虽如此，让我们更深入地了解该create-block工具。

### 项目：建造你的第一个古腾堡区块

是时候弄脏我们的手了。本节将教你如何创建一个插件，提供一个名为Affiliate Block的CTA区块。该区块将由两列组成，左侧是图像，右侧是文本段落。带有可自定义链接的按钮将放置在文本下方。您将在本指南中学习构建的区块类型。这只是一个简单的示例，但它允许我们涵盖古腾堡区块开发的基础知识。一旦你清楚地了解了基础知识，你就可以在区块编辑器手册和任何其他可用的大量资源的帮助下继续创建越来越复杂的古腾堡区块。Tips: 本教程中提供的示例代码也可以在Gist上找到，供您参考。假设您在本地开发环境中运行了最新版本的WordPress，以下是您将从这里学到的内容：如何设置初学者区块插件 工作中的block.json 使用内置组件：RichText组件 向区块工具栏添加控件 自定义区块设置侧边栏 添加和自定义外部链接 添加多个区块样式 使用InnerBlocks组件嵌套区块 其他改进

### 小结

我们到了，在这个令人难以置信的旅程的尽头！我们从开发环境的配置开始，最终创建了一个完整的区块类型。正如我们在介绍中提到的，Node.js、Webpack、Babel和React的扎实知识对于创建高级Gutenberg区块并将自己定位为专业的Gutenberg开发人员至关重要。但是，您无需具备React经验即可开始享受区块开发的乐趣。区块开发可以为您提供动力和目标，让您在古腾堡区块背后的技术中获得越来越广泛的技能。因此，本指南远未完成。它只是对各种主题的介绍，可帮助您开始构建您的第一个古腾堡区块。因此，我们建议您通过仔细阅读在线文档和指南来加深您的知识。在可用的众多资源中，我们推荐以下内容：官方为初学者创建一个区块教程 面向中级开发者的官方区块教程 动态区块 元框 为您的插件创建侧边栏 如果您刚开始WordPress开发，您可能想了解前端开发的基本概念。以下是可以帮助您入门的资源的快速列表：如何在本地安装WordPress 什么是JavaScript？ HTML与HTML5 WordPress Hooks训练营：如何使用动作、过滤器和自定义Hooks 请记住，本指南示例的完整代码可在Gist上找到。