WordPress 6.6 即将发布：重点新功能和改进-光子波动网 | 专业WordPress修复服务，全球范围，快速响应

WordPress 6.6 计划于 2024 年 7 月 16 日发布，将优化和增强前几个版本中的多个功能，同时引入许多新功能，进一步推进 WordPress 开发的第 3 阶段。新版本包含了 299 个核心票据、392 项增强功能、462 个漏洞修复，以及 46 项针对块编辑器的可访问性改进。

以下是 WordPress 6.6 的主要新功能和改进：

同步样板覆盖

块绑定 API 的第一次实现是用于连接块属性和自定义字段。在 WordPress 6.6 中，第二次迭代解锁了名为“同步样板覆盖”的同步样板增强功能。

有两种类型的块样板：

同步块样板
标准（未同步）块样板

这两种样板类型的主要区别在于它们如何影响网站上的内容。当你修改同步样板时，网站上所有使用这个样板的地方都会自动更新，就像魔法一样，所有相同的样板实例都会变得一模一样。而标准块样板就不同了，你改一个就只影响那一个，其他的不变，非常个性化。

那么，同步样板覆盖就像是这两者之间的超级英雄。它利用了一个叫做块绑定API的超能力，允许你创建一个在网站上保持统一结构的样板，但同时又很灵活。当你在站点编辑器里调整这个样板的结构或样式时，所有使用了这个样板的实例都会同步更新，但神奇的是，每个实例的内容还是可以独立修改的，不会影响到其他地方。

现在，让我们来看看如何玩转这个样板覆盖的魔法吧！

首先，

你需要一个同步样板。你可以在文章编辑器中从头开始构建它，或在站点编辑器的“样板”部分中找到现有的同步样板。

步骤 1：前往“样板”并复制一个现有的样板，例如 Twenty Twenty-Four 默认主题的英雄样板。

添加名称并将副本设置为同步样板。

步骤 2：导航到“我的样板”部分，找到新的同步样板。在站点编辑器中打开它，并选择需要单独覆盖的所有块。

前往块设置侧边栏并向下滚动到高级部分。有一个“启用覆盖”按钮。

点击按钮后，会提示添加名称并设置样板类型。

步骤 3：对每个需要重写的块重复相同的过程。完成后，创建一个新文章或页面并包含你的自定义样板。

步骤 4：更改块的内容以进行重写并保存文章。最后，在前端检查结果。

这样就完成了。你可以在网站上的任何地方添加任意数量的这些样板，每个新实例都会显示相同的原始内容，但可以进行自定义。

现在，让我们检查这些样板的代码。导航回站点编辑器的“样板”部分。选择“我的样板”并添加你的样板。然后，打开选项菜单并选择代码编辑器以查看样板的代码。

例如，代码应该类似如下：

<div class="wp-block-group">
    <!-- wp:heading {
        "textAlign":"center",
        "level":1,
        "metadata":{
            "bindings":{
                "__default":{
                    "source":"core/pattern-overrides"
                }
            },
        },
        "name":"Hero title"
    },"fontSize":"x-large"} -->
        <h1 class="wp-block-heading has-text-align-center has-x-large-font-size">致力于创新和可持续发展</h1>
    <!-- /wp:heading -->
    ...
</div>

在块分隔符中，你会注意到 metadata.bindings 属性。这使得标题块可以编辑。__default 绑定指示 WordPress 将所有支持的属性连接到特定源，即“core/pattern-overrides”。

同样的属性适用于你需要编辑的所有块。以按钮块为例：

<div class="wp-block-buttons">
    <!-- wp:button {
        "metadata":{
            "bindings":{
                "__default":{
                    "source":"core/pattern-overrides"
                    }
                },
            "name":"Hero button"
            }
        } -->
    <!-- /wp:button -->
    <div class="wp-block-button">
        <a class="wp-block-button__link wp-element-button">关于我们</a>
    </div>
    ...
</div>

现在，返回文章编辑器并切换到代码编辑器。代码应类似如下：

<!-- wp:block {
    "ref":261,
    "content":{
        "Hero title":{
            "content":"托管 WordPress 主机"
        },
        "Hero body":{
            "content":"快速、安全、功能丰富的托管服务，让你的工作更加轻松。专为全球的 WordPress 网站和代理机构而建。"
        },
        "Hero button":{
            "text":"了解更多",
            "url":"https://xxxxxxxxxxxxx.com/wordpress-hosting/",
            "linkTarget":"",
            "rel":""
        },
        "Second button":{
            "text":"查看定价",
            "url":"https://xxxxxxxxxxx.com/wordpress-hosting/pricing/",
            "linkTarget":"_blank",
            "rel":"noreferrer noopener"
        },
        "Hero image":{
            "id":268,
            "alt":"",
            "url":"http://xxxxxxx/wp-content/uploads/2024/06/homepage-featured-image.jpg"
        }
    }
} /-->

