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

许多人抱怨开始构建古腾堡积木和应用程序的障碍。 学习曲线陡峭，主要是由于开发环境的安装和配置困难。 此外，扎实的 JavaScript、Node.js、React 和 Redux 知识是这个相当复杂的秘诀的必备要素。

官方的 WordPress 块编辑器手册为开发人员提供了大量信息，但您可能会发现自己迷失在这些细节的海洋中。

值得一提的是，古腾堡项目的首席架构师 Matias Ventura 在接受 WP Tavern 采访时报告说：

虽然有些人可以快速学习它，但这对人们来说仍然是一个很大的障碍。 我认为这有几个层次； 文档在组织和演示方面可能要好一个数量级。 我希望我们可以在那里做更多的事情。

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

听起来很有趣？ 让我们潜入吧！

古腾堡区块开发先决条件

对于本教程，唯一需要的技能是对 WordPress 插件开发有很好的了解，并且至少对 HTML、CSS、JavaScript 和 React 有基本的了解。

这会是一个雄心勃勃的项目吗？ 你打赌它会的！

在完整性和简单性之间找到正确的折衷方案或决定包含哪些主题和省略哪些主题并不容易。

希望中高级读者能够原谅我们没有深入研究某些概念，例如 React 状态、Redux 存储、高阶组件等。 这些主题需要额外的空间和注意力，并且可能对于开始块开发来说太高级了（除非您是 React 开发人员）。

出于同样的原因，我们不会涵盖与 Gutenberg 块开发相关的一些更高级的主题，例如动态块和元框。

有了本文结尾您将获得的知识，您将能够立即开始享受乐趣并提高工作效率。

一旦您开始构建积木，您将准备好进一步提高您的技能并自行构建更高级的古腾堡积木。

什么是古腾堡街区？

自 2018 年 12 月首次发布以来，块编辑器在各个方面都得到了极大的改进：更强大的 API、更高级的用户界面、改进的可用性、大量新块、全站点编辑的首次实现等等.

简而言之，即使古腾堡仍在大力开发中，它也已经走过了漫长的道路——如今，块编辑器已成为可靠的功能性页面和网站构建器的成熟候选者。

从开发人员的角度来看，Gutenberg 是一个基于 React 的单页应用程序 (SPA)，它允许 WordPress 用户在 WordPress 中创建、编辑和删除内容。 但是，这不应该让您想到传统内容编辑器的增强版本。

我们想明确这一点：

在古腾堡，内容被划分为块，这些块是用户可以用来创建帖子和页面或整个网站的“砖块”。

但从技术上讲，什么是块？

我们喜欢 WordPress 的定义：

“块”是用于描述标记单元的抽象术语，这些标记单元组合在一起形成网页的内容或布局。 这个想法将我们今天在 WordPress 中实现的概念与短代码、自定义 HTML 和嵌入发现结合到一个一致的 API 和用户体验中。

标题、段落、列、图像、画廊以及构成编辑器界面的所有元素，从侧边栏面板到块工具栏控件，都是 React 组件。

那么，什么是 React 组件？ W3Schools 提供以下定义：

组件是独立且可重用的代码。 它们的用途与 JavaScript 函数相同，但独立工作并通过render()函数返回 HTML。

虽然 Gutenberg 提供的编辑体验与经典的 WordPress 编辑器相比是全新的，但 WordPress 将您的内容片段存储在数据库中的方式根本没有改变。 这是因为 Gutenberg 是一个在 WordPress 中运行的应用程序，但不会改变 CMS 的核心工作方式。

使用 Gutenberg 创建的帖子（包括帖子、页面和自定义帖子类型）仍存储在wp_posts表中，与经典编辑器完全相同。

但是在使用 Gutenberg 创建的帖子中，您会在表格中找到更多信息，这些信息代表了通过 Classic Editor 与 Gutenberg 创建的帖子之间的根本区别。

这些信息看起来像 HTML 注释，它们有一个特定的功能：分隔块：

块分隔符告诉 WordPress 要在屏幕上呈现什么块。 它们还为 JSON 对象中的块属性提供值。 这些道具决定了块应该在屏幕上呈现的方式：

设置您的 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 和 npm。 但首先，您可能需要检查该软件是否已安装在您的计算机上。

为此，请启动终端并运行以下命令：

 node -v

如果结果是command not found ，则说明您的计算机上没有安装 Node.js，您可以继续安装。

对于本文，我们选择了最简单的安装选项，即 Node Installer。 您需要做的就是下载与您的操作系统相对应的版本并启动安装向导：

