使用WordPress区块绑定API为您的区块提供动力

在 WordPress 区块编辑器中显示自定义数据并非易事。它需要构建一个自定义块，以便从自定义字段或其他来源获取数据。

这是一项繁重的工作，一些开发人员往往力不从心。在某些情况下，这还意味着要创建重复的功能。例如，考虑在文本标题中显示自定义字段数据。难道不需要创建一个全新的区块就能实现吗？

现在终于可以了。WordPress 6.5中的区块绑定API提供了一种本地解决方案。它允许您将数据源绑定到所选的 WordPress 核心区块，使您能够在更短的时间内构建动态 WordPress 网站。它还为块主题带来了新的功能。

本文将向您介绍区块绑定 API，通过一个简单的演示向您展示它是如何工作的，并探讨随着 API 的发展，它的未来将如何。

为什么说区块绑定API是改变游戏规则的工具？

多年来，自定义字段一直是 WordPress 核心的一部分。它们为静态文章带来了动态数据，并为开发人员提供了更多自定义选项。然而，使用自定义字段的过程非常繁琐。

您必须使用 register_meta() 函数或安装插件来注册和配置新字段。这只是第一步。在网站上显示这些数据是另一项挑战。

文章的所有自定义字段数据都保存为文章元数据。但是，没有直接显示结果的方法。这样做需要插件和/或在主题中添加代码。这不仅增加了开发人员的工作难度，也是另一项需要管理的技术债务。

区块编辑器和区块主题的引入也无济于事。自定义字段数据无法在 WordPress 附带的任何核心区块中显示，同样的限制也适用于区块主题。这可能是一些开发人员坚持使用经典编辑器和/或经典主题的重要原因。

区块绑定 API 为 WordPress 带来了这一功能。最后，您不需要插件来帮助您显示数据。它将数据源与按钮、标题、图片和段落等特定区块绑定，为区块主题和区块编辑器开辟了一个自定义选项的新天地。

它并不能完全复制编写 PHP 或使用自定义字段插件的功能。不过，这是朝正确方向迈出的一步。在某些情况下，它可能就是你所需要的全部。

区块绑定API的一个简单用例

区块绑定 API 在现实世界中是如何工作的？我们整理了一个简单的示例，说明它如何发挥作用。

在我们深入探讨之前，先来看看我们的项目大纲：

• 安装最新版本的 WordPress 并使用默认主题 Twenty Twenty-Four。
• 注册几个自定义字段：
  • Quote：我们希望在每个页面上突出显示的名言，与段落区块绑定。
  • Photo：每页不同照片的 URL，绑定到图片块。
• 最后，编辑主题的页面模板，添加获取这些自定义字段值的区块。

现在我们有了计划，让我们将 WordPress 区块绑定 API 付诸实施。

在区块编辑器中启用自定义字段

WordPress 默认隐藏自定义字段，因此第一步是在区块编辑器中启用自定义字段。

要启用自定义字段，请在区块编辑器中打开选项菜单（⋮ 图标）。然后单击“首选项”。

接下来，点击自定义字段切换按钮，在编辑器中显示自定义字段。单击“显示并重新载入页面”按钮保存更改。

在区块编辑器中启用自定义字段

注册自定义字段

要注册自定义字段，请打开主题的 functions.php 文件。然后添加以下代码：

// Register custom fields for pages in WordPress using register_meta()
function wbolt_register_custom_meta_fields_for_pages() {
// Register the text field "wbolt_famous_quote" for pages
register_meta('post', 'wbolt_famous_quote', array(
'type' => 'string',  // Text field
'single' => true,    // Single value for the field
'sanitize_callback' => 'wp_strip_all_tags',  // Sanitize the input
'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
)); 
// Register the image field "wbolt_photo" for pages
register_meta('post', 'wbolt_photo', array(
'type' => 'string',  // Can store the URL or attachment ID as a string
'single' => true,    // Single value for the field
'sanitize_callback' => 'esc_url_raw',  // Sanitize the input as a URL
'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
));
}
add_action('init', 'wbolt_register_custom_meta_fields_for_pages');

请注意每个字段的标题，因为下一步我们会用到它们：

• wbolt_famous_quote
• wbolt_photo

您可以根据 WordPress register_meta() 文档进一步自定义这些字段。

我们还需要注意的是，你可以通过自定义插件来注册这些字段。这样做的好处是，即使更换了主题，这些字段也能继续使用。

在页面中添加自定义字段值

接下来，按照以下步骤在页面中添加自定义字段值：

1. 导航至“页面”>“所有页面”，然后选择页面。
2. 滚动到页面底部，找到自定义字段面板。单击第一个字段下方的输入新字段按钮。在左侧栏中添加 wbolt_famous_quote。然后，在右侧添加我们引用的内容：The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt
3. 接下来，单击“添加自定义字段”按钮，添加 wbolt_photo 字段。在右侧添加我们要使用的图片的 URL。

