为 WordPress 创建自定义 Gutenberg 块

为 WordPress 创建自定义 Gutenberg 块并不难。 事实上，只需一点代码，您就可以创建自己的自定义块，而无需使用插件。 Gutenberg 是 WordPress 的新编辑器，可让您为内容创建自定义块。 块是您在古腾堡中的内容的构建块。 它们可用于添加文本、图像、视频等。 要创建自定义块，您需要使用文本编辑器（如 WordPress 代码编辑器）或插件（如 Block Lab）。 拥有文本编辑器后，您可以在主题或插件目录中创建一个新文件。 您需要做的第一件事是创建一个块类型。 块类型是定义块行为方式的设置集合。 为此，您需要使用 register_block_type 函数。 一旦你有了块类型，你就可以在 WordPress 中注册它。 此函数将采用两个参数：块类型的名称和包含块设置的对象。 注册块类型后，您可以开始向其中添加字段。 字段是控制块外观和行为的设置。 要将字段添加到您的块类型，您需要使用 add_field 函数。 将所需的所有字段添加到块类型后，您可以将其注册到 WordPress。 就是这样！ 您现在已经为 WordPress 创建了一个自定义 Gutenberg 块。

Gutenberg 块编辑器是 WordPress 5.0 的增强功能之一。 古腾堡编辑器将内容分成块，这些块很容易重新排列。 大多数开发人员将无法创建原生设计的块，因为他们缺乏 React 技能。 WordPress 开发者社区已经通过开发能够满足 React/JavaScript 要求的工具做出回应。 Block Lab 中的 Blocks 分三个阶段创建：在管理员中添加它们，复制和粘贴它们，然后导出它们。 API 也可用于为您的块创建自定义控件。 这可能没什么可看的，但它会让您了解使用自定义 Gutenberg 块可以做什么。

要创建一个块，我们需要创建一个名为 block-notification-bar.php 的新文件，其中包含一个标题（通知栏）和三个字段。 作为对该文件的响应，将出现一条通知消息，指示我们将自定义块模板放置在我们的主题中。 在上传文件之前，请确保它已保存并上传到您的 Web 服务器。 现在已经为我们创建了一个自定义块。 重要的是你实现了那个目标。 如果我们想扩展我们已经创建的内容，我们有很多选择。 图标、按钮以及链接到另一个帖子或页面的功能只是可以添加的一些功能。 所有这些能力都可以通过 Block Lab 以及上面提到的其他插件来实现。

WordPress 自定义块插件

WordPress 有许多很棒的自定义块插件。 每个插件都提供一组不同的功能和选项。 一些自定义块插件允许您为帖子和页面创建自定义块，而其他插件则提供一组您可以使用的预先设计的块。

通过将内容和布局元素添加为块，您可以使用 WordPress 轻松创建帖子和页面。 WordPress 在其默认配置中提供了广泛的块。 但是，您可能想要创建自定义块来完成特定任务。 本教程将引导您完成制作一个完全独特的块的步骤。 第一步是在您的推荐块中插入三个字段。 单击添加字段按钮开始填写第一个字段。 第二步是创建一个块模板，它将准确地确定数据的显示方式。

第三步是通过单击 CSS 选项卡来设置块输出标记的样式。 通过手动上传模板，您可以创建自己的自定义块。 在这种情况下，PHP 是与您的自定义块字段交互的最佳方式。 只需使用上传方法将编辑器模板上传到您的主题。 首先，预览您的自定义块。 在预览 HTML/CSS 之前，您必须提供一些测试数据。 创建一个使用 Gutenberg 块定制的 WordPress 网站。

要搜索块，请在单击添加新块按钮后出现的框中键入其名称或关键字。 您可以通过保存和编辑您的帖子和页面来预览该块。 在我们的测试站点上，您可以看到推荐块的外观。

创建 Gutenberg Block React