安装 Node.js 后，再次在终端中运行命令node -v 。 你也可以运行npm -v命令来确认你有可用的 npm 包。

您现在配备了以下工具：

• npx Node.js 包运行器（请参阅文档）。 这允许您运行npm命令而无需先安装它。
• npm Node.js 包管理器（参见文档）。 这用于安装依赖项和运行脚本。

下一步是安装开发环境。

2. 设置你的开发环境

在本地计算机上安装最新版本的 Node.js 和 npm 后，您将需要一个 WordPress 开发环境。

您可以使用 DevKinsta 等本地开发环境，也可以使用官方 WordPress 工具。 让我们来看看这两种选择。

选项 1：本地开发环境 (DevKinsta)

只需单击几下，您就可以使用我们现代的本地 WordPress 开发工具 DevKinsta 在本地安装 WordPress。 或者您可以选择不同的本地开发工具，例如 MAMP 或 XAMPP：

选项 2：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 实例中。

第 2 步：从命令行安装@wordpress/env

在您的计算机上运行 Docker 和 Node.js，您可以继续安装 WordPress 开发环境。

您可以在全局或本地安装wp-env 。 要在全局范围内执行此操作，您需要从插件目录中运行以下命令（更多信息请参见下面的“重要”通知框）：

 npm install -g @wordpress/env

让我们分解一下：

• npm install安装包。
• 附加到命令的-g全局安装指定的包。
• @wordpress/env是你要安装的包。

要确认wp-env已成功安装，请运行以下命令：

 wp-env --version

您应该会看到当前的wp-env版本，这意味着您现在可以使用插件文件夹中的以下命令启动环境：

 wp-env start

您可以使用以下地址访问 WordPress 仪表板：

• http://localhost:8888/wp-admin/

默认凭据如下：

• 用户名： admin
• 密码： password

设置你的块插件

现在您需要一个入门块插件来构建。 但是，您无需手动创建包含所有必要文件和文件夹的开发块插件，您只需运行一个开发工具，即可提供开始块开发所需的所有文件和配置。

同样，您有几个选项可供选择。 让我们来看看每一个。

选项 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 开发环境并转到 WordPress 仪表板中的插件屏幕。 一个名为“My First Block”的新插件应该已添加到您的插件列表中：

如果需要，激活插件，创建一个新的博客文章，向下滚动块插入器到小部件部分，然后选择你的新块：

现在返回终端并将当前目录更改为my-first-block ：

 cd my-first-block

然后运行以下命令：

 npm start

这使您能够在开发模式下运行插件。 要创建生产代码，您应该使用以下命令：

 npm run build

选项 2：使用 create-guten-block 设置块插件

create-guten-block是用于构建 Gutenberg 块的第三方开发工具：

create-guten-block是零配置开发工具包（#0CJS），无需配置 React、webpack、ES6/7/8/Next、ESLint、Babel 等即可在几分钟内开发 WordPress Gutenberg 块。

就像官方的create-block工具一样， create-guten-block是基于 create-react-app 的，可以帮助您轻松生成您的第一个块插件。

该工具包提供了创建现代 WordPress 插件所需的一切，包括：

• React、JSX 和 ES6 语法支持。
• 幕后的 webpack 开发/生产构建过程。
• ES6 之外的语言附加功能，例如对象扩展运算符。
• 自动前缀 CSS，因此您不需要 -webkit 或其他前缀。
• 一个构建脚本，用于将 JS、CSS 和图像与源映射捆绑在一起进行生产。
• 使用单个依赖项 cgb-scripts 对上述工具进行无忧更新。

请注意以下警告：

权衡是这些工具已预先配置为以特定方式工作。 如果您的项目需要更多自定义，您可以“弹出”并自定义它，但是您需要维护此配置。

一旦你手头有一个本地 WordPress 网站，启动你的命令行工具，导航到你安装的/wp-content/plugins文件夹，然后运行以下命令：

 npx create-guten-block my-first-block

在创建项目结构并下载依赖项时，您必须等待一两分钟：

该过程完成后，您应该会看到以下屏幕：

下图显示了在 Visual Studio Code 中运行终端的项目结构：

现在回到您的 WordPress 仪表板。 插件屏幕中应该会列出一个新项目——它是my-first-block插件：

激活插件并返回终端。 将当前目录更改为my-first-block ，然后运行npm start ：

 cd my-first-block npm start

您应该得到以下响应：

同样，这使您能够在开发模式下运行插件。 要创建生产代码，您应该使用：

 npm run build

