WordPress 6.6 计划于 2024 年 7 月 16 日发布。新版本的重点是完善和增强之前版本中引入的几项功能。然而，大量的新增功能使核心功能在 WordPress 开发第三阶段的道路上更进一步。
WordPress 6.6 共包含 299 项核心跟踪项目，以及 392 项增强功能、462 项错误修复和 46 项针对区块编辑器的可访问性改进。
在 WordPress 6.6 的众多新功能中，区块样板覆盖是我们最喜欢的功能。样板覆盖最初计划在 WordPress 6.5 中发布，后来推迟到了 6.6，它是区块绑定 API的第二个实现，让我们对 WordPress 未来的版本有了更好的了解。
然而，样板覆盖只是即将发布的 WordPress 中众多新增功能之一。因此，让我们开始探索 WordPress 6.6 中最令人兴奋的新功能和增强功能的旅程吧。
同步样板覆盖
区块绑定 API 的首次实施是为了连接区块属性和自定义字段。随着 WordPress 6.6 的发布，第二次迭代解锁了名为同步样板覆盖（Synced Pattern Overrides）的同步样板增强功能。
区块样板有两种类型：
- 同步区块样板
- 标准（非同步）区块样板
这两种类型的区别在于，对同步样板所做的所有更改都适用于整个网站上出现的每一个样板。相比之下，对标准区块样板的更改只会影响特定样板实例。
同步样板覆盖介于这两个极端之间。有了区块绑定 API，您现在可以创建在网站各处保持相同结构的区块样板，并与网站编辑器中对样板结构和样式的自定义同步更改。不过，您可以更改单个实例上的样板内容，而不会影响网站上相同样板的其他实例。
让我们来了解一下样板覆盖是如何工作的。
首先，你需要一个同步样板。你可以在文章编辑器中从头开始创建，也可以在网站编辑器的 “样板” 部分找到现有的同步样板。
第 1 步：转到 “样板“，复制一个现有样板，例如默认主题 Twenty Twenty-Four 的 “Hero” 样板。添加名称并将复制设置为同步样板。
在网站编辑器中复制样板
第 2 步：导航至 “我的样板” 部分，找到新的同步样板。在网站编辑器中打开它，然后逐个选择需要覆盖的所有区块。
转到区块设置侧边栏，向下滚动到高级部分。在这里，你会发现一个按钮：启用覆盖（Enable Overrides）。
启用样板覆盖
单击该按钮后，系统会提示您添加名称并设置样板类型。
启用覆盖
第 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">A commitment to innovation and sustainability</h1>
<!-- /wp:heading -->
...
</div>
在区块分隔符中，你会注意到 metadata.bindings 属性。这使得Heading区块可以编辑。 __ 绑定指示 WordPress 将所有支持的属性连接到一个特定的源，即default"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">About us</a>
</div>
...
</div>
现在，让我们返回文章编辑器，切换到代码编辑器。代码应类似于下面的内容：
<!-- wp:block {
"ref":261,
"content":{
"Hero title":{
"content":"Managed WordPress Hosting"
},
"Hero body":{
"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
},
"Hero button":{
"text":"Learn more",
"url":"https://kinsta.com/wordpress-hosting/",
"linkTarget":"",
"rel":""
},
"Second button":{
"text":"View pricing",
"url":"https://kinsta.com/wordpress-hosting/pricing/",
"linkTarget":"_blank",
"rel":"noreferrer noopener"
},
"Hero image":{
"id":268,
"alt":"",
"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
}
}
} /-->
在这里，你不会看到任何区块，只会看到区块样板的引用，以及每个区块设置为可编辑的属性集。
同样，你可以在网站的任何地方添加任意数量的区块样板，这些样板将与你在网站编辑器中创建的结构和设计相匹配。
在 “网站” 编辑器中使覆盖功能编辑样板样式和结构
然后，您可以单独更改可编辑区块的内容，并保持结构不变。
前端网站上的覆盖样板
由于样板覆盖是区块绑定 API 的一种实现方式，因此我们只能覆盖受支持的区块：标题、段落、图像和按钮。
您可以覆盖 URL、Alt 和 Title 图像属性
您可以在这段 WordPress TV 视频和尼克-迭戈（Nick Diego）的这篇博文中深入了解样板覆盖。
样板覆盖将在未来进行改进和添加。GitHub 上的讨论将在此处和此处继续进行。
从连接的区块编辑自定义字段值
WordPress 6.5 引入了自定义字段作为块属性的数据源（core/post-meta），允许用户将自定义字段值连接到块。WordPress 6.6 为这一功能带来了新的增强功能，例如可以直接从连接的区块中编辑自定义字段值。
您可以从插件或主题的函数文件中注册一组新的自定义字段，确保在注册文章元时将 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 -->
保存文章/页面并检查结果。现在，您可以直接从区块中编辑标题内容。自定义字段值应反映您的更改。
在 WordPress 6.6 中从连接的区块编辑自定义字段
此外，现在还有一个新面板提供与自定义字段相连的块属性信息，显示与自定义字段相连的区块属性。
WordPress 6.6 中带有区块绑定的图像属性
该功能附带一些相关函数：
- 您可以通过查询循环更新自定义字段值。
- 如果多个区块连接到同一个自定义字段，它们会共享同一个自定义字段值，并与之同步更改。
- 用户只能在允许的文章中编辑自定义字段。
最后一点：如前所述，支持区块绑定 API 的区块仍然限于以下内容：
| 区块 | 属性 |
| 图像 | url, alt, title |
| Heading小标题 | content |
| 段落 | content |
| 按钮 | url,text, linkTarget, rel |
数据视图增强功能
在 WordPress 6.5 中引入的数据视图是一个改进的用户界面，用于模板、样板、文章、媒体等的集合。新界面在开发路线图的第三阶段 “协作” 中起着至关重要的作用，因此，我们可能会期待在未来的 WordPress 版本中看到更多增强功能，”包括改进工作流程，以指派人员审核帖子或创建自定义视图来简化流程”。截至 WordPress 6.6，新界面只存在于网站编辑器中，但在未来的版本中，它应该会扩展到更多的管理部分。
WordPress 6.6 为管理页面引入了新的布局。模板部分的管理已被移除，并整合到了样板部分，而网站编辑器的样板菜单已被重新排列成两个部分，模板部分在上，样板在下。
WordPress 6.6 中的新样板菜单
对于页面，一个新的面板提供了页面列表，只需点击一下即可预览任何页面。
WordPress 6.6 中的预览页面
您还将在 “视图” 选项菜单中看到新的布局选项。(右上角的图标）。
WordPress 6.5 中的样板视图与视图选项
WordPress 6.6 中带有视图选项的样板视图
除了这些更广泛的更改外，数据视图还受到其他一些小改进的影响，如新的批量编辑功能和 “首页” 或 “文章” 页面上的徽章，这些改进改善了界面，使其功能更强大、信息更丰富。
WordPress 6.6 中显示前台页面的徽章
WordPress 6.6 将数据视图向前推进了一步，但我们仍处于早期阶段。未来，我们将看到可扩展应用程序接口（API）的推出，让开发人员可以直接对视图采取行动。如需更深入地了解数据视图的未来，请查看 Anne McCarthy 撰写的《数据视图更新 – 2024 年 6 月》。
区块编辑器的其他改进
WordPress 6.6 为内核带来了 8 个 Gutenberg 版本（从 17.8 到 18.5），对界面、React 库、区块应用程序接口等进行了许多改进。以下是其中几项：
新的发布流程
6.6 版对文章/页面设置侧边栏进行了清理，使其更轻便、更一致。在这次迭代中，文章编辑器和网站编辑器的统一进程向前迈进了一步，现在两个编辑器都有相同的发布流程。
WordPress 6.5 与 6.6 的页面设置侧边栏对比
发布体验已标准化，新的状态和可见性面板可让您在更方便的位置设置文章/页面状态。
WordPress 6.6 中的状态和可见性设置
其他更改还包括移至侧边栏顶部的特色图片和摘要控件，以及右上角经过改进的 “操作” 菜单。
文章编辑器中的特色图片和摘要控件
查看所有区块
在 WordPress 以前的版本中，当您选择一个区块时，区块插入器只显示允许您添加到所选区块的区块。例如，如果您选择了一个列，那么在区块插入器中只能看到列区块，因为您只能添加一个列。
在 WordPress 6.5 中，当您选择列区块时，区块插入器只显示列区块。
从 WordPress 6.6 开始，区块插入器会显示两组区块：可以添加到所选区块中的区块和可以添加到所选区块下方的区块。
在 WordPress 6.6 中，当您选择列区块时，区块插入器会显示两组区块
分组区块的快捷键
现在，您可以使用 MacOS 上的 ⌘+ G 或 Windows 上的 Ctrl + G 对所选区块进行分组。
经典主题中的区块样板
从 WordPress 6.6 开始，经典主题支持与区块主题相同的样板界面。因此，如果您在 WordPress 网站上使用经典主题，您将享受到与区块主题一样丰富的样板管理体验。
以下图片比较了 WordPress 6.5 中的样板界面和 WordPress 6.6 中的样板管理部分。
WordPress 6.5 中的样板屏幕，使用二〇二一经典主题
在 WordPress 6.6 中使用二〇二一经典主题进行样板管理
现在，您可以像使用区块主题一样编辑、复制、重命名、以 JSON 格式导出和删除图案。
在 WordPress 6.6 中使用二〇二一经典主题进行样板操作
您可以通过单独选择样板或单击批量编辑按钮来执行批量操作。还可使用排序和过滤功能。
在 WordPress 6.6 中使用二〇二一经典主题对样板进行批量操作
您也可以像在区块主题中创建样板一样创建样板。点击右上角的 “添加新样板” 按钮，系统会提示您填写有关样板详细信息的表单。
在 WordPress 6.6 中使用经典主题添加新样板
然后，您可以像往常一样在网站编辑器中创建或编辑您的样板。
在 WordPress 6.6 中使用经典主题在网站编辑器中编辑样板
此更新为经典主题用户提供了更多功能，释放了新的功能，并使经典主题和区块主题的编辑体验更加一致。
面向设计师和主题开发者的新工具和功能
WordPress 6.6 为设计师和主题开发者带来了许多强大的功能和改进，我们很高兴在此分享我们最喜欢的功能。由于有了分区样式、全站背景图片、全新的阴影编辑器和网格布局变化，设计师在设计页面样式时拥有了更多的权力。更多的工具为主题作者提供了更大的灵活性。让我们深入了解一下。
Theme.json v.3
WordPress 6.6 还带来了新的 theme.json 版本，即现在的第 3 版。新版本更改了覆盖预定义属性的方式。现在，要更改 fontSizes 或 spacingSizes 的默认值，您需要在 settings.typography 或 settings.spacing 下将 defaultFontSizes 或 defaultSpacingSizes 设为 false。
总结一下：
- 默认情况下，
defaultFontSizes或defaultSpacingSizes设置为true时，编辑器中将显示默认字体大小和间距大小，并且不允许主题使用默认标点符号创建预设。 defaultFontSizes或defaultSpacingSizes设置为false时，编辑器中将不显示默认字体大小和间距大小，主题可以使用默认插槽。
请查看开发说明，了解有关Theme.json v3 的更多信息。
WordPress 6.6 中的 CSS 特性
在 WordPress 6.6 中，CSS 特性发生了变化，现在可以更轻松地覆盖核心样式，同时保持对全局样式的支持。
在 6.6 之前，通常很难覆盖核心样式，主题开发人员必须制定复杂的 CSS 规则才能达到预期效果。在 6.6 中，核心块样式和全局样式（theme.json）通过将现有选择器封装在:root :where(...)中进行了修改，从而将核心样式的特定性降低到0-1-0，并使其统一支持新的部分样式。
例如，.wp-block-image.is-style-rounded img 已更新为 :root :where(.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 与可翻译的 title 属性脱钩”。
开发说明提供了以下 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', ), ), ), ), ), ) );
现在，当你选择一个组或列图区块时，区侧边栏的 “样式” 面板就会显示一个已注册版块样式的按钮。
WordPress 6.6中的版块样式变化
您可以在 Justin Tadlock 撰写的在 WordPress 6.6 中使用区块样式变化设计版块、嵌套元素等样式、Aaron Robertshaw 的开发说明以及《块样式》（Block Styles）中找到有关块样式变化的更深入概述和更多示例： 扩展块样式变化拉取请求。
在 Aaron Robertshaw 的开发说明中，以及在区块样式中：扩展区块样式变化的拉取请求中。
使用主题风格变化定义区块风格变化
虽然目前可以使用 theme.json styles.variations 属性，但这种方法只是暂时可用，很快就会被弃用。有关更深入的说明，请查看开发说明的这一部分。
颜色和排版预设
现在，您可以从全局样式界面中选择一个可用的预设来更改主题的调色板和字体系列。
如果当前主题支持颜色和排版预设，它们就会出现在 “全局样式” 的 “颜色” 和 “排版” 设置下。
下面的图片展示了由 Twenty Twenty-Four 提供的两种调色板。
Twenty Twenty-Four 主题中的浅色调
Twenty Twenty-Four 中的深色调色板
要将此功能添加到主题中，您需要创建仅包含颜色和排版的样式变体。这样定义的样式将被提取并用于生成预设。
关于此功能，另请参阅核心编辑器改进：升级您的设计和创建单独的排版和颜色变化…
全站背景图像
从 WordPress 6.6 开始，您可以在theme.json和站点编辑器中定义全站背景图片。
全站图片是在网站级别的 body 元素上设置的 background-image 属性的值，会出现在每个网站页面上。
要在 theme.json 中定义全站背景图片，可以使用 styles.background 属性下的backgroundImage.url：
{
"styles": {
"background": {
"backgroundImage": {
"url": "https://example.com/bg.png"
}
}
}
}
在上面的示例中，我们设置了图片的绝对路径，但也可以使用相对于主题根目录的路径来定义背景图片。
{
"styles": {
"background": {
"backgroundImage": {
"url": "file:./assets/bg.png"
}
}
}
}
然后，您可以使用以下图像道具：
backgroundPositionbackgroundSizebackgroundRepeat
如果您不是主题开发人员，您可以通过网站编辑器的样式面板使用全站背景图片。在 WordPress 6.6 中，您可以在 “样式”>”布局” 下找到相应的控件。
样式设置中的背景图片面板
这是背景图像的第一次迭代。如需进一步了解它的工作原理、局限性和下一步计划，请查看WordPress 6.6 中的全站背景图片开发说明。
网格布局变化
组区块的新布局变化允许您以网格形式显示组内的元素。
您可以在编辑器的画布上添加一个组区块，然后在组区块设置面板中选择网格布局，试试看。
WordPress 6.6 中的网格布局
网格布局有两种类型：
- 自动生成网格行和列
- 手动允许您设置要添加到网格中的列数
向网格元素添加内容，并使用手柄调整它们的大小。您还可以根据所选的网格类型调整最小列数或列数。
负边距
现在，您可以为所有支持边距控件的区块设置负边距。在 WordPress 6.6 之前，这项功能只能在 theme.json 中使用，而现在可以轻松地为元素应用负边距来创建重叠效果。
请注意，从 WordPress 6.6 开始，您需要手动添加负值，如下图所示。
在 WordPress 6.6 中为按钮区块设置负边距
自定义阴影
使用 WordPress 6.6，您可以在全局样式界面中创建和编辑自定义阴影。要创建自定义阴影，请导航到网站编辑器，然后从全局样式菜单中选择阴影。在这里，你会发现一个自定义面板。点击 “+” 按钮后，就会出现一个新元素，让你可以访问一组控件，自定义阴影或重新命名/删除阴影。
WordPress 6.6 中的阴影控件
自定义长宽比预设
现在，主题开发人员可以通过在 theme.json 中设置 settings.dimensions.aspectRatios 选项来定义自定义长宽比预设。
针对开发者的其他更改
然而，针对开发者的更改并不局限于主题。其他新增内容和改进还会影响 React 库和各种 API。
选项 API：禁用大选项的自动加载
在 WordPress 6.6 之前，每次页面加载时都会自动加载大量选项。为防止出现默认行为，开发人员必须向 add_option() 或 update_option() 函数的第三个参数传递 "yes“/true 或 "no“/false。然而，由于这个参数是可选的，默认值为"yes"，因此每个页面上都会加载大量不必要的数据，对网站性能造成负面影响。
为了防止这种行为，WordPress 6.6 对选项 API 进行了一些修改：
为允许 WordPress 确定是否在当前页面加载选项，add_option() 和 update_option() 的 $autoload 参数的默认值已从"yes" 改为null。该参数现在可接受以下值之一：
true：在每个页面加载选项，以避免额外的数据库查询。false：从不自动加载选项，以避免在每个页面加载数据。null：可能自动加载，意思是自动加载值应动态确定。默认情况下，除非选项包含较大值，否则会自动加载。
数据库值随之改变，现在每个选项的自动加载值将是以下值之一：
on：必须在每个页面上自动加载。添加了明确的true值。off：不能自动加载，只能用于单个管理页面。添加时要明确说明其值为false。auto：依赖 WP 默认的自动加载行为。在 WP 6.6 中，应自动加载，但该行为将来可能会改变。auto-on：应自动加载。它会动态设置为true。auto-off：不应自动加载。动态设置为false。
除了这些更改，WordPress 6.6 还引入了几个函数和过滤器：
wp_autoload_values_too_autoload()函数返回所有应自动加载的数据库值。wp_autoload_values_to_autoload过滤器允许编辑应自动加载的选项列表。wp_default_autoload_value过滤器可设置未设置明确值的选项的值。wp_max_autoloaded_option_size过滤器可以修改阈值，超过阈值的选项默认不会自动加载。默认值为 150000。(150kb)
这一更改对于拥有许多插件的复杂网站特别有用，值得插件开发人员注意。如需更全面的概述，建议查看自定义宽高比预设。
改进 React 库
React 库有两项重大变更。首先，WordPress 6.6 包含了 React 18.3，其中增加了弃用警告和其他更改，以帮助开发人员在 React 19 稳定后做好准备。
其次，开发人员现在可以使用 React17 首次引入的新 React JSX 变换。
有关这些变更的更多信息，请参阅 React19 升级准备工作和 WordPress 6.6 中的 JSX 开发说明。
对区块 API 的改进
WordPress 6.6 还为区块 API 带来了多项技术变更，包括以下内容：
小结
在这篇长文中，我们探讨了 WordPress 6.6 中许多令人兴奋的功能和变化，从区块样板覆盖到数据视图的增强、主题开发者的新功能，以及统一网站和文章编辑器的编辑体验。但还有很多我们在本文中没有涉及到的内容，例如自动更新的回滚。
如果您想更深入地了解，您不应该错过一系列来自 WordPress 核心贡献者的优秀资源，我们在测试 WordPress 6.6 时参考了这些资源。在众多资源中，我们推荐安妮-麦卡锡（Anne McCarthy）撰写的 WordPress 6.6 Source of Truth、Meetup 上的 “学习 WordPress 在线研讨会“、WordPress 开发者博客、Make WordPress Core 博客上发布的开发说明，以及 Birgit Pauli-Haack 在 Gutenberg Times 上发布的定期更新等。
现在，就看您的了。您测试过 WordPress 6.6 的功能了吗？您最喜欢哪项功能或变化？请在下面发表评论并参与讨论。
评论留言