同步模式中的覆盖功能简介

查看官方原文 ↗ 发布于 2024年6月18日

WordPress 不断发展，不断引入新功能，为用户和开发者扩展平台能力。WordPress 6.6 新引入了同步模式中的覆盖功能，它允许用户进行特定内容的更改，而无需更改模式的基础布局或设计。此功能可用于创建定制编辑体验、改进工作流程、确保设计一致性等。

本文将探讨同步模式中的覆盖功能是什么、它们如何工作，以及此功能路线图上可能的增强。

那么，什么是覆盖？

请看下图。编辑器显示了一个相对简单的卡片设计，但请特别注意块工具栏和右侧的检查器。

每张卡片都包含打包在同一个模式中的相同区块集合，但内容不同。用户只能修改（或覆盖）模式内特定区块的内容，或将其重置为原始内容。区块设置和样式的访问权限被禁用。

虽然从图片中不明显，但两张卡片都由同一个同步模式驱动。模式内每个可编辑的内容片段都是一个覆盖。

从高层次来看，要使模式覆盖工作，必须满足以下要求：

模式设计必须是同步的。
用户必须能够编辑单个模式实例的内容，而无需更改整个模式的布局或设计。
用户对内容的修改必须“连接”到同步模式。

在讨论如何在同步模式中创建覆盖之前，让我们快速回顾一下什么是同步模式，并探讨支持后两个要求的关键功能：仅内容编辑和区块绑定 API。

渴望开始创建覆盖？跳转到此处。

同步模式

同步模式作为 WordPress 的一项功能已有一段时间，在 WordPress 6.3 之前最初被称为可重用区块。您可以在编辑器中通过分组区块并配置其设置和样式来创建这些模式。然后可以将设计保存到数据库，并且每当您进行额外更改时，所有模式实例都会保持同步。

这种类型的模式有助于保持您网站的设计和内容一致性。例如，如果您在多个页面上有号召性用语（CTA），更新包含此 CTA 的同步模式将更改使用它的每个页面。

虽然同步模式有很多应用场景，但在许多情况下，您可能希望模式的布局和设计是固定的，但内容可由用户编辑。

查看上面视频中的卡片示例，您可能希望用户能够编辑标题、段落和按钮区块的内容。

但在我们实现之前，让我们使用仅内容编辑来解决模式覆盖的第二个要求。

仅内容编辑

在 WordPress 6.1 中引入的仅内容编辑使用一种称为“contentOnly”的锁定机制，以确保只能编辑区块或模式内的嵌套文本和媒体，从而保持整体布局和设计结构不变。

此功能由列、封面和组等区块支持，它从列表视图中隐藏没有文本或媒体内容的区块类型，并禁用设置和样式的检查器控件。这简化了编辑过程并保持了设计一致性。

要在区块上启用仅内容编辑，请将 templateLock 属性设置为 contentOnly。编辑器中没有此功能的用户界面，因此您必须手动将该属性添加到区块标记中。虽然这通常在模式和模板文件中完成，但您可以通过切换到代码编辑器视图并向任何容器区块添加 "templateLock": "contentOnly" 来测试它。使用此 WordPress Playground 演示进行尝试。将属性应用于演示内容中的 Stack 区块应产生以下结果。

请注意区块检查器中的所有设置是如何消失的。用户现在只能编辑 Stack 内标题、段落和按钮区块的内容。

第二个要求：已满足。

您可能想知道，为什么同步模式和仅内容编辑已经存在多年，但覆盖功能直到 WordPress 6.6 版本才被引入。

缺失的部分是能够将用户修改“连接”到同步模式。区块绑定 API 现已使之成为可能。

区块绑定 API

在 WordPress 6.6 中引入的区块绑定 API，使开发人员能够将区块属性连接到各种数据源，例如自定义字段（文章元数据）、站点数据、用户数据等。

此 API 对于启用模式覆盖至关重要，因为它将用户的修改与相应的同步模式连接起来。您不需要知道如何使用区块绑定 API 来实现覆盖，但它有助于说明为什么它们本质上与此 API 以及当前限制相关联。

让我们看一个简单的示例，了解它在实践中如何工作。

再次使用卡片设计，假设您希望将自定义字段连接到标题、段落和按钮区块。此信息将作为文章元数据存储并在每个区块中显示，而不是存储为区块内容。

首先，为应连接到文章元数据的每个区块属性注册自定义字段。在下面的代码中，使用 register_meta() 函数为文章注册了自定义字段 card_header、card_description、card_button_text 和 card_button_url，并为每个字段提供了默认值。

function theme_slug_register_meta() {
	register_meta(
		'post',
		'card_heading',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => __( 'Card heading', 'theme-slug' )
		)
	);

	register_meta(
		'post',
		'card_description',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => __( 'Card description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'theme-slug' )
		)
	);

	register_meta(
		'post',
		'card_button_text',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags',
			'default'           => __( 'Learn more', 'theme-slug' )
		)
	);

	register_meta(
		'post',
		'card_button_url',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'esc_url_raw',
			'default'           => 'https://wordpress.org'
		)
	);
}
add_action( 'init', 'theme_slug_register_meta' );

此代码注册自定义字段并使它们在 REST API 中可用，从而允许它们绑定到适当的区块属性。使用区块绑定时，show_in_rest 参数必须设置为 true。

