如何创建WordPress古腾堡动态区块

你是否还在为古腾堡区块编辑器感到困惑？或者你是一位坚信区块编辑器潜力，渴望探索其创作极限的开发者？无论你属于哪一类，古腾堡区块编辑器都将是你不可或缺的工具。本文将深入剖析WordPress区块编辑器背后的机制，并超越基础知识，带你领略更高级的区块类型——动态区块。你将了解到什么是动态区块，它们如何运作，以及从头开始创建动态区块所需的一切知识。

### 什么是动态区块？

动态区块与静态区块的主要区别在于内容加载和处理的方式。使用静态区块时，用户在编辑文章或页面时手动添加内容。而动态区块则是在页面加载时动态加载和处理内容。动态区块从数据库中提取内容并按原样显示，或由任何类型的数据操作产生。

**一个例子**：假设你想创建一组嵌套区块，显示文章作者的详细信息以及来自同一作者的最新文章的选择。你可以使用标题核心区块、文章作者核心区块和最新文章核心区块。然后，你可以创建一个包含这些区块的组，并将其添加到可重复使用的区块中以供将来使用。

### 从开发人员的角度来看古腾堡动态区块

动态区块有两个主要用例。第一个用例是当包含区块的页面尚未更新时，需要更新区块的内容。例如，当区块包含最新文章或评论的列表时，通常每当区块的内容是使用从数据库检索的数据动态生成时。

第二个用例是需要立即在前端显示对区块代码的更新。使用动态区块而不是静态区块会导致更改立即应用于所有出现的区块。另一方面，如果你要更改由静态区块生成的HTML，用户将看到一个无效对话框，直到该区块的先前版本的每个实例都被删除并替换为新版本，或者你将旧版本标记为不推荐使用的版本。

### 应用程序状态和数据存储

Gutenberg是一个React单页应用程序，编辑器中的所有内容都是一个React组件。在之前的文章中，我们只使用了属性来存储数据。在本文中，我们将通过引入state的概念更进一步。简单来说，state对象是一个普通的JavaScript对象，用于包含有关组件的信息。组件的state可以随着时间而改变，并且任何时候改变，组件都会重新渲染。

与state对象类似，属性是普通的JavaScript对象，用于保存有关组件的信息。但是props和state之间有一个关键区别：props传递给组件（类似于函数参数），而状态在组件内管理（类似于在函数中声明的变量）。

你可以将状态视为在给定时间点获取的数据快照，应用程序存储这些数据以控制组件的行为。例如，如果块编辑器设置侧边栏打开，则一条信息将存储在state对象的某个位置。

当信息在单个组件内共享时，我们称之为本地状态。当信息在应用程序内的组件之间共享时，我们称之为应用程序状态。Application State与store的概念密切相关。根据Redux文档：一个store保存着应用程序的整个状态树。更改其内部状态的唯一方法是在其上分派一个操作。因此，Redux将应用程序状态存储在单个不可变对象树（即存储）中。对象树只能通过使用actions和reducers创建新对象来更改。

在WordPress中，商店由WordPress数据模块管理。Gutenberg存储库从头开始构建在几个可重用且独立的模块上，这些模块组合在一起构建了编辑界面。这些模块也称为包。官方文档列出了两种不同类型的包：生产包组成了在浏览器中运行的生产代码。WordPress中有两种类型的生产包：带有样式表的包提供了正确运行的样式表。带有数据存储的包定义了数据存储来处理它们的状态。第三方插件和主题可以使用带有数据存储的包来检索和操作数据。开发包用于开发模式。这些包包括用于linting、测试、构建等的工具。

### WordPress数据存储

WordPress数据模块建立在Redux之上，并共享三个Redux核心原则，尽管有一些关键区别。Info Redux是JavaScript应用程序的状态管理器。Redux的工作方式总结为三个基本原则：单一事实来源：应用程序的全局状态存储在单个存储中的对象树中。状态是只读的：改变状态的唯一方法是发出一个动作，一个描述发生了什么的对象。使用纯函数进行更改：要指定状态树如何通过操作进行转换，您可以编写纯reducer。

官方文档提供了以下定义：WordPress的数据模块用作管理插件和WordPress本身的应用程序状态的中心，提供工具来管理不同模块内和模块之间的数据。它被设计为一种用于组织和共享数据的模块化模式：简单到足以满足小型插件的需求，同时可扩展以服务于复杂的单页应用程序的需求。

