如果你想在2022年为WordPress开发任何东西，忽略古腾堡简直不是一个选项。插件和主题都必须很好地配合古腾堡，并在用户可以在WordPress仪表板中看到的所有内容中提供一致的用户体验。特别是因为古腾堡现在是WordPress不可分割的一部分——简单地称为块编辑器。
话虽如此，古腾堡入门并不像以前那样简单。几年前，你还可以只用记事本就能编写一个高质量的WordPress插件，但这个过程现在变得更难了。
古腾堡使用WordPress REST API、JavaScript和React等技术。因此，需要新的插件和主题要求来与古腾堡配合工作。
好消息是，我们今天将讨论所有这些！本文作为古腾堡初学者的教程，面向那些首次为古腾堡创建插件的人。
我们主要关注为古腾堡创建插件的各个方面——设置开发环境、创建一个基本插件以及使用块的一些细节。
1. 设置古腾堡开发环境
要开始古腾堡开发，你需要一些JavaScript和React的基础知识。这里有一篇关于WordPress开发者的JavaScript教程。此外，古腾堡中的额外包可能需要使用NodeJS包管理器npm。
你可以使用官方站点上的安装程序在Windows或MacOS上安装最新稳定版的NodeJS。如果你有Linux服务器，你可以编译源代码或使用相应的包管理器（如apt和yum）。例如，如果你使用的是Ubuntu，请在终端上运行以下命令。
sudo apt update
sudo apt install nodejs npm
安装成功后，你可以运行以下命令来验证NodeJS的版本。
nodejs --version
完成这些后，最好设置你的测试WordPress网站，安装当前古腾堡插件（独立插件）或甚至开发版本——你可以从GitHub获取。
⚠️ 注意；虽然古腾堡现在内置于WordPress，但该版本不是最新的。古腾堡的开发仍然相当独立地进行，所有新内容首先包含在古腾堡独立插件中。自古腾堡被纳入WordPress 5.0以来，WordPress核心中的实际古腾堡版本尚未收到任何重大更新。你总是希望使用最新版本的古腾堡，因为它能更好地确保你的工作面向未来，并确保你的创作与稍后进入WordPress核心的所有内容保持一致。
另一方面，如果你打算为古腾堡核心插件做贡献，该仓库有贡献指南，介绍如何设置本地环境并设置待审核的更改。
👉 最后，如果您希望将现有的插件适配到 Gutenberg，这里有一篇详细的教程，教您如何实现：
第 1 部分：如何为 Gutenberg 适配您的插件（块 API） 和 第 2 部分：如何使您的插件与 Gutenberg 兼容（侧边栏 API）。
如果您想从一个已经可以与 Gutenberg 配合使用的模板插件目录开始，可以考虑使用 Gutenberg 样板插件。这种解决方案可以帮助您建立基本的文件结构，让您专注于插件的内容。要使用该样板，请从这里下载并安装插件（zip）。安装并激活样板插件会激活示例块，我们将在本教程中探索这些块。您可以在样板插件目录中各自的目录中找到每个块的代码。
2. 初始配置
如果您对为 Gutenberg 构建内容感兴趣，最常见的方法是构建一个创建新块并将其提供给用户的插件。这正是我们将在本 Gutenberg 教程中要做的事情。
以下部分将从头到尾描述这个过程。
我们将构建的具体插件会输出一条带有可自定义背景的消息。这只是一个示例构建，但您可以将这里介绍的原理应用到您自己的更复杂的插件中。
构建此类插件的基础知识应该是熟悉的。您需要先在 WordPress 的 plugins 目录中创建一个新目录。在其中，我们将放置四个文件：
index.php– 此文件包含新 Gutenberg 块的元数据。block.js– 此 JavaScript 文件用于注册自定义 Gutenberg 块。editor.css– 此文件包含编辑器的样式。style.css– 此文件包含块前端 的样式。
列表中的前两个文件负责注册块，后两个文件定义块的视觉元素样式。
3. 注册块
在注册 Gutenberg 块的这一步中，我们将广泛涵盖两件事：
- 使用 WordPress 的 PHP 引擎注册插件的元数据，
- 使用 Gutenberg 运行的 React 框架注册块。
index.php 文件包含块的入队资源和编辑器资源。
- 首先，通过
add_action注册自定义函数。 - 然后，定义列出 JavaScript 和 CSS 文件路径的函数，使用
wp_enqueue_style和wp_enqueue_script函数。
让我们通过下面的 PHP 代码总结这一点：
add_action( 'enqueue_block_editor_assets', 'gb_block_01_basic_editor_assets' );
function gb_block_01_basic_editor_assets() {
// Scripts.
wp_enqueue_script(
'gb-block-01-basic',
plugins_url( 'block.js', __FILE__ ),
array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
);
// Styles.
wp_enqueue_style(
'gb-block-01-basic-editor',
plugins_url( 'editor.css', __FILE__ ),
array( 'wp-edit-blocks' ),
filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
);
}
这定义了基本编辑器的资源。对于块，只需要 CSS 文件，通过 wp_enqueue_style 函数定义。
block.js 文件描述了 Gutenberg 编辑器中块的属性。我们定义了以下属性和属性：
title– 块的标题icon– 为块显示的图标；您可以从这个 dashicons 集合中选择任何图标category– 块所属的组。块的组示例包括 “common”、”formatting”、”embed”。edit– 返回 DOM 元素的 JavaScript 函数。我们使用wp.element.createElement函数创建一个自定义的段落 DOM 元素p，其中包含自定义文本。当用户从编辑器中点击该块时，Gutenberg 会调用此属性。
( function() {
var registerBlockType = wp.blocks.registerBlockType;
registerBlockType( 'gb/basic-01', {
title: __( 'GB Basic', 'GB' ),
icon: 'shield-alt',
category: 'common',
edit: function( props ) {
return wp.element.createElement(
'p',
{ className: props.className },
'Hello World! — from the editor (01 Basic Block).'
);
},
} );
})();
同样，您可以创建一个 save 属性，当从前端选择该块时会调用它。
在上面的代码中，我们使用 props.className 定义了 p 元素的 className，这将创建一个以 wp-block 开头的类名，后面跟着块的名称。在本 Gutenberg 教程的下一部分中，我们定义了这个类的样式。
4. 自定义块
正如上一节所讨论的，本教程的下一步是定义块元素的属性。让我们定义一个背景颜色、文本颜色和边框。
.wp-block-gb-basic-01 {
color: #000;
background: mistyrose;
border: 0.2rem solid red;
}
您也可以用 SCSS 文件代替 CSS 文件，并使用 Node 编译它们。此外，这里还有一篇来自 CSS Tricks 的关于样式化 Gutenberg 元素的教程。
您的第一个 Gutenberg 教程的成果
我们终于准备好测试我们创建的块了。如果 Gutenberg 插件已激活，请转到 + 图标并检查新块是否出现在那里。
接下来，如果您点击该块，您将看到上面来自 CSS 文件的消息，并带有背景颜色和边框：
结论
我们来到了您的第一个 Gutenberg 教程的结尾。我希望这有所帮助。诚然，我们在这里构建的并不复杂，但它应该能让您了解使用 Gutenberg 时的基本结构以及如何规划您的下一个插件。
首先，我们讨论了设置 Gutenberg 开发环境的步骤。然后，我们介绍了一个样板插件来帮助进一步开发。接下来，讨论的重点转向了注册和样式化新块的各种步骤。
我希望这个 Gutenberg 教程能够帮助您创建您的第一个 Gutenberg 插件！
如果您有任何问题，请在下面的评论中提出。