在 WordPress 区块编辑器中添加自定义字段

现在，我们可以保存页面，并对网站上的其他页面重复这一过程。

将自定义字段数据绑定到区块

我们希望在页面上显示数据，因此需要在网站编辑器中编辑主题的页面模板。具体操作如下

导航至外观 > 编辑器，然后点击左侧栏中的模板链接。找到页面模板，然后点击在编辑器中打开。

在 WordPress 网站编辑器中找到页面模板

首先，我们需要选择一个位置来显示自定义字段数据。让我们在每个页面的底部添加一个区域。

我们将添加一个组区块，并在其中插入一个列区块。左栏包含一个图片区块（用于显示我们的照片），右栏包含一个段落区块（用于显示我们的引用）。

我们将组区块重命名为自定义字段数据，以备将来参考。这样，如果我们以后要再次编辑，就可以更容易地找到它。

添加显示自定义字段数据的区块

区块绑定 API 还没有用于显示值的可视化界面（下文将详细介绍）。因此，我们需要编辑图片和段落区块的代码。这样我们就可以将自定义数据绑定到它们上。

点击网站编辑器右上方的选项菜单（⋮ 图标）。选择代码编辑器链接。这将打开代码编辑器。

查找我们刚刚添加的组区块。代码以：

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

我们还在下图中突出显示了相应的代码：

在代码编辑器中查看我们的组区块

接下来，找到该组中的图像和段落区块。它们的默认代码如下：

Image:

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

Paragraph:

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

我们可以编辑这些区块，将它们与自定义字段绑定：

Image:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"wbolt_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->

Note the key value is set to our wbolt_photo custom field.

注意 key 已设置为 wbolt_photo 自定义字段。

Paragraph:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"wbolt_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

在本例中， key 值设置为我们的 wbolt_famous_quote 自定义字段。

保存更改并退出代码编辑器。

点击图片和段落块。WordPress 会用紫色勾勒出每个区块，以表示它绑定到了一个数据源。此外，右侧面板还将显示一个属性区域，其中包含更多详细信息。

WordPress 表示图像区块与数据源绑定

我们的段落区块也与数据源绑定

注意：在编辑页面时，您看不到这些区块。不过，它们会显示在网站的前端。

最后一步是访问网站前端。我们应该可以在任何有自定义字段值的页面上看到我们的图片和引用。

我们的自定义字段数据显示在页面底部

绑定区块的其他可能性

我们创建了一个将区块绑定到数据源的基本示例。不过，我们还可以通过一些其他方法来增强我们的项目，其中包括

• 添加 ALT 属性：我们可以注册另一个自定义字段，为照片定义 ALT 属性。这将使该功能更易于使用。例如，我们可以将一个新字段 wbolt_photoo_alt 与 alt 属性绑定，如下所示：

• <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"wbolt_photo"}},"alt":{"source":"namespace/slug","args":{"key":"wbolt_photo_alt"}}}}} -->
  <figure class="wp-block-image"><img src="" alt=""/></figure>
  <!-- /wp:image -->

• 使用自定义数据源：自定义字段可以很好地满足我们的要求。不过，我们也可以选择从自定义数据源获取数据。可能的来源包括 API、自定义数据库表、插件/主题选项、网站数据和分类法。

我们的想法是考虑如何将自定义数据纳入网站。然后，制定一个易于维护的实施计划。区块绑定 API 提供了大量这样做的选项。

进一步使用区块绑定API

区块绑定 API 并非成品。它将随着WordPress的每一个新版本而不断发展。

例如，WordPress 6.7 中就计划包含几项改进：

• 将区块绑定到可用数据源的默认用户界面。
• 便于识别的文章元标签。
• 与自定义文章类型主题模板兼容。
• 用于确定谁可以编辑块绑定的默认权限。
• 多项底层技术改进。

请继续关注使 API 更易使用、功能更强大的新功能。

您还可以安装 Gutenberg 插件，以便在功能合并到 WordPress 核心之前尽早使用它们。我们建议在暂存或本地环境中使用。

小结

区块绑定 API 代表着我们在 WordPress 中处理自定义数据方式的转变。在许多情况下，它取代了对插件或自定义区块的需求。它为 WordPress 区块和块主题带来了更大的灵活性。

将它添加到您的工作流程中可以减少您的开发时间。作为一项本地功能，它还能比依赖插件提高性能。

这些都是现在就开始使用它的重要原因。它的未来看起来更加光明！

我们才刚刚开始探索本文所涵盖的各种可能性。通过探索更多有关连接自定义字段、使用自定义绑定源以及学习如何在编辑器中获取和设置区块绑定值的内容，深入了解区块绑定 API。