如何创建WordPress 自定义古腾堡块：系列教程

这是一个详细的教程系列，涵盖了如何创建您自己的 WordPress 自定义古腾堡块。它适用于主题或插件开发人员，并且像我一样对缺乏文档感到沮丧。在 WordPress 的新 Javascript 世界中进行开发时，我学到的大部分知识都是通过反复试验、积极试验和阅读所有相关内容来获得的。因此，我认为我可以将到目前为止所学的所有内容收集到一个大型教程中。

通过 10 个部分，本教程旨在教您如何编写自己的自定义块。无论它们的用途是什么，都从最基础的开始，逐步发展到更复杂的功能。我建议您自己写出所有内容，而不是复制粘贴代码。这才是最好的学习方式！按照系列的第 1 步到第 10 步进行操作，因为我们将在推进过程中构建块的顶部。

在我们开始之前你需要知道什么

在我们进入步骤之前；免责声明。关于这个系列是什么，什么不是，您应该事先知道一些事情。

编程语言

您需要了解 Javascript – 这是理所当然的。无需成为专家，但这不是 Javascript 教程。至于 ECMAScript Javascript 版本；你可以用 ES5 编写而不用担心用 Babel 之类的东西编译你的代码。然而，这个系列是用 ES6 和 ESNext 代码编写的。别担心——第 1 步专门指导您设置一个开发环境，准备好在 ESNext 中使用其所有新语法进行编码。

您可能知道 Gutenberg 基于React JS。本系列也不是 React 教程，假定读者了解 React 及其工作原理的基本知识。同样，无需成为专家。由于 React 已经存在了一段时间，所以有很多很好的教程、文档和资源专门用来教你 React。所以我建议先看看这些。

本系列专注于学习 Javascript、React 和 JSX 部分，而不关注样式/CSS。由于您的块的目标可能截然不同，我选择不关注样式，只提供非常基本的 HTML。由您来添加样式和必要的 HTML 输出以使您的块呈现完全符合您的需要。

本教程的时效

最后请想想这个系列的写作时间。古腾堡仍然很新，但正在发生巨大的变化和改进。

如果您在遥远的将来发现这一点，一些代码可能会被弃用或替换为更好的方法。本指南是在 WordPress 5.2.3 版（2019 年底）中编写并定稿的。

你会学到什么

在第一部分中，我们专注于基础知识。我们建立了一个开发环境来运行我们的代码编译。以及如何注册块的基础知识以及它的必要 PHP 部分。我们将了解 WordPress Gutenberg 提供的庞大的组件和方法库。

继续，我们将了解如何在编辑器侧边栏（检查器）中为我们的块添加部分和设置以及自定义工具栏。在此过程中，我们将接触许多不同的输入类型以及如何使用 Gutenberg 的组件来处理这些类型。当然，我们将学习如何保存、更新和输出保存的信息到我们的块——以及它是如何在幕后工作的。

最后，我们将了解更高级的内容，例如动态块以及如何使用 PHP 呈现块输出。最后是如何在编辑器中进行帖子查询——允许用户从列表中选择一个帖子进行渲染。

目录

您将在下面找到该系列中每个部分的直接链接。

• 第 1 部分：设置开发环境
  在关于如何创建自定义 Gutenberg 块的本系列教程的第一部分中，我们需要设置开发环境。我们需要一个可以用 ES6/ESNext 语法编写代码并随时编译的地方。

• 第 2 部分：注册块
  在这部分中，我们将编写 Javascript 来注册和配置我们的自定义块。最后，我们将使用 PHP 注册脚本并为 WordPress 执行必要的 PHP 代码以将其识别为新块。

• 第 3 部分：Props和 WordPress 组件
  在上一步中，我们学习了如何在 Javascript 和 PHP 中注册自定义块。在这一步中，我们将学习如何使用 WordPress 的组件来添加不同类型的字段和设置。

• 第 4 部分：属性
  在这一部分中，我们将了解如何定义属性、获取它们的值并更新它们。使用属性，我们可以接受来自编辑器的输入，保存并输出我们选择的内容。

• 第 5 部分：添加检查器设置
  在这一步中，我们将重点关注 WordPress（至少在代码中）调用检查器的内容——编辑器右侧的侧边栏。我们将介绍一些适合放置在侧边栏中的新组件以及如何处理这些组件。

• 第 6 部分：添加工具栏
  在这篇文章中，我们将学习如何将 WordPress 的工具栏添加到我们的块中，即用于对齐和块对齐。我们还将学习添加我们自己的工具栏和我们自己的按钮来执行自定义操作。

• 第 7 部分：创建您自己的组件
  到目前为止，在本系列教程中，我们已经在registerBlockType()的edit函数中编写了所有代码。这是完全可能的，而且通常建议将编辑分配给单独的组件。通过这样做，我们可以利用组件状态和生命周期方法等功能。

• 第 8 部分：块的翻译
  在这部分中，我们将重点关注如何翻译块中的文本和值。我们使用 WP-CLI 生成必要的文件，以便 Gutenberg 能够在切换 WordPress 语言时加载我们的翻译。

• 第 9 部分：动态块
  到目前为止，我们已经用 Javascript 渲染了块的输出。然而，对于动态内容，如最近的帖子或显示帖子，可能需要我们在 PHP 中呈现块的输出。

• 第 10 部分：获取文章和高阶组件
  在最后一部分中，我们将学习如何使用高阶组件，以及如何从编辑器中执行帖子查询并提供选择文章的方法。