激活插件并创建一个新帖子或页面，然后浏览您的区块并选择您全新的古腾堡区块：

如需更深入的概述或出现错误，请参阅 Ahmad Awais 提供的文档。

入门块脚手架的演练

无论您选择两个开发工具中的哪一个（ create-block或create-guten-block ），您现在都有一个块脚手架，您可以将其用作构建块插件的起点。

但究竟什么是块脚手架？

块脚手架是一个简写术语，描述了 WordPress 识别块所需的支持目录结构。 通常，该目录包括index.php 、 index.js 、 style.css等文件，而这些文件又包含诸如register_block_type之类的调用。

我们选择了官方的创建块开发工具，因为它在块编辑器手册中使用。 但是，即使您决定使用像create-guten-block这样的第三方工具，您的体验也不会有太大的不同。

话虽如此，让我们更深入地研究create-block工具。

仔细查看 Create Block 开发工具

正如我们上面提到的，创建块是创建古腾堡块的官方命令行工具。 在终端中运行@wordpress/create-block会生成注册新块类型所需的 PHP、JS 和 SCSS 文件和代码：

 npx @wordpress/create-block [options] [slug]

• [slug] (可选) — 用于分配块 slug 并安装插件
• [options] （可选）- 可用选项

默认情况下，分配一个 ESNext 模板。 这意味着您将获得 JavaScript 的下一个版本，并添加了 JSX 语法。

如果您省略块名称，该命令将以交互模式运行，使您能够在生成文件之前自定义多个选项：

 npx @wordpress/create-block

下图显示了使用官方创建块工具创建的块插件的文件结构：

话虽如此，让我们浏览一下新块插件的主要文件和文件夹。

插件文件