有几种方法可以在 React 中创建 Gutenberg 块。 第一种方法是使用 create-guten-block CLI 工具。 这将为您搭建一个新的古腾堡街区。 要使用此方法，您需要在机器上安装 Node.js 和 npm。 一旦你安装了这些依赖项，你可以通过运行以下命令来创建一个新的 Gutenberg 块： create-guten-block my-block 这将创建一个名为 my-block 的新目录，其中包含 Gutenberg 块的所有必要文件。 在 React 中创建 Gutenberg 块的第二种方法是使用 @wordpress/block-editor 包。 该包包含一个名为 createBlock 的辅助函数，可用于创建 Gutenberg 块。 要使用此方法，您需要在项目中安装 @wordpress/block-editor 包。 一旦你安装了这个包，你可以通过运行以下代码来创建一个新的 Gutenberg 块： import { createBlock } from '@wordpress/block-editor'; createBlock('my-block/my-block', { title: '我的块', category: 'common', } ); 这将在 common 类别中创建一个名为 my-block 的新块。 在 React 中创建 Gutenberg 块的第三种方法是使用wp.blocks.createBlock 函数。 此函数是 WordPress JavaScript API 的一部分，可用于创建 Gutenberg 块。 要使用此方法，您需要在项目中包含 wp-api-request 包。 一旦你安装了这个包，你可以通过运行以下代码来创建一个新的 Gutenberg 块： import { wp } from 'wp'; wp.​​blocks.createBlock('my-block/my-block', { title: '我的块', category: 'common', } ); 这将在 common 类别中创建一个名为 my-block 的新块。

在本教程中了解如何为 Gutenberg 编辑器创建自定义块。 您将使用自己创建的插件来完成任务。 尽管默认主题之一可用于创建自定义 Gutenberg 块，但我们必须承认这是可能的。 在本教程中，我们将介绍如何使用 Gutenberg 创建新的自定义块。 此外，我们将根据我们提供的设计偏好自定义前端和编辑器的外观。 如果您不想花费大量时间创建块，您可以简单地添加一个，然后根据您的要求自定义它们。

React 易于在自定义主题中使用

React 是一个优秀的库，用于使用 JavaScript 创建用户界面。 WordPress 一直在使用它来支持新的 Gutenberg 编辑器，以及小部件管理屏幕和网站内容编辑功能的最新更新。 因为 React 已经嵌入在 WordPress 中，所以在自定义主题中使用起来很简单。

Gutenberg 创建自定义按钮块

Gutenberg 创建自定义按钮块是为您的网站创建自定义按钮的非常有用的工具。 使用此工具，您可以轻松创建既醒目又实用的按钮。 这是为您的网站添加个人风格并使其脱颖而出的好方法。

在本教程中，您将学习如何在流行的应用程序中制作您的第一个简单块。 我们的 WordPress @create-block 应用程序是一个官方工具，可以让我们快速生成 Javascript/PHP/CSS 代码。 在交互模式下，您可以通过一系列步骤配置您的模块。 当您刚刚了解古腾堡时，这可能非常有用。 如果您已经搭建了该块，您现在可以通过代码编辑器访问新创建的目录。 块插件结构遵循目前的状态（在编写本教程时）。 我们将详细介绍每个文件及其在本模块中的使用。

命令行标志是为命令行程序指定选项的常用方法。 在使用标志之前，请将标志目录中的值替换为您要使用的值。 将在编辑器中排队或应用的样式表。 插件的基本细节进行了详细讨论。 WordPress 默认显示插件信息。 为了告诉 Git 在创建版本控制项目时要忽略哪些文件，应该包含 Gitignore A. 文件。 存储库包含信息。 Config 允许开发人员在多个项目中保持一致的编码风格。

WordPress 古腾堡插件开发

WordPress Gutenberg 插件是一个由志愿者社区开发的开源项目。 任何人都可以为该项目做出贡献并帮助它变得更好。 该插件不断更新和改进。 如果您是开发人员，您可以通过开发新功能或修复错误来帮助为项目做出贡献。