在这里，你不会看到具体的块，而是看到对块样板的引用，以及一组可编辑的块属性。

同样地，你可以在网站的任何地方添加任意数量的块样板，这些样板将保持与在站点编辑器中构建时相同的结构和设计。

在站点编辑器中编辑样板的样式和结构，并进行重写。

之后，你可以单独更改每个可编辑块的内容，同时保持整体结构不变。

从连接的块编辑自定义字段值

WordPress 6.5 引入了一项新功能，允许用户将自定义字段值作为数据源（core/post-meta）连接到块属性。WordPress 6.6 进一步增强了这一功能，现在用户可以直接从块中编辑这些自定义字段值。

你可以通过从插件或主题的 functions 文件注册一组新的自定义字段来尝试这一功能，确保在注册帖子元数据时将 show_in_rest 设置为 true。示例如下：

register_post_meta( 
    'post', 
    'book_title', 
    array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'sanitize_text_field'
    )
);

完成后，创建一篇新文章或页面，并添加一个与你之前创建的自定义字段同名的新自定义字段。在编辑器中添加一个支持的块（例如标题块），然后切换到代码编辑器，按以下方式修改块：

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

保存文章/页面并检查结果。现在，你可以直接从块中编辑标题内容，自定义字段值应反映你的更改。

此外，一个新面板现在提供了有关连接到自定义字段的块属性的信息，显示了与自定义字段链接的块属性。

这个功能还带来了一些相关功能：

你可以从查询循环更新自定义字段值。
如果多个块连接到相同的自定义字段，它们将共享相同的自定义字段值，并与之同步更改。
用户只能编辑他们有权限的文章中的自定义字段。

最后提示：如前所述，目前支持块绑定 API 的块仍然有限：

数据视图增强

数据视图在 WordPress 6.5 中引入，是一个改进的用户界面，用于管理模板、样板、文章和媒体等内容。在开发路线图的第 3 阶段，这个新界面将扮演重要角色，尤其是在协作方面。因此，我们可以期待未来的 WordPress 版本会带来更多增强功能，例如分配人员审查文章或创建自定义视图以简化工作流程。在 WordPress 6.6 中，新界面仅在站点编辑器中可用，但未来将扩展到更多管理部分。

WordPress 6.6 引入了新的管理页面布局。模板部分管理已被删除并集成到样板部分，而站点编辑器的样板菜单已重新排列为两个部分，模板部分在上，样板在下。

对于页面，一个新面板提供了页面列表，并允许一键预览任何页面。

你还会在视图选项菜单中看到新的布局选项。（右上角的图标。）

除了这些主要改动外，数据视图还进行了多项小改进，以提高界面的功能性和信息性。例如，新增的批量编辑功能和在前端页面或文章页面上显示的徽章。

WordPress 6.6 使数据视图更进一步，但我们仍处于早期阶段。未来，我们将看到引入一个扩展 API，允许开发人员直接操作视图。要深入了解数据视图的未来，请查阅 Anne McCarthy 的《数据视图更新——2024 年 6 月》。

块编辑器的其他改进

WordPress 6.6 将 8 个 Gutenberg 版本集成到核心中——从 17.8 到 18.5——在界面、React 库、块 API 等方面带来了许多改进。以下是其中的一些：

新的发布流程
查看所有块
组块的快捷键

新的发布流程

在 6.6 版本中，文章/页面设置侧边栏得到了简化和优化，更加轻量和一致。这次迭代使文章编辑器和站点编辑器之间的统一进程向前迈进了一步，现在两个编辑器都有相同的发布流程。

在 WordPress 6.5 与 6.6 中的页面设置侧边栏对比发布体验已被标准化，一个新的状态与可见性面板允许你在更方便的位置设置文章/页面的状态。

其他更改影响了特色图片和摘要控件，它们已移动到侧边栏顶部和右上角的改进操作菜单。

查看所有块

在以前的 WordPress 版本中，当你选择一个块时，块插入器只显示你允许添加到所选块的块。例如，选择列块时，块插入器只会显示列块，因为你只能添加列。

从 WordPress 6.6 开始，块插入器显示两组块：可以添加到所选块中的块和可以添加到所选块下方的块。

组合块的快捷键