使用主插件文件在服务器上注册块：

 /** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

register_block_type函数使用存储在block.json文件中的元数据在服务器上注册块类型。

该函数有两个参数：

• 包含命名空间的块类型名称，或block.json文件所在文件夹的路径，或完整的WP_Block_Type对象
• 一组块类型参数

在上面的代码中，块类型参数由__DIR__魔术常量提供。 这意味着block.json文件与插件文件位于同一文件夹中。

package.json 文件

package.json 文件为您的项目定义 JavaScript 属性和脚本。 这是您可以安装项目依赖项的地方。

为了更好地理解此文件的用途，请使用您喜欢的代码编辑器打开它：

 { "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { "build": "wp-scripts build", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

scripts属性是一个字典，其中包含使用npm run [cmd]在包的生命周期中的不同时间运行的命令。

在本文中，我们将使用以下命令：

• npm run build — 创建一个（压缩的）生产版本
• npm run start — 创建一个（未压缩的）开发版本

dependencies和devDependencies是将包名称映射到版本的两个对象。 在生产中需要dependencies项，而devDependences仅在本地开发中需要（阅读更多）。

唯一的默认开发依赖项是@wordpress/scripts包，它被定义为“为 WordPress 开发量身定制的可重用脚本的集合”。

block.json 文件

从 WordPress 5.8 开始， block.json元数据文件是注册块类型的规范方法。

拥有一个block.json文件有几个好处，包括提高性能和在 WordPress 插件目录上更好的可见性：

从性能的角度来看，当主题支持延迟加载资产时，使用block.json注册的块将对其资产排队进行开箱即用的优化。 style或script属性中列出的前端 CSS 和 JavaScript 资产仅在页面上存在块时才会排队，从而减少页面大小。

运行@wordpress/create-block命令会生成以下block.json文件：

 { "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

以下是默认属性的完整列表：

• apiVersion — 区块使用的 API 版本（当前版本为 2）
• name — 包含命名空间的块的唯一标识符
• version — 块的当前版本
• title — 块的显示标题
• category — 块类别
• icon — Dashicon slug 或自定义 SVG 图标
• description — 在块检查器中可见的简短描述
• supports — 一组用于控制编辑器中使用的功能的选项
• textdomain — 插件文本域
• editorScript — 编辑器脚本定义
• editorStyle — 编辑器样式定义
• style — 为块提供替代样式

除了上面列出的属性之外，您还可以（并且可能会）定义一个attributes对象，提供有关您的块存储的数据的信息。 在您的block.json 中，您可以在键/值对中设置任意数量的属性，其中键是属性名称，值是属性定义。

看看下面的属性定义示例：

 "attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

我们将在本文后面深入研究block.json文件，但您可能还想查看块编辑器手册以获取有关block.json元数据和属性的更多详细信息。

src 文件夹

src文件夹是开发发生的地方。 在该文件夹中，您将找到以下文件：

• index.js
• 编辑.js
• 保存.js
• 编辑器.scss
• 样式.scss

index.js

index.js文件是您的起点。 在这里，您将导入依赖项并在客户端上注册块类型：

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

第一条语句从@wordpress/blocks包中导入registerBlockType函数。 以下导入语句将样式表与Edit和save功能一起导入。

registerBlockType函数在客户端注册组件。 该函数有两个参数：一个块名称namespace/block-name （与在服务器上注册的相同）和一个块配置对象。

Edit函数提供了在块编辑器中呈现的块界面，而save函数提供了将被序列化并保存到数据库中的结构（阅读更多）。

编辑.js

edit.js是您构建块管理界面的地方：

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

首先，它从@wordpress/i18n包（该包包含翻译函数的 JavaScript 版本）、 useBlockProps React 钩子和editor.scss文件中导入__函数。

之后，它会导出 React 组件（阅读有关导入和导出语句的更多信息）。

保存.js

save.js文件是我们构建要保存到数据库中的块结构的位置：

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scss 和 style.scss

除了脚本之外，还有两个 SASS 文件位于src文件夹中。 editor.scss文件包含应用于编辑器上下文中块的样式，而style.scss文件包含用于在前端显示的块的样式。 我们将在本指南的第二部分深入研究这些文件。

node_modules 和构建文件夹

node_modules文件夹包含节点模块及其依赖项。 我们不会深入研究节点包，因为它超出了本文的范围，但您可以在本文中阅读更多关于 npm 安装包的位置的文章。

build文件夹包含构建过程产生的 JS 和 CSS 文件。 您可以在 ESNext 语法和 JavaScript 构建设置指南中深入了解构建过程。

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

是时候弄脏我们的手了。 本节将教你如何创建一个插件，提供一个名为 Affiliate Block 的 CTA 块。

该块将由两列组成，左侧是图像，右侧是文本段落。 带有可自定义链接的按钮将放置在文本下方：

这只是一个简单的示例，但它允许我们涵盖古腾堡区块开发的基础知识。 一旦你清楚地了解了基础知识，你就可以在块编辑器手册和任何其他可用的大量资源的帮助下继续创建越来越复杂的古腾堡块。

假设您在本地开发环境中运行了最新版本的 WordPress，以下是您将从这里学到的内容：

• 如何设置 Starter Block 插件
• 工作中的 block.json
• 使用内置组件：RichText 组件
• 向块工具栏添加控件
• 自定义块设置侧边栏
• 添加和自定义外部链接
• 添加多个块样式
• 使用 InnerBlocks 组件嵌套块
• 其他改进

预备，准备，开始！

如何设置 Starter Block 插件

启动命令行工具并导航到/wp-content/plugins文件夹：

现在，运行以下命令：

 npx @wordpress/create-block

此命令生成用于在交互模式下注册块的 PHP、SCSS 和 JS 文件，使您可以轻松地为您的块添加必要的数据。 对于我们的示例，我们将使用以下详细信息：

• 块蛞蝓：我的附属块
• 内部命名空间：my-affiliate-plugin
• 块显示标题：附属块
• 简短的块描述：Kinsta 阅读器的示例块
• Dashicon ：钱
• 类别名称：设计
• 插件作者：你的名字
• 执照: –
• 链接到许可证文本：-
• 当前插件版本：0.1.0

安装插件和所有依赖项需要几分钟。 该过程完成后，您将看到以下响应：

现在，从/wp-content/plugins文件夹运行以下命令：

 cd my-affiliate-block

最后，在您的插件文件夹中（在我们的示例中为 my-affiliate-block ），您可以使用以下命令开始开发：

 npm start

现在打开插件屏幕以查找并激活Affiliate Block插件：

创建一个新帖子，打开块插入器，然后向下滚动到设计类别。 单击以添加会员块：

工作中的 block.json

正如我们前面提到的，服务器端块注册发生在主.php文件中。 但是，我们不会在.php文件中定义设置。 相反，我们将使用block.json文件。

因此，再次打开block.json并仔细查看默认设置：

 { "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

脚本和样式

editorScript 、 editorStyle和style属性提供了前端和后端脚本和样式的相对路径。

您不必手动注册此处定义的脚本和样式，因为它们是由 WordPress 自动注册和排队的。 为了证明这一点，启动浏览器检查器并打开Network选项卡：

从上图中可以看出，我们驻留在build文件夹中的index.js脚本已定期排入队列，而无需添加任何 PHP 代码。

用户界面标签

title和description属性提供了在编辑器中识别块所需的标签：

关键词

正如我们前面提到的，您可以使用属性和属性准确配置块设置。 例如，您可以添加一个或多个keywords来帮助用户搜索块：

 { "keywords": [ "kinsta", "affiliate", "money" ] }

如果您现在在快速插入器中输入“kinsta”、“affiliate”或“money”，编辑器会建议您使用 Affiliate 块：

本土化

如果您想知道 JSON 文件中字符串的本地化是如何发生的，答案如下：

In JavaScript, you can use now registerBlockTypeFromMetadata method from @wordpress/blocks package to register a block type using the metadata loaded from block.json file. All localized properties get automatically wrapped in _x (from @wordpress/i18n package) function calls similar to how it works in PHP with register_block_type_from_metadata . The only requirement is to set the textdomain property in the block.json file.

Here we are using the registerBlockType function instead of registerBlockTypeFromMetadata , as the latter has been deprecated since Gutenberg 10.7, but the mechanism is the same.

Using Built-In Components: The RichText Component

The elements that make up a Gutenberg block are React components, and you can access these components via the wp global variable. For example, try to type wp.editor into your browser's console. This will give you the full list of the components included in the wp.editor module.

Scroll through the list and guess what components are meant for by their names.

Similarly, you can check the list of components included in the wp.components module:

Now go back to the edit.js file and take a closer look at the script:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

此代码生成一个带有简单、不可编辑文本的静态块。 但是我们可以很容易地改变：

要使文本可编辑，您必须将当前<p>标记替换为使输入内容可编辑的组件。 为此，Gutenberg 提供了内置的 RichText 组件。

将内置组件添加到块中需要 5 个步骤：

1. 从 WordPress 包中导入所需的组件
2. 在 JSX 代码中包含相应的元素
3. 在 block.json 文件中定义必要的属性
4. 定义事件处理程序
5. 保存数据

第 1 步：从 WordPress 包中导入所需的组件

现在打开edit.js文件并更改以下import语句：

 import { useBlockProps } from '@wordpress/block-editor';

…到：

 import { useBlockProps, RichText } from '@wordpress/block-editor';

这样，您将从@wordpress/block-editor包中导入useBlockProps函数和RichText组件。

使用BlockProps

useBlockProps React 钩子标记了块的包装元素：

使用 API 版本 2 时，您必须在块的edit函数中使用新的useBlockProps挂钩来标记块的包装器元素。 该钩子将插入启用块行为所需的属性和事件处理程序。 您希望传递给块元素的任何属性都必须通过useBlockProps传递，并将返回的值传播到元素上。

简单地说， useBlockProps自动将属性和类分配给包装元素（我们示例中的p元素）：

如果您从包装元素中删除useBlockProps ，您将拥有一个简单的文本字符串，无法访问块功能和样式：

正如我们稍后将解释的，您还可以将属性对象传递给useBlockProps以自定义输出。

富文本

RichText 组件提供了一个 contenteditable 输入，允许用户编辑和格式化内容。

您可以在 GitHub 上的 gutenberg/packages/block-editor/src/components/rich-text/README.md 中找到该组件。

第 2 步：在 JSX 代码中包含相应的元素

... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

让我们逐行注释代码：

• tagName — 可编辑 HTML 元素的标签名称
• onChange — 元素内容改变时调用的函数
• allowedFormats — 允许格式的数组。 默认情况下，允许所有格式
• value — 要编辑的 HTML 字符串
• placeholder — 当元素为空时显示的占位符文本

第 3 步：在 block.json 文件中定义必要的属性

属性提供有关块存储的数据的信息，例如丰富的内容、背景颜色、URL 等。

您可以在键/值对中的attributes对象中设置任意数量的属性，其中键是属性名称，值是属性定义。

现在打开block.json文件并添加以下attributes道具：

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

content属性允许将用户输入的文本存储在可编辑字段中：

• type表示属性存储的数据类型。 除非您定义enum属性，否则该类型是必需的。
• source定义如何从帖子内容中提取属性值。 在我们的示例中，它是 HTML 内容。 请注意，如果您不提供源属性，则数据将存储在块分隔符中（阅读更多）。
• selector是一个 HTML 标记或任何其他选择器，例如类名或 id 属性。

我们将向Edit函数传递一个属性对象。 因此，返回到edit.js文件并进行以下更改：

 export default function Edit( { attributes, setAttributes } ) { ... }

第 4 步：定义事件处理程序

RichText元素有一个onChange属性，提供了一个在元素内容更改时调用的函数。

让我们定义该函数并查看整个edit.js脚本：

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

现在保存文件并在终端窗口中运行npm run start 。 然后，返回您的 WordPress 仪表板，创建一个新帖子或页面并添加您的会员块：

添加一些文本并切换到代码视图。 这是您的代码应如下所示：

 <!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

如果您现在保存页面并检查前端结果，您可能会有点失望，因为您的更改不会影响站点。 那是因为您必须修改save.js文件以在保存帖子时将用户输入存储在数据库中。

第 5 步：保存数据

现在打开save.js文件并更改脚本如下：

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

这就是我们在这里所做的：

• 从block-editor包中导入RichText组件。
• 通过对象参数将多个属性传递给save函数（在此示例中，我们仅传递attributes属性）
• 返回RichText组件的内容

您可以在块编辑器手册中阅读有关RichText组件的更多信息，并在 Github 上找到完整的道具列表。

现在让我们更进一步。 在下一节中，您将学习如何将控件添加到块工具栏。

向块工具栏添加控件

块工具栏包含一组控件，允许用户操作部分块内容。 对于每个工具栏控件，您都会找到一个组件：

例如，您可以为块添加文本对齐控件。 您需要做的就是从@wordpress/block-editor包中导入两个组件。

我们将执行与上一个示例相同的步骤：

1. 从 WordPress 包中导入所需的组件
2. 在 JSX 代码中包含相应的元素
3. 在block.json文件中定义必要的属性
4. 定义事件处理程序
5. 保存数据

第 1 步：从 @wordpress/block-editor 导入 BlockControls 和 AlignmentControl 组件

要将对齐控件添加到块工具栏，您需要两个组件：

• BlockControls呈现控件的动态工具栏（未记录）。
• AlignmentControl呈现一个下拉菜单，显示所选块的对齐选项（阅读更多）

打开edit.js文件，编辑import语句，如下图：

 import { useBlockProps, RichText, AlignmentControl, BlockControls } from '@wordpress/block-editor';

第 2 步：添加 BlockControls 和 AlignmentControl 元素

转到Edit函数并在<RichText />的同一级别插入<BlockControls />元素。 然后在<BlockControls />中添加和<AlignmentControl /> > ：

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

在上面的代码中， <>和</>是声明 React 片段的简短语法，这是我们在 React 中返回多个元素的方式。

在本例中， AlignmentControl有两个属性：

• value提供元素的当前值
• onChange提供了一个事件处理程序以在值更改时运行

我们还为RichText元素定义了其他属性（请查看完整的属性列表和示例）

第三步：在block.json中定义align属性

现在转到block.json文件并添加align属性：

 "align": { "type": "string", "default": "none" }

返回终端，使用^C停止当前进程并使用npm run start再次启动脚本。 然后返回块编辑器，刷新页面并选择块。 您应该会看到带有对齐控件的块工具栏：

现在，如果您尝试使用新的对齐控件格式化块内容，您会发现没有任何反应。 那是因为我们还没有定义事件处理程序。

第 4 步：定义事件处理程序

现在定义onChangeAlign ：

 const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

如果newAlign是undefined ，那么我们将newAlign设置为none 。 否则，我们使用newAlign 。

我们的edit.js脚本应该是完整的（现在）：

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

现在您可以返回编辑器并对齐块内容。

我们需要修改 save 函数，将块的内容和属性存储在数据库中。

第 5 步：保存数据

打开save.js ，修改save函数如下：

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

最后，为了使代码更具可读性，您可以使用解构赋值语法从attribute对象中提取各个属性：

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

保存文件，重新启动进程并以代码编辑器模式返回编辑器。 代码应如下所示：

 <!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

就是这样！ 您刚刚向块工具栏添加了对齐控件

您可以在块编辑器手册中阅读有关块工具栏控件的更多信息。

自定义块设置侧边栏

您还可以将控件添加到块设置侧边栏（甚至为您的应用程序创建一个新的侧边栏）。

API 为此提供了一个InspectorControls组件。

块编辑器手册解释了如何使用设置边栏：

设置侧边栏用于显示不常用的设置或需要更多屏幕空间的设置。 设置侧边栏应仅用于块级设置。

如果您的设置仅影响块内的选定内容（例如：段落内选定文本的“粗体”设置）：请勿将其放在设置边栏中。 即使在 HTML 模式下编辑块时也会显示设置侧边栏，因此它应该只包含块级设置。

再次：

1. 从 WordPress 包中导入所需的组件
2. 在 JSX 代码中包含相应的元素
3. 在 block.json 文件中定义必要的属性
4. 定义事件处理程序
5. 保存数据

步骤 1. 从 @wordpress/block-editor 导入 InspectorControls 和 PanelColorSettings 组件

您可以添加多个控件以允许用户自定义块的特定方面。 例如，您可以提供一个颜色控制面板。 为此，您需要从block-editor模块中导入InspectorControls和PanelColorSettings组件：

 import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

第 2 步：在 JSX 代码中包含相应的元素

现在您可以将相应的元素添加到Edit函数返回的 JSX 中：

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

请注意，我们还更新了RichText元素的style属性：

 <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

第 3 步：在 block.json 中定义必要的属性

现在在block.json文件中定义backgroundColor和textColor属性：

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

第 4 步：定义事件处理程序

现在您需要定义两个函数来更新用户输入的backgroundColor和textColor ：

 const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

第 5 步：保存数据

最后一步：打开save.js文件并按如下方式更改脚本：

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

现在停止进程 (^C) 并再次运行npm run start 。 刷新页面，删除任何块实例并将其再次添加到您的帖子中：

进行更改，保存帖子，然后在前端查看。 您在块编辑器中所做的更改应反映在前端站点上。

添加和自定义外部链接

在本节中，您将向块类型添加新组件：

• 一个ExternalLink组件，允许用户将可自定义的链接添加到 Affiliate 块
• 几个侧边栏控件允许用户自定义链接设置

步骤 1. 从 @wordpress/components 导入组件

现在您需要从@wordpress/components导入几个组件。 打开您的 edit.js 文件并添加以下import语句：

 import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBody将可折叠容器添加到设置侧边栏。
• PaneRow为侧边栏控件生成一个通用容器。
• TextControl提供了一个文本输入控件。
• ToggleControl提供了一个切换功能，使用户能够启用/禁用特定选项
• ExternalLink是一个添加外部链接的简单组件。

步骤 2. 在 JSX 代码中包含相应的元素

您将首先在div容器中添加与RichText相同级别的ExternalLink元素：

 <div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

ExternalLink组件没有记录，因此我们参考了组件本身来获取可用属性的列表。 这里我们使用href 、 className和rel属性。

默认情况下， rel属性值设置为noopener noreferrer 。 当切换控件打开时，我们的代码会将nofollow关键字添加到结果a标记的rel属性中。

现在您可以将链接设置添加到块侧边栏。

首先，您将在InspectorControls中添加一个PanelBody元素，与PanelColorSettings处于同一级别：

 <InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

这是我们正在做的事情：

1. title属性提供面板标题。
2. initialOpen设置面板最初是否打开。

接下来，我们将在PanelBody中添加两个PanelRow元素，并在每个PanelRow中添加一个TextControl元素：

 <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

上面的代码现在看起来应该很简单了。 这两个文本控件允许用户设置链接标签和 URL。

我们还将添加一个带有ToggleControl PanelRow打开/关闭特定选项，例如是否包含属性：

 <PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

第 3 步：在 block.json 中定义必要的属性

现在在block.json文件中定义affiliateLink 、 linkLabel和hasLinkNofollow属性：

 "affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

这里没有什么要补充的了！ 让我们继续定义事件处理函数。

第 4 步：定义事件处理程序

回到edit.js文件并添加以下函数：

 const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

这些函数更新用户输入的相应属性值。

第 5 步：保存数据

最后，我们必须更新save.js中的save功能：

 export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

请注意，这里我们使用了常规a元素而不是ExternalLink ：

现在保存数据并重新启动您的环境。

添加多个块样式

在上一节中，您学习了如何添加允许用户对齐用户输入的块工具栏控件。 我们可以向块工具栏添加更多样式控件，但我们也可以提供一组预定义的块样式，用户只需单击即可从中选择。

为此，我们将使用 Block API 的一个有用功能：Block Styles。

您需要做的就是定义block.json styles属性并在样式表中声明相应的样式。

例如，您可以添加以下样式数组：

 "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

有了这个，您刚刚添加了一个默认样式和一个称为border的附加样式。 现在回到块编辑器：

通过单击块切换器，然后在块设置侧边栏中查找样式面板，用户将可以使用样式。

选择一种样式并检查应用于p元素的类。 右键单击块并检查。 添加了一个新类，其名称结构如下：

 is-style-{style-name}

如果你选中了“Border”样式，那么一个is-style-border类将被添加到p元素中。 如果您选中了“默认”样式，则会添加一个is-style-default类。

现在您只需要声明 CSS 属性。 打开editor.scss文件并将当前样式替换为以下内容：

 .wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

现在你可以对style.scss做同样的事情：

 .wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

停止进程 (^C) 并再次运行npm run start 。

就是这样！ 刷新页面，享受新的块样式：

使用 InnerBlocks 组件嵌套 Gutenberg 块

虽然功能齐全，但我们的会员块仍然不是很吸引人。 为了让观众更感兴趣，我们可以添加一张图片。

这可能会给我们的块增加一层复杂性，但幸运的是，您不需要重新发明轮子，因为 Gutenberg 提供了一个特定的组件，您可以使用它来创建嵌套块的结构。

InnerBlocks组件定义如下：

InnerBlocks导出一对可用于块实现以启用嵌套块内容的组件。

首先，您需要在src文件夹中创建一个新的.js文件。 在我们的示例中，我们将此文件称为container.js 。

现在您需要将新资源导入index.js文件：

 import './container';

回到container.js并导入必要的组件：

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

下一步是定义一个模板，提供将放置块的结构。 在以下示例中，我们定义了一个模板，该模板由两列组成，其中包含一个核心 Image 块和我们的自定义 Affiliate 块：

 const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

模板的结构是一个 blockTypes 数组（块名称和可选属性）。

在上面的代码中，我们使用了几个属性来配置 Columns 和 Column 块。 具体来说， templateLock: 'all'属性锁定 Column 块，以便用户不会添加、重新排序或删除现有块。 templateLock可以采用以下值之一：

• all — InnerBlocks被锁定，不能添加、重新排序或删除任何块。
• insert — 块只能重新排序或删除。
• false — 模板未锁定。

然后将模板分配给InnerBlocks元素：

 <InnerBlocks template={ TEMPLATE } templateLock="all" />

为了防止出现任何兼容性问题，我们还在InnerBlocks组件中添加了一个templateLock属性（另见 issue #17262 和 pull #26128）。

这是我们最终的container.js文件：

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

其他改进

我们的块功能齐全，但我们可以通过一些小改动对其进行一些改进。

我们将backgroundColor属性分配给RichText组件生成的段落。 但是，我们可能更愿意将背景颜色分配给容器div ：

所以，修改edit.js文件和save.js div如下：

 <div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

这将允许用户更改整个块的背景。

另一方面，更相关的更改涉及useBlockProps方法。 在原始代码中，我们定义了常量blockProps如下：

 const blockProps = useBlockProps();

但是我们可以使用useBlockProps更有效地传递一组属性。 例如，我们可以从classnames名模块中导入classnames名，并相应地设置包装类名。

在以下示例中，我们根据align属性 ( edit.js ) 的值分配一个类名：

 import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

我们将在save.js文件中进行相同的更改：

 import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

这是一个包装！ 您现在可以运行构建以进行生产。

概括

我们到了，在这个令人难以置信的旅程的尽头！ 我们从开发环境的配置开始，最终创建了一个完整的块类型。

正如我们在介绍中提到的，扎实的 Node.js、Webpack、Babel 和 React 知识对于创建高级 Gutenberg 块并将自己定位为专业的 Gutenberg 开发人员在市场上至关重要。

但是，您无需具备 React 经验即可开始享受块开发的乐趣。 区块开发可以为您提供动力和目标，让您在古腾堡区块背后的技术中获得越来越广泛的技能。

因此，本指南远未完成。 它只是对各种主题的介绍，可帮助您开始构建您的第一个古腾堡积木。

因此，我们建议您通过仔细阅读在线文档和指南来加深您的知识。 在可用的众多资源中，我们推荐以下内容：

• 官方为初学者创建一个块教程
• 面向中级开发者的官方块教程
• 动态块
• 元框
• 为您的插件创建侧边栏

如果您刚开始 WordPress 开发，您可能想了解前端开发的基本概念。 以下是可以帮助您入门的资源的快速列表：

• 如何在本地安装 WordPress（免费电子书）
• 托管 WordPress 主机的真正价值（免费电子书）
• 什么是 JavaScript？
• HTML 与 HTML5
• 如何在 WordPress 中编辑 CSS
• 什么是 PHP？
• WordPress Hooks 训练营：如何使用操作、过滤器和自定义 Hooks

请记住，本指南示例的完整代码可在 Gist 上找到。

现在轮到你了：你开发过古腾堡积木吗？ 到目前为止，您遇到的主要困难是什么？ 请在评论中告诉我们您的体验！