接下来，使用 metadata 属性将自定义元数据连接到区块。例如，标题区块的属性应如下所示：

"metadata": {
    "bindings": {
        "content": {
            "source": "core/post-meta",
            "args": {
                "key": "card_heading"
            }
        }
    }
}

以下是属性的快速概述：

metadata：包含区块元数据的对象。
bindings：包含区块一个或多个绑定的对象。
content：要绑定到自定义字段的区块属性，因区块而异。
source：绑定源。对于自定义字段，源是 core/post-meta。
args：传递给绑定源参数的对象。对于自定义字段，将 key 属性设置为注册的元键名称。

目前，编辑器没有用于将绑定应用到区块的用户界面。这些属性必须手动添加到区块标记中。切换到代码编辑器视图并将此属性添加到标题区块。完整的标记应如下所示：

<!-- wp:heading {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"card_heading"}}}}} -->
<h2 class="wp-block-heading">Card heading</h2>
<!-- /wp:heading -->

请注意，绑定目标是 content，即标题区块的 content 属性。对段落和按钮区块重复此过程时，请相应地更新属性。

以下是截至 WordPress 6.6 区块绑定 API 当前支持的区块和属性：

支持的区块	支持的属性
Image	`url`, `alt`, `title`
Heading	`content`
Paragraph	`content`
Button	`url`,`text`, `linkTarget`, `rel`

由于模式覆盖本质上是区块绑定，因此支持覆盖的区块与支持绑定的区块相同。随着更多区块与区块绑定 API 兼容，它们很可能也会变得可覆盖。

下图显示了每个区块都绑定到已注册自定义字段的卡片设计。虽然由于默认内容看起来大致相同，但请注意 card_heading 的新值以及区块检查器中的绑定面板。

要了解有关区块绑定 API 的更多信息，请查看开发者博客上的这些文章。

整合所有内容

既然我们已经介绍了同步模式、仅内容编辑和区块绑定，现在该创建一些模式覆盖了。

再次看一下卡片设计。

在此示例中，用户应该能够修改标题、描述和按钮。其他所有内容都应该是固定的，并在模式的每个实例中保持同步。

第一步是将设计转换为同步模式。选择外层的 Stack 区块，然后从块工具栏的选项菜单中选择创建模式。

在出现的模态框中，为模式命名并确保选中同步开关。

块工具栏现在将有一个紫色图标，并且区块将以紫色而不是蓝色勾勒。这种颜色变化表明内容是同步的。请注意，您无法再直接编辑区块的内容。

从块工具栏中选择编辑原始内容以编辑新同步模式的内容。这样做将在专用屏幕中打开该模式。

下一步是向标题、段落和按钮区块添加覆盖。由于这三个区块都支持区块绑定，因此它们也支持覆盖。

首先选择标题区块，然后在区块检查器中打开高级面板。您将看到一个显示启用覆盖的按钮。

点击启用覆盖，将打开一个模态框。

模态框将提示您为覆盖输入一个唯一的名称。此要求使 WordPress 能够将用户创建的内容映射到模式中的正确区块。

选择您想要的任何名称。下图保持简单，使用名称“Card heading”。

对段落和按钮区块重复此过程。您的模式现在应该类似于下图所示。请注意列表视图中的命名区块以及模式检查器右侧定义的覆盖。

在继续之前，切换到代码编辑器视图并检查区块标记。您将看到每个具有覆盖的区块的绑定源设置为 core/pattern-overrides。这就是区块绑定 API 在起作用。

以下是段落区块应有的外观示例。

<!-- wp:paragraph {"metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"Card Description"},"fontSize":"small"} -->
<p class="has-small-font-size">Card description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph -->

保存模式并导航回包含卡片模式的文章。您将在 Columns 区块的第一列中看到它。将相同的模式插入第二列并修改标题以查看覆盖如何工作。编辑体验应与本文中的仅内容编辑示例相同。

接下来，修改同步模式以查看它如何更新每个实例，同时保留您的内容更改。尝试添加额外的覆盖，例如卡片顶部的图像。尝试使用此功能！

到现在为止，您应该开始看到模式覆盖的强大功能。只需点击几下，您就可以创建高度定制的编辑体验，同时完全控制每个模式的设计美感。而这仅仅是个开始。

后续步骤

同步模式的覆盖功能将随 WordPress 6.6 的发布而很快可用。但是，将存在一些限制，包括：

支持的区块和属性数量有限，并且目前没有针对自定义区块的选择加入机制。
同步模式仅存储在数据库中，无法打包为主题中的模式文件。

未来的版本将支持更多核心区块和属性。查看关于自定义区块选择加入机制的持续讨论。您可以在 GitHub 上的官方跟踪问题中关注进展。

在主题文件中启用同步模式稍微复杂一些。您可以查看此问题中的早期探索。截至本文发布之日，贡献者已开始起草 WordPress 6.7 中将包含的目标。请在相关问题上分享您的想法。

尽管存在这些限制，您仍然可以完成相当多的工作。您应该开始在 WordPress 6.6 中探索模式覆盖，因为它们将从根本上改变许多网站所有者在 WordPress 中管理内容的方式。

云策 WordPress 开发者社区

WordPress 社区新闻