现在，你可以使用 MacOS 上的 ⌘ + G 或 Windows 上的 Ctrl + G 快捷键将选中的块组合在一起。

经典主题中的块样板

从 WordPress 6.6 开始，经典主题支持与块主题相同的样板界面。因此，如果你在 WordPress 网站上使用经典主题，你将在样板管理中享受与块主题相同的丰富体验。

以下图像比较了 WordPress 6.5 中的样板屏幕和 WordPress 6.6 中的样板管理部分。

使用 Twenty Twenty-One 经典主题的 WordPress 6.5 中的样板屏幕

使用 Twenty Twenty-One 经典主题的 WordPress 6.6 中的样板管理

现在，你可以像在块主题中一样编辑、复制、重命名、导出为 JSON 和删除样板。

使用 Twenty Twenty-One 经典主题的 WordPress 6.6 中的样板操作

你可以通过单独选择样板或点击批量编辑按钮执行批量操作。排序和过滤功能也可用。

使用 Twenty Twenty-One 经典主题的 WordPress 6.6 中的样板批量操作

你也可以像在块主题中一样创建样板。点击右上角的添加新样板按钮，系统将提示你填写样板详情表单。

在 WordPress 6.6 中使用经典主题添加新样板

然后，你可以像往常一样在站点编辑器中构建或编辑你的样板。

此次更新为经典主题用户带来了更多功能，解锁了新的能力，使得经典主题和块主题之间的编辑体验更加一致。

为设计师和主题开发者提供的新工具和功能

WordPress 6.6 为设计师和主题开发者带来了许多强大的功能和增强。设计师在样式设计方面有了更多的权限，包括部分样式、全站背景图片、全新的阴影编辑器和网格布局变化。而更多的工具为主题作者提供了更大的灵活性。让我们一起来看看。

Theme.json v.3
WordPress 6.6 中的 CSS 特异性
部分样式
颜色和排版预设
全站背景图片
网格布局变化
负边距
自定义阴影
自定义纵横比预设

Theme.json v.3

WordPress 6.6 引入了新的 theme.json 版本——版本 3。新版本改变了覆盖预定义属性的方式。现在，要更改字体大小或间距大小的默认值，需要在 settings.typography 或 settings.spacing 下将 defaultFontSizes 或 defaultSpacingSizes 设置为 false。

总结如下：

当 defaultFontSizes 或 defaultSpacingSizes 设置为 true 时，默认的字体大小和间距大小会在编辑器中显示，主题不能使用默认的标识符创建预设。默认情况下，defaultFontSizes 设置为 true。
当 defaultFontSizes 或 defaultSpacingSizes 设置为 false 时，默认的字体大小和间距大小不会在编辑器中显示，主题可以使用默认的标识符。

请查看开发者笔记以获取 Theme.json 版本 3 的更全面概述。

WordPress 6.6 中的 CSS 特异性

在 WordPress 6.6 中，CSS 特异性发生了变化，现在更容易覆盖核心样式，同时支持全局样式。

在 6.6 之前，覆盖核心样式通常很困难，主题开发者必须编写复杂的 CSS 规则才能实现所需效果。在 6.6 中，核心块样式和全局样式（theme.json）已通过(…) 包裹现有选择器，以将核心样式的特异性降低到 0-1-0，使其统一，以支持新的部分样式。

例如，.wp-block-image.is-style-rounded img 已更新为(.wp-block-image.is-style-rounded img)。

选择加入全局样式的块开发者被鼓励对其样式进行相同的更改，以便通过样式界面以可预测的方式进行自定义。因此，如果你有一个带有以下样式的自定义块：

wp-block-custom-block {
	padding: 0;
}

你应该将其包裹在 :root :where() 中：

:root :where(.wp-block-custom-block) {
	padding: 0;
}

可以参阅开发者笔记，以更深入了解 WordPress 6.6 中的 CSS 特异性。

部分样式

WordPress 6.6 允许你对文章或页面的各个部分进行样式设置，而无需逐个块地重复应用相同的样式。这意味着你可以选择多个块和子块，并为整个选择分配一种样式变化。

这得益于块样式变化的扩展，现在支持内层块和元素的样式设置，并利用降低的样式特异性来实现全局样式。

只有通过以下方法之一注册块样式变化，你才能通过全局样式定义和操作块样式变化：

使用主题的 /styles 目录中的 theme.json 部分
使用 register_block_style 函数
在你的 theme.json 中定义 styles.blocks.variations

使用 theme.json 部分定义块样式变化

与主题样式变化类似，块样式变化可以在主题的 /styles 目录下拥有自己的 theme.json 部分。