您可能听说过 Gutenberg（WordPress 块编辑器），但是您如何开始创建自己的插件呢？ 块是使用简单的 WordPress 脚本创建的。 此处创建的 WordPress 插件类型通常是一个块，但它为过程中的其他人提供了一个很好的起点。 创建块脚本可以用作模板来创建您自己的插件。 您可以在 WordPress 前端轻松看到该块，但它具有不同的外观以帮助您在后端习惯它。 该文件必须在资产编译后才能在开发模式下生成。 /node_modules – 这是存储插件的所有 JavaScript 相关参数的文件夹。

可以在此文件中找到包含有用的 Visual Studio Code (VDC) 环境的预设文件。 如果要创建插件，必须确保您位于 WordPress 插件文件夹中。 因此，您将能够查看插件的开发和生产阶段。 在编辑器中打开 /src/save.js 以将保存功能替换为以下内容： BlockText 可以以这种方式输出为字符串。 必须将以下代码添加到插件的根目录才能在自定义块类别中显示您的块。 registerBlockType.js 函数返回您的块类别列表，然后可以使用插件的 registerBlockType.js 函数重新编译。

古腾堡内容编辑

WordPress 用户可以通过基于 React 构建的单页应用程序 (SPA) 创建、编辑和删除内容。 与传统的内容编辑器相比，它提供了更流畅和用户友好的界面。 如果您想要更强大的内容编辑器，古腾堡应用程序不适合您。 如果您喜欢更悠闲的外观，您可以信赖古腾堡。

WordPress 自定义块编辑器

您可以在您想要的任何帖子或页面上使用此块。 在“添加新块”屏幕上，使用搜索框通过键入其名称或关键字来查找您的块。 将块插入内容区域后，您将看到为此自定义块创建的块字段。

本教程将引导您完成在 WordPress 中创建功能齐全的自定义块编辑器实例的过程。 该编辑器将完全构建在称为块编辑器的自定义 WP 管理页面中（以最具创意的方式）。 在我们的 WordPress Plug-A-Thon 中，我们将创建一个编辑器。 我们现在必须使用块编辑器的 React 组件在我们的自定义页面中生成一些 HTML。 作为第三个参数，我们使用脚本依赖项 ($script_asset['dependencies']) 行。 它将确保与 WordPress 相关的脚本不包含在构建的捆绑包中。 我们还必须注册我们的自定义 CSS 样式和 WordPress 默认格式库才能使用它们。

这允许我们使用 JavaScript 在页面的 HTML 中生成块编辑器。 当这个组件被称为 BlockEditor 时，魔法就会发生。 可以在不创建 JS 全局的情况下从 PHP 渲染编辑器。 编辑器的布局是建立在脚手架上的，正如您在此处看到的，除了一些专门的上下文提供程序。 Block EditorProvider 是 WordPress 块编辑器包中最重要的组件。 正如我们之前所解释的，这为全新的块编辑器在块编辑的上下文中提供了一个新的上下文。 它通过订阅提供的注册表（通过 withRegistry Provider HOC）、侦听块更改事件、确定块更改是否保持持久以及在必要时调用 onChange 输入处理程序来完成此操作。

最有趣的组件是 BlockList 组件，它将块列表添加到编辑器中。 值得详细研究这些组件，因为它们是最复杂和最复杂的部分。 要了解有关我们自定义 EditorBlock 组件的更多信息，请参阅以下文章。 Slot/fill 是通过利用我们的 Blockeditor 组件（见上文）在其中公开一个 Fill（Sidebar.InspectorFill）来实现的，我们随后将其导入并渲染到实现中。 因此，React 允许我们将检查组件保留在其 DOM 中，同时将其渲染到单独位置的标记中（例如，在侧边栏中）。 块也可以在 LocalStorage 中的 getdavesbeBlocks 键下找到。

该数据被序列化为块语法格式，这意味着它可以存储在字符串中。 GitHub 已经为自定义功能块编辑器编译了整个代码。 该程序可以免费下载和试用。