默认情况下，Gutenberg在应用程序状态中注册多个数据存储。这些商店中的每一个都有特定的名称和用途：core: WordPress核心数据 core/annotations:注释 core/blocks:区块类型数据 core/block-editor:区块编辑器的数据 core/editor:后编辑的数据 core/edit-post:编辑器的UI数据 core/notices:通知数据 core/nux:NUX（新用户体验）数据 core/viewport:视口数据 通过这些商店，你将能够访问一大堆数据：与当前文章相关的数据，例如文章标题、摘录、类别和标签、区块等。与用户界面相关的数据，即开关是打开还是关闭。与整个WordPress安装相关的数据，例如注册分类法、文章类型、博客标题、作者等。

这些存储存在于全局wp对象中。要访问商店的状态，你将使用select函数。要查看它是如何工作的，请创建一个新文章或页面并启动浏览器的检查器。找到控制台并输入以下代码行：wp.data.select(“core”) 结果将是一个对象，其中包含可用于从core数据存储中获取数据的函数列表。这些函数称为选择器并充当访问状态值的接口。

### 如何访问文章数据

你现在应该对如何访问数据有了基本的了解。现在我们将仔细研究一个特定的选择器getEntityRecords函数，它是提供对post数据的访问权限的选择器。在块编辑器中，右键单击并选择Inspect。在控制台选项卡中，复制并粘贴以下行：wp.data.select(“core”).getEntityRecords(‘postType’, ‘post’) 这会向Rest API发送请求，并返回与上次发布的博客文章相对应的记录数组。

getEntityRecords返回文章列表 Info 请注意，第一次将请求发送到Rest API时，响应将一直持续为null到请求完成。所以，如果你得到null了，不用担心，然后再试一次。getEntityRecords接受三个参数：kind 字符串：实体类型（即postType）。name 字符串：实体名称（即post）。query ?Object：可选术语查询（即{author: 0}）。你可以使用arguments对象构建更具体的请求。例如，你可以决定响应应该只包含指定类别的文章：wp.data.select(“core”).getEntityRecords(‘postType’, ‘post’, {categories: 3}) 你还可以仅请求给定作者的文章：wp.data.select(“core”).getEntityRecords(‘postType’, ‘post’, {author: 2}) 如果单击返回的任何记录getEntityRecords，你将获得所选记录的属性列表：带有getEntityRecords的示例API请求 如果你想让响应包含特色图片，则需要在之前的请求中添加一个附加参数：wp.data.select(“core”).getEntityRecords(‘postType’, ‘post’, {author: 2, _embed: true}) getEntityRecords响应中的特色图像详细信息 现在你应该对如何访问WordPress数据存储和检索文章详细信息有了更好的了解。有关getEntityRecords选择器的详细视图，另请参阅使用getEntityRecords在Gutenberg中请求数据。

### 如何创建动态区块：示例项目

在我们长期的理论前提之后，我们可以继续练习并使用我们在之前的区块开发教程中介绍的工具创建一个动态区块。在那篇文章中，我们讨论了：如何设置WordPress开发环境 什么是区块脚手架 如何构建静态古腾堡区块 这就是为什么我们不会在本文中深入讨论这些主题，但请随时参考我们之前的指南以获取任何其他信息，或者只是为了复习。