两种变化的区别在于，块样式变化具有一个新的顶级 blockTypes 属性，这是一个非空的块类型数组，支持块样式变化。此外，还添加了一个新的 slug 属性，以“在定义块样式变化的不同来源之间提供一致性，并将 slug 与可翻译的标题属性分离。”

开发者笔记提供了以下 theme.json 部分示例：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

通过 `register_block_style` 以编程方式定义块样式变化

register_block_style 函数提供了第二种注册块样式变化的方法。你可以在主题的 functions.php 中这样使用它：

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

现在，当你选择一个 Group 或 Columns 块时，块侧边栏的样式面板会显示注册的部分样式按钮。

有关部分样式变化的更多详细信息和示例，请参阅 Justin Tadlock 的文章《在 WordPress 6.6 中使用块样式变化设置部分、嵌套元素及更多内容》，Aaron Robertshaw 的开发者笔记，以及块样式扩展的拉取请求。

使用主题样式变化定义块样式变化

尽管目前可以使用 theme.json 中的 styles.variations 属性，但这种方法只是临时的，很快就会被弃用。有关更详细的描述，请参阅开发者笔记的相关部分。

颜色和排版预设

现在，你可以通过全局样式界面选择一个可用的预设来更改主题的调色板和字体系列。

如果你的当前主题支持颜色和排版预设，它们会出现在全局样式的颜色和排版设置中。

以下图像展示了 Twenty Twenty-Four 提供的两种调色板。

Twenty Twenty-Four 的浅色调色板

Twenty Twenty-Four 的深色调色板

要在你的主题中添加此功能，你需要创建只包含颜色和排版的样式变化。这样定义的样式将被提取并用于生成预设。

关于此功能，另请参阅《核心编辑器改进：升级你的设计》和《创建单独的排版和颜色变化…》。

全站背景图片

从 WordPress 6.6 开始，你可以在 theme.json 和站点编辑器中定义全站背景图片。

全站图片是设置在 body 元素上的背景图片属性值，并出现在网站的每个页面上。

在 theme.json 中，要定义全站背景图片，可以在 styles.background 属性下使用 backgroundImage.url：

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

在上面的示例中，设置了一个图片的绝对路径，但你也可以使用相对于主题根目录的路径来定义背景图片，如下所示：

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

然后，你可以使用以下图片属性：

backgroundPosition
backgroundSize
backgroundRepeat

如果不是主题开发者，可以通过站点编辑器的样式面板使用全站背景图片。在 WordPress 6.6 中，会在样式 > 布局下找到相应的控件。

这是背景图片的第一次迭代。要更详细了解其工作原理、限制以及未来计划，请参阅开发者笔记《WordPress 6.6 中的全站背景图片》。

网格布局变化

Group 块的一种新布局变化允许你将组内元素显示为网格。

你可以通过在编辑器画布中添加一个 Group 块并在块设置面板中选择网格布局来试用它。

网格布局有两种类型：

自动：自动生成网格行和列
手动：允许你设置要添加到网格中的列数

将内容添加到网格元素中并使用控件调整其大小。还可以根据所选的网格类型调整最小列宽或列数。

负边距

现在，可以为所有支持边距控件的块设置负边距。在 WordPress 6.6 之前，此功能仅在 theme.json 中可用，而现在很容易将负边距应用到元素上以创建重叠效果。

注意，在 WordPress 6.6 中，需要手动添加负值，如下图所示。

为 WordPress 6.6 中的按钮块设置负边距

自定义阴影

在 WordPress 6.6 中，可以在全局样式界面中创建和编辑自定义阴影。要创建自定义阴影，导航到站点编辑器并从全局样式菜单中选择阴影。在这里，找到一个自定义面板。当你点击 + 按钮时，会出现一个新元素，给你一组控件来定制或重命名/删除阴影。

总结

WordPress 6.6 带来的许多的新功能和变化，从块模式覆盖到数据视图的增强功能、主题开发者的新功能，以及站点和文章编辑器的编辑体验统一。但还有很多内容没有在本文中涉及，例如自动更新的回滚功能。

如果想更深入地了解这些变化，参考 WordPress 核心贡献者提供的一系列优秀资源，这些资源在我们测试 WordPress 6.6 期间有所提及。其中，推荐 Anne McCarthy 的《WordPress 6.6 真相之源》、Meetup 上的《学习 WordPress 在线研讨会》、WordPress 开发者博客、《Make WordPress Core》博客上发布的开发笔记，以及 Birgit Pauli-Haack 在《Gutenberg Times》上的定期更新等。