同步模式中覆盖的介绍

发布于 2024年6月18日

WordPress不断进化，推出新功能，丰富了平台对用户和开发者的能力。WordPress 6.6 新增的覆盖功能是同步模式，允许用户在不改变图案底层布局或设计的情况下，进行内容特定的更改。该功能可用于创建精心策划的编辑体验、改进工作流程、强制设计一致性等。

本文将探讨同步模式中的覆盖是什么、它们的工作原理，以及该功能路线图上可能的改进。

那么，什么是覆盖？

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

每张卡牌都包含相同的方块组合，但内容不同。用户只能修改（或覆盖）图案中特定方块的内容，或将其重置为原始方块。禁止访问屏蔽设置和样式。

虽然从图片上看不明显，但两张卡的动力是相同的同步（或同步）模式。模式中每个可编辑内容都是覆盖。

在大层面上，模式覆盖必须满足以下要求：

图案设计必须同步。
用户必须能够编辑单个图案实例的内容，而不改变整个图案的布局或设计。
用户对内容的修改必须与同步模式“连接”。

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

急着开始创建覆盖？跳到前面。

同步模式

同步模式是WordPress已有一段时间的功能，最初被称为可重复使用块，直到WordPress 6.3。你在编辑器中通过分组块并配置它们的设置和样式来创建这些图案。设计可以保存到数据库中，且每当你进行额外修改时，所有模式实例都会保持同步。

这种模式有助于保持网站设计和内容的一致性。例如，如果你在多个页面上有号召行动（CTA），更新包含该CTA的同步图案，会在每个使用该页面发生变化。

虽然同步图案有许多应用，但也有很多情况下你可能希望修改图案的布局和设计，而内容可以由用户自行编辑。

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

但在那之前，我们先解决第二个要求——使用仅内容编辑来覆盖模式。

内容编辑

内容编辑于 WordPress 6.1 中引入，采用一种称为“contentOnly”的锁定机制，确保只有块或图案内嵌套的文本和媒体可以编辑，保持整体布局和设计结构不变。

该功能由列、覆盖和组等块支持，可以隐藏列表视图中无文本或媒体内容的块类型，并禁用设置和样式的检查控制。这简化了编辑过程，保持了设计的一致性。

要启用块内仅内容编辑，将属性设置为。编辑器中没有用户界面，因此你必须手动将属性添加到块标记中。虽然这通常在模式和模板文件中完成，但你可以通过切换到代码编辑器视图并添加到任意容器块来测试。试试这个WordPress Playground演示。在演示内容中将该属性应用于堆栈块，应当得到以下结果。templateLockcontentOnly"templateLock": "contentOnly"

注意区块检查器里的所有设置都消失了。用户现在只能编辑堆栈中标题、段落和按钮块的内容。

第二个要求：确认。

你可能会好奇，为什么覆盖功能直到 WordPress 6.6 版本才被引入，尽管同步模式和内容编辑已经存在多年。

缺失的部分是能够“连接”用户修改与同步图案的能力。块绑定API现在实现了这一点。

块绑定API

WordPress 6.6引入的块绑定API使开发者能够将块属性连接到各种数据源，如自定义字段（帖子元数据）、网站数据、用户数据等。

该 API 对于实现模式覆盖至关重要，因为它将用户的修改与相应的同步模式连接起来。你不需要知道如何使用块绑定API来实现覆盖，但它有助于说明它们为何与该API及当前限制紧密相连。

让我们来看一个简单的例子，说明这种做法在实际中是如何运作的。

再用卡片设计，假设你想把自定义字段连接到标题、段落和按钮块。这些信息不会作为区块内容存储，而是作为帖子元数据存储，并显示在每个区块中。

首先，为每个应连接到帖子元数据的块属性注册自定义字段。在下面的代码中，自定义字段、、和注册用于使用card_headercard_descriptioncard_button_textcard_button_urlregister_meta()函数，每个函数都默认值。

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_resttrue

接下来，利用属性将自定义元数据连接到块。例如，Heading块的属性可以是这样的：metadata

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

以下是房产的简要概述：

metadata：包含关于该块元数据的对象。
metadata：包含一个或多个方块绑定的对象。
content： block 属性绑定到自定义字段，具体字段因区块而异。
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 -->

注意，绑定目标是，这是航向块的属性。在对段落和按钮块重复此过程时，相应地更新属性。contentcontent

以下是截至 WordPress 6.6 Block Bindings API 目前支持的块和属性：

支持的块	支持属性
图片	`url`, ,`alttitle`
标题	`content`
段落	`content`
按钮	`url`,, ,`textlinkTargetrel`

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

下面的截图展示了卡片设计，每个方块都绑定在注册的自定义字段上。虽然由于默认内容，界面看起来基本相同，但请注意块检查器中新值和绑定面板。card_heading

想了解更多关于块绑定 API 的信息，请查看这些文章以及开发者博客上的更多内容。

这些资源将帮助你扎实地理解如何在WordPress项目中实现和利用Block Bindings API。

把一切整合起来

既然我们已经涵盖了同步图案、仅内容编辑和块绑定，现在是时候创建几个模式覆盖了。

再说一次，我们来看卡片设计。

你可以通过这个WordPress Playground演示，跟随下一步操作。

在这个例子中，用户应该能够修改头部、描述和按钮。其他所有内容都应该固定，并且在每个模式实例间保持同步。

第一步是将设计变成同步图案。选择外层堆栈块，然后在方块工具栏的选项菜单中选择创建图案。

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

方块工具栏现在会有一个紫色图标，方块的边框将由蓝色改为紫色。这种颜色变化表明内容已经同步。请注意，你现在不能直接编辑方块的内容了。

从块子工具栏选择“编辑原始”，以编辑你新同步图案的内容。这样做后，图案会在专用界面中打开。

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

首先选择标题块，并在块检测器中打开高级面板。你会看到一个按钮，上面写着“启用覆盖”。

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

模态会提示你输入覆盖的唯一名称。这一要求使 WordPress 能够将用户创建的内容映射到图案中的正确区块。

随你喜欢的名字。下面的图片用“卡片标题”来简化了概念。

对段落和按钮块重复这个过程。你的图案现在应该和下面展示的类似。请注意列表视图中的命名块和模式检查器右侧定义的覆盖。

继续之前，切换到代码编辑器视图，检查区块标记。你会看到每个块的绑定源，覆盖设置为。这就是块绑定API的实际应用。core/pattern-overrides

这里有一个段落块应该是什么样子的示例。

<!-- 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 -->

保存图纸，然后返回包含卡片图样的帖子。你会在“列”块的第一列看到它。将相同的模式插入第二列，并修改标题，看看覆盖效果如何。编辑体验应与本文中仅内容编辑示例相同。

接下来，修改同步模式，看看它如何更新每个实例，同时保留内容变化。试着加一些覆盖，比如卡片顶部的图片。玩得开心点，享受这个功能吧！

到现在为止，你应该已经开始看到模式覆盖的力量了。只需几次点击，你就能打造高度策划的编辑体验，同时完全掌控每个图案的设计美学。而这仅仅是个开始。

下一步

同步模式的覆盖功能将很快随着 WordPress 6.6 的发布而推出。不过，会有一些限制，包括：

支持的块和属性数量有限，目前没有自定义块的选择加入机制。
同步图案只存储在数据库中，不能打包成主题中的图案文件。

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

在主题文件中启用同步模式则稍微复杂一些。本期有早期探索内容可供回顾。截至本文发布之日，贡献者们已开始起草将包含在 WordPress 6.7 中的目标。分享你对这个问题的看法。

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

云策 WordPress 开发者社区

社区新闻