设置JavaScript开发环境 让我们从设置JavaScript开发环境开始。安装或更新Node.js 首先，安装或更新Node.js。完成后，启动命令行工具并运行以下命令：node -v 你应该看到您的节点版本。设置您的开发环境 接下来，您需要一个WordPress开发环境。在开发环境中创建自定义站点 但是您仍然可以自由选择任何您喜欢的WordPress本地开发环境，例如MAMP或XAMPP，甚至是官方的wp-env解决方案。设置你的块插件 您现在需要的是一个入门区块插件。为了避免手动配置的所有麻烦，WordPress核心开发团队发布了@wordpress/create-block工具，这是用于创建Gutenberg区块的官方零配置工具。我们在上一篇文章@wordpress/create-block中进行了深入介绍，因此在这里我们可以立即开始设置。在命令行工具中，导航到/wp-content/plugins文件夹：Mac OS文件夹中的新终端 在那里，运行以下命令：npx @wordpress/create-block 您现在已准备好安装该@wordpress/create-block软件包：安装@wordpress/create-block package 要确认，请键入y并按Enter。这会以交互模式生成插件的PHP、SCSS和JS文件。以下是我们将在示例中使用的详细信息。随意根据您的喜好更改这些详细信息：用于识别的区块的slug（也是插件和输出文件夹名称）：author-plugin 区块名称的内部命名空间（对您的产品来说是唯一的）：author-box 区块的显示标题：Author box 您的区块的简短描述（可选）：An example block for readers 破折号使您更容易识别您的区块（可选）：businessperson 帮助用户浏览和发现您的区块的类别名称：widgets 插件作者的名字（可选）。可以使用逗号列出多个作者：your name 插件许可证的简称（可选）：– 许可证全文的链接（可选）：– 插件当前版本号：0.1.0 点击回车后，它会下载并配置插件。安装区块插件 该过程可能需要几分钟。完成后，您应该会看到以下屏幕：区块在插件文件夹中引导 您将看到可以从插件目录中运行的命令列表：$ npm start– 开始构建以进行开发。$ npm run build– 构建生产代码。$ npm run format– 格式化文件。$ npm run lint:css– Lint CSS文件。$ npm run lint:js– Lint JavaScript文件。$ npm run packages-update– 将WordPress软件包更新到最新版本。好的，现在使用以下命令移动到插件目录：cd author-plugin 并开始您的开发构建：npm start 接下来，导航到WordPress仪表盘中的插件屏幕并启用Author box插件：区块插件列在插件管理页面中 现在您可以检查插件是否正常工作。创建一个新文章并开始输入/以启动快速插入器：快速插入器中的区块项目 您还可以在Widgets类别下的块插入器中找到Author box区块。选择区块以将其添加到编辑器画布：WordPress区块插入器 你完成了。现在保存文章并预览页面以检查块是否正确显示。区块脚手架 我们在上一篇文章中介绍了区块脚手架。因此，在这里我们将只提供文件的快速概述。根文件夹根文件夹是你可以找到主要PHP文件和几个子文件夹的地方。author-plugin.php默认情况下，@wordpress/create-block包提供以下PHP文件：/** * Plugin Name: Author box * Description: An example block for readers * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: Carlo * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: author-plugin * * @package author-box *//** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes，它注册了所有资产，所以它们可以通过区块编辑器在相应的上下文中排队。 * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */function author_box_author_plugin_block_init() { register_block_type( __DIR__ . ‘/build’ ); } add_action( ‘init’, ‘author_box_author_plugin_block_init’ ); 在标题中，你会注意到我们在设置时输入的详细信息。使用静态区块，大部分时间你将处理位于src文件夹中的JavaScript文件。使用动态区块，你将编写PHP代码以在前端显示区块内容。src文件夹 src文件夹是你的开发文件夹。在这里，你将找到以下文件：block.json index.js edit.js save.js editor.scss style.scss block.json block.json是你的元数据文件。@wordpress/create-block生成以下block.json文件：{ “$schema”: “https://schemas.wp.org/trunk/block.json”， “apiVersion”: 2， “name”: “author-box/author-plugin”， “version”: “0.1.0”， “title”: “Author box”， “category”: “widgets”， “icon”: “businessperson”， “description”: “An example block for Kinsta readers”， “supports”: { “html”: false }， “textdomain”: “author-plugin”， “editorScript”: “file:./index.js”， “editorStyle”: “file:./index.css”， “style”: “file:./style-index.css” } 要更详细地了解block.json文件，请参阅我们之前的博客文章。index.js index.js文件是你客户端注册块类型的地方：import { registerBlockType } from ‘@wordpress/blocks’；import ‘./style.scss’；import Edit from ‘./edit’；import save from ‘./save’；registerBlockType(‘author-box/author-plugin’， { edit: Edit， save: save } )；edit.js edit.js文件用于构建在编辑器中呈现的块界面：import { __ } from ‘@wordpress/i18n’；import { useBlockProps } from ‘@wordpress/block-editor’；import ‘./editor.scss’；export default function Edit() { return ( { __(‘Author box – hello from the editor!’， ‘author-plugin’ ) } )；save.js save.js文件包含构建要保存到数据库中的块内容的脚本。我们不会在本教程中使用此文件：import { __ } from ‘@wordpress/i18n’；import { useBlockProps }