WordPress Gutenberg Block API：简介

新的WordPress编辑器（代号Gutenberg）将于5.0版中发布。 现在是掌握它的完美时机，然后它才能进入WordPress核心。

我将向您展示如何使用block API并创建自己的内容块，您可以使用它们来构建帖子和页面。

尚未发布WordPress 5.0的确切日期，但应该在接下来的几个月内。 在此之前，Gutenberg可以作为独立插件使用 。

如果您还没有的话，我强烈建议您尝试使用新的Gutenberg编辑器。 直接从您的WordPress管理员安装非常容易。 但是，由于这仍然是新编辑器的测试版，因此不建议您现在在生产站点上使用它。 仅将其保留在本地开发站点中。

另外，如果您想按照本教程进行操作，那么安装Gutenberg是关键。 这样，您可以尝试创建自己的自定义块。 在过去的几个月中，新编辑器的开发一直在Swift加快，到2018年为止已经发布了多个版本。Gutenberg的最新版本目前在撰写本文时为2.7.0。

在每个版本中，都添加了新功能，并且根据用户反馈不断改进编辑器界面。 与以前的版本相比，它看起来和感觉都更加流畅。 此外，还修复了许多错误，使编辑器更强大。

古腾堡（Gutenberg）提供了一种通过“块”构建帖子内容的新方法，这些块可以彼此堆叠在一起以形成完整的页面。 每个单独的块都独立于其他块而存在，并且可以包含所需的几乎所有标记，样式和JavaScript。

在本教程中，我们将涵盖您需要了解的有关块API的所有知识，以便您可以立即开始创建自己的自定义块。 掌握了基础知识之后，创建更复杂的块比您想象的要容易！

另一个重要原因是古腾堡（Gutenberg）项目对WordPress来说是大新闻。 它建立在React之上。 没错，在WordPress中，React将首次包含在核心中！ 这对于主题和插件开发人员来说是个好消息，因为可以利用WordPress核心随附的React和ReactDOM库轻松将React添加到任何页面。

很快，您将能够直接在React中为所有WordPress项目创建UI组件。 以前，如果您想使用React和ReactDOM库，则必须手动添加它们。 将它们置于核心位置将使其更加方便。

试想一下，完全在React中创建一个插件选项屏幕有多棒！ 还是一些很棒的高级定制工具控件？ 这些新工具将为开发人员提供很大的自由度和灵活性，以创建一些出色的交互式用户界面。

我预计未来几年WordPress的开发将会非常有趣并且也很有趣！

又是什么块？

与当前基于TinyMCE的编辑器相比，新编辑器中的块概念确实发生了转变，因此，在深入探讨块API之前，让我们仔细看一下什么是块。 可以将块视为黑盒子，每个黑盒子包含一堆标记，样式和JavaScript，它们全部包裹在一个方便的实体中，称为“块”。

将块添加到编辑器后，它将在前端显示其外观的预览。 几乎所有块都有设置以进一步自定义其外观和/或行为。

在新编辑器中，默认情况下可用的一些块是：

• 段
• 画廊
• 清单
• 引用
• 码
• 表
• 纽扣
• 列

这使您对可以使用新编辑器随附的块添加到编辑器中的内容类型有所了解。 所有这些块类型都是有用的，但相当基础，因此希望大量的插件开始以更全面的块出现，以添加几乎您可以想到的任何类型的内容。

您可能已经想到了自己的项目需要的一些内容块。 如果古腾堡没有提供这些功能，那么它们很可能是创建自己的自定义块的理想选择。

我建议尝试本教程系列中提供的代码，因为这是学习如何使用块API创建自己的块的最佳方法。 一定要先通读本教程，以掌握块API的工作原理，但请务必亲自尝试一些代码并开始创建一些块！

先决条件

这是中级到高级教程系列，因此假设您对WordPress开发并不陌生。 为了充分利用本系列文章，您至少应具有以下方面的工作知识：

• JavaScript（ES6 +）
• React（和ReactDom）
• JSX
• 命令行
• 节点/ NPM
• 的PHP
• WordPress插件/主题开发
• 本地WordPress开发环境

如果您需要复习这些主题中的任何一个，那么在继续之前最好这样做。 我将逐步解释概念，但这超出了本教程的范围，无法解释所有小细节。

使用JSX在WordPress中创建自定义块是很常见的做法，但这并不是必需的。 如果您习惯使用原始JavaScript开发React组件，也可以在WordPress中进行。 选择完全是您的选择。 但是，您将遇到的大多数块代码都是用JSX（包括本教程）编写的，因此，如果您也使用JSX，您会发现更容易理解概念。

古腾堡：仍在进行中

古腾堡（Gutenberg）项目仍在不断发展，因此即使您阅读本教程，某些情况可能也会发生变化。 这可能包括对编辑器界面的更改，新的核心组件等。

但是，新编辑器现在非常稳定，最近添加的功能（如嵌套块和拖放重新排序）非常令人兴奋。 即使一些如何实现块的小的细节可能会改变，要记住最重要的事情是块的整体概念，以及如何使用它们来创建任何类型的内容。

如果您遇到困难，建议您阅读古腾堡官方手册 ，该手册是最新的最新动态。 还可以在GitHub上查看Gutenberg项目，以检查源代码并记录您可能遇到的任何问题。

这只会帮助更多的人对其进行测试，从而使该项目变得更强大。 这是在块正式成为WordPress一部分之前立即开始开发块的另一个重要原因！

环境设定

要遵循本教程中的代码，您将需要以下内容：

• 当地的发展环境
• 最新版本的WordPress
• 古腾堡独立插件
• 代码编辑器

如果您尚未设置本地开发环境，则可以使用Flywheel或DesktopServer之类的Local方式，因为它们都有可用的免费版本并支持多种操作系统。

确保您正在运行最新版本的WordPress和Gutenberg插件，以确保您正在使用所有最新功能。 另外，那里有一些很棒的代码编辑器，因此，如果您还没有安装代码编辑器，那么请看一下免费的编辑器，例如Visual Studio Code或Atom ，这已经足够了。

为了轻松创建新块，我们将使用一个相对较新的工具箱，称为create-guten-block 。 它允许您快速启动一个新插件，其中包含创建块所需的所有设置和启动程序代码。 它也是一个零配置工具箱，因此它以与create-react-app工具箱类似的方式即开即用地工作，以最小的工作量搭建新的React应用程序。 因此，如果您曾经使用过create-react-app ，那么您会知道会发生什么。

现在让我们看一下如何使用此工具创建古腾堡块。 在本地开发站点的插件文件夹（ /wp-content/plugins/ ）中打开一个终端窗口，然后输入以下内容：

npx create-guten-block my-custom-block
cd my-custom-block
npm start

（注意：使用npx命令需要npm v5.2 +。）

几分钟后，将在名为my-custom-block的文件夹内创建一个新插件，其中包含使用React创建块所需的所有文件和工具！ 还不错吧？

WordPress管理员中的插件名称为my-custom-block-CGB Gutenberg Block Plugin 。 继续并激活它。

该插件创建了一个新块，供我们在Gutenberg编辑器中使用。 要测试我们的新块，请导航至帖子编辑器，然后单击标记为写您的故事的占位符文本。

接下来，按/键显示一个弹出框，我们可以使用该框搜索所有可用的块。

注意：还有其他搜索块的方法，但是我喜欢使用/快速方便地显示搜索块窗口。 但是，请使用您最习惯的方法。

打开搜索框，开始输入my-custom-block然后选择my-custom-block-CGB Block 。 这将在编辑器窗口中显示我们的自定义块。

目前，这只是一个样板块，除了在彩色框中显示占位符文本外，它实际上没有做任何其他事情。 但是，它确实突出了创建块的一个有趣方面。

单击查看帖子以查看帖子对网站访问者的外观。

如您所见，渲染块的内容和样式在前端和后端都不同。 这也适用于JavaScript代码，前端的代码也可能不同。

渲染差异的原因是，在创建块时，需要专门声明单独的前端和后端渲染功能。

这是因为许多块需要在帖子编辑器中呈现其他UI元素，以帮助配置块设置。 由于这仅与帖子编辑器相关，因此在正面渲染块时完全多余。 因此，您可以指定需要在单独的渲染功能中显示在前端的输出。

尽管这种方法有意义并且可以很好地工作，但确实会引起代码重复的问题。 如果您不小心，可能会得到很多重复的内容定义。

在可能的情况下，最好分离出前端和后端渲染功能共有的内容，以帮助减少重复。 在整个教程系列中，我们将遵循这种方法。

结论

在本教程中，我介绍了什么是块的概念以及为什么新的Gutenberg编辑器随WordPress 5.0一起成为热门新闻。 与当前基于TinyMCE的编辑器相比，这是真正的转变。

为了帮助快速创建块， create-guten-block是一个非常有用的工具，可让您创建一个完整的插件，其中包含可用于自定义的工作入门块。

通过查看如何在新的帖子编辑器中使用自定义块，我们进行了四舍五入，发现前端和后端的渲染看起来非常不同。 在古腾堡，您不需要匹配输出！

在第2部分中，我们将介绍块API的细节以及如何利用它来创建自己的自定义块。

翻译自: https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-an-introduction--cms-31039