WordPress 5.9新功能——全站编辑、全局样式、区块、样板、API、UI增强等

WordPress 5.9 Josephine在一月就悄然到来了！今年的第一个WordPress版本最初计划于2021年12月14日发布。由于几个未解决的问题和未解决的错误，最终发布被推迟，最终于2022年1月25日发布。

如果您想知道WordPress 5.9中的新功能，简短的回答是全站编辑(FSE)。

事实上，许多5.9功能只有在您使用支持完整站点编辑的主题时才可用，例如全新的默认主题2022。

新的WordPress默认主题2022的预览。（图片来源：WordPress.org）

使用WordPress 5.9，我们进入了古腾堡路线图第二阶段的核心：定制阶段，主要关注全站点编辑、区块样板、区块目录和基于区块的主题。

随着下个月发布的5.9，我们——我会说——在 MVP，即古腾堡这个定制阶段的最小可行产品。

Matt Mullenweg在2021 State of the Word中的这些话最能概括新WordPress版本的主要功能。

古腾堡路线图（图片来源：Matt Mullenweg：2021 State of the Word）

也就是说，2022年第一个WordPress版本有什么新功能？

1. 全局样式：theme.json的图形界面
2. 导航区块
3. 图片库、特色图片和网站图标
4. 新的设计工具、模块和UI增强
5. 区块样板增强
6. 2022主题和WordPress区块主题
7. 性能改进
8. 开发人员的附加功能

全局样式：theme.json的图形界面

随着2021年WordPress 5.8的发布，操作theme.json文件成为主题开发人员自定义编辑器设置和样式的标准方式。

WordPress 5.9通过引入图形界面将事情提升到一个新的水平，该界面允许用户在全局或区块级别自定义其网站的样式预设，而无需编写任何代码。

全局样式机制应该会显着改变您习惯于自定义网站外观的方式，因为全局样式会影响WordPress网站设计的多个方面。

首先，全局样式界面取代了定制器，现在是使用区块主题自定义设置和样式的唯一方法。同样，将不再需要复杂的主题选项管理页面。这提供了一种配置主题设置和样式的新标准方法，同时应该简化主题开发工作流程。

借助全局样式，WordPress用户可以更好地控制其网站的呈现方式，包括全局和每个区块类型，而不是单个页面或文章的上下文。

站点编辑器中现在提供了一个新的侧边栏，您将在其顶部找到一个小型预览面板和四个组件，顺序如下：

• 排版
• 颜色
• 布局
• 区块

我们可以预期随着时间的推移会添加新的组件。

Automattic的Blockbase主题的全局样式侧边栏

让我们仔细看看新界面。

样式预览

全局样式侧边栏中的第一个元素是预览面板。此面板允许您检查自定义结果，并且当您的更改应用于站点编辑器画布中不可见的元素时特别有用。

下图显示了比较的三种不同样式组合：

比较全局样式预览

排版

排版面板是您控制网站排版的地方。当然，此面板中可用的控件取决于您的theme.json设置。

例如，2021区块(TT1 Blocks) 主题声明了以下排版属性：

"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}

下图显示了全局样式侧栏中生成的排版设置：

TT1 Blocks全局样式中的排版设置

让我们深入一点，看看TT1 Blocks主题是如何声明的fontFamilies：

"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
},
{
"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
"slug": "helvetica-arial"
},
{
"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
"slug": "geneva-verdana"
},
{
"fontFamily": "Cambria, Georgia, serif",
"slug": "cambria-georgia"
},
{
"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
"slug": "hoefler-times-new-roman"
}
]

您可以在全局样式预览面板中查看这些字体系列：

2021主题区块中可用的字体系列

颜色

在颜色部分，您可以查看和编辑调色板并自定义多个站点元素的颜色。

2021主题的颜色面板

通过单击这些元素，您可以访问一个新面板，您可以在其中从三个调色板中选择颜色：核心、主题和自定义调色板（阅读更多默认颜色、主题颜色和自定义颜色）。

2021主题区块的颜色设置

在此面板中，您将能够设置和修改当前元素的颜色。

在全局样式中自定义链接颜色

布局

最后一组工具用于布局自定义。在全局上下文中，这仅限于站点容器。

2021主题区块的布局设置

区块

随着全局样式机制的实施，现在还可以更改特定区块的外观，例如段落（排版和颜色）、按钮（布局）和列（颜色和布局）。

请注意，仅当区块在相应的block.json文件中声明支持特定功能时，才可以从全局样式界面自定义区块样式。例如，该区块目前支持以下样式：core/post-title

"supports": {
"align": [ "wide", "full" ],
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"margin": true
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true,
"fontAppearance": true,
"textTransform": true
}
}
},

由于core/post-title区块支持颜色、间距和排版，您将在文章标题区块的全局样式设置中找到相应的条目。

下图显示了排版设置，您可以轻松地与上面的代码进行比较：

自定义文章标题排版设置

值得注意的是，WordPress 5.9仅提供了全局样式接口的第一个实现。正如Matias Ventura指出的那样，我们可以合理地期待新样式控制功能的进一步发展：

将来，系统中将内置流程，允许您从本地样式转移到全局样式 – 例如对按钮区块进行自定义，并选择将它们全局更改应用于该类型的所有按钮。

因此，我们可能很快就会看到重大改进。下图只是我们可能期望的一个示例：

将来，您可以控制链接状态颜色。（图片来源GitHub）

其他改进可能包括主题提供替代调色板和多种全局样式变化的能力。

上周，我将一些2022主题的颜色 + 字体变体构建成超级简单的儿童主题。它们真的很轻巧，我喜欢一键为人们提供一个截然不同的网站的想法。

— kjellr (@kjellr) 2021年11月15日

开发人员可以在Global Settings & Styles (theme.json)支持文章中深入了解全局样式机制。

导航区块

导航区块被称为“最具影响力的主题区块之一”，我们不害怕说我们同意。

区块已经处于萌芽阶段有一段时间了（另请参阅Navigation Block Tracking Issue和Tracking Issue i2）。尽管如此，既然列为WordPress 5.9必备的所有未决问题和阻止程序都已修复，我们终于可以开始使用与WordPress 5.9合并到核心中的最强大的功能之一。

导航区块界面的快速概览

刚开始使用新区块可能会有点混乱，但一旦你掌握了它，你就会体会到它的全部潜力。

导航区块占位符

当您第一次添加导航区块时，区块占位符提供三个选项，用于选择现有的基于区块的菜单、创建包含所有页面的菜单或从空菜单重新开始。

选择现有的导航菜单

新的导航菜单还允许您导入通过经典主题可用的外观菜单屏幕创建的菜单。

这意味着，如果您从经典主题过渡到区块主题，则无需重建现有菜单。您只需选择一个当前可用的“经典菜单”，它就会自动转换为基于区块的导航菜单。

选择经典菜单

您可以在页面的任何位置添加导航区块。例如，您可能会发现在长篇文章中创建目录很有用，允许用户跳转到特定的内容部分。

将锚链接添加到导航菜单

通过单击右侧的加号 ( + ) 图标，新的导航链接会立即添加到导航区块中（另请参阅Gutenberg 11.7发行说明），除非其他类型的区块已添加到菜单中。

导航区块附加程序，显示导航链接

单击导航链接区块工具栏中的编辑按钮可将菜单项转换为自定义链接。这允许您单独添加、编辑、重新排序和删除项目。

将导航菜单转换为单个页面链接

您还可以通过单击区块工具栏中的“转换”按钮将链接转换为区块。这允许您将特定区块直接添加到导航菜单。

将导航链接转换为区块

在向导航菜单添加区块时，自定义链接、间隔、站点徽标、主页链接、社交图标和搜索区块现在会向用户公开。

在“设置”侧边栏中，您会找到一组全面的选项，用于控制导航菜单的多个方面。

布局面板包括用于对齐、方向和环绕的控件。

导航区块布局设置

导航区块还具有改进的显示设置面板，带有一个永远在线的汉堡菜单选项。

导航区块的改进显示设置面板

您还可以自定义菜单和子菜单的文本和背景颜色。

导航区块颜色设置

最近添加到导航区块的另一个有用的附加功能是区块间隙支持，它增加了用户控制菜单项之间距离的能力。

导航区块上的区块间距控制

Typography面板为字体系列、外观、行高、装饰和字母大小写提供了一组控件。当您单击右侧的省略号图标时，可以从出现的下拉菜单中打开/关闭所有这些控件。

导航区块排版设置

导航区块：Under the Hood

导航区块数据使用wp_navigation 专用的文章类型存储在数据库中。

为什么这对WordPress用户来说很有趣，它是如何工作的？

假设您创建了一个导航菜单，其中包含两个自定义链接和一个搜索框。安装2022主题后，菜单可能如下图所示：

导航区块示例

上面的Navigation区块以post类型wp_navigation存储在数据库中，如下所示：

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

将导航区块内容存储到数据库中，使用户能够跨不同的区块主题使用相同的导航菜单。如果菜单不是立即可见，您只需在菜单选择器中选择所需的导航菜单（另请参见问题#36087和 PR #36178）。

下图显示了上面带有2021区块主题的菜单：

选择2021主题区块中的菜单

导航区块经历了几次迭代。您可以在Gutenberg 11.7、11.8和11.9发行说明中深入了解每个实现。

您还可以在新的导航区块开发说明和导航区块支持文章中阅读有关导航块的更多信息。

图片库、特色图片和网站图标

为了使图像在不同的上下文中表现得更加一致，WordPress 5.9为几个区块提供了新功能和改进。图库区块已完全修改，而特色图像和站点图标区块的各种更改使用户可以更精细地控制各自的图像。

重构的画廊区块

在WordPress 5.8中，自定义画廊中图像外观的能力有些受限。无法更改图像样式或应用双色调滤镜。

此外，图库图像中缺少重要功能，例如将自定义链接添加到图库中的单个图像。

为了更好地理解单个图像和图库中的图像的两个不同上下文中的图像之间的这种不对称的原因，让我们看一下WordPress 5.8中代码视图中的图库区块：

WordPress 5.8中代码视图中的图库区块

请注意，图像详细信息仅存储在图库区块分隔符中（另请参阅什么是古腾堡区块？）。

检查WordPress 5.8中的图库区块

这使得单个图像的行为与画廊中的图像不同。

为了使图像在两种不同的上下文中表现一致，WordPress 5.9引入了一个完全重构的Gallery区块，它现在的行为就像一个用于容纳图形元素集合的容器，而不是一个无序列的图像列表。

在WordPress 5.9中，图库图像使用核心innerBlocksAPI嵌套，并且每个图像都存储自己的一组详细信息，就像单个图像一样。

WordPress 5.9代码视图中的图库区块

这是一个很大的增强，因为图库区块图像现在支持核心图像块中可用的相同功能，例如图像尺寸和双色调过滤器，以及标准区块功能，例如拖放、复制、复制和删除功能.

在WordPress 5.9中检查图库区块

使用新的图库区块，您将能够单独设置图像样式。这提供了广泛的定制机会。

下图显示了画廊中的多张图片，每张图片都有不同的圆角：

新的Gallery区块是单个Image区块的包装器

您还可以在同一图库中的不同图像上使用不同的双色调滤镜。

将不同的双色调滤镜应用于图库区块中的不同图像

而且，当然，您可以为每个图像分配一个特定的CSS类，这为您提供了额外的超能力，可以为您的图库图像添加任何您需要的自定义。

有关新Gallery区块的详细视图，另请参阅Gallery Block Refactor Dev Note、即将到来的Gallery Block改进和Gutenberg 11.4发行说明。

特色图像增强

特色图像区块也进行了一些改进。

基本尺寸控制

特色图像区块现在具有一个新的尺寸设置面板，提供高度、宽度和比例控件。

特色图像尺寸面板

维度控制也适用于查询循环区块中的特色图像，如下图所示：

查询循环区块中的特色图像尺寸

特色图像上的双色调滤镜

我们在上面提到，我们现在可以在新重构的Gallery区块中包装的图像中应用双色调过滤器。

现在，从WordPress 5.9开始，双色调过滤器也可以在任何上下文中的特色图像区块中使用，从文章和页面模板到查询循环区块。

查询循环区块中的特色图像上的双色调过滤器

此功能为整个网站的创意和一致的颜色组合打开了大门。

网站徽标中的图像裁剪

在WordPress 5.9（和Gutenberg 11.6）之前，徽标图像只能在上传之前进行编辑。使用WordPress 5.9，您可以直接从区块工具栏裁剪、缩放和旋转站点徽标区块中使用的图像。

编辑站点徽标图像

新的设计工具、模块和UI增强

11个Gutenberg版本与WordPress 5.9合并到核心中，提供了如此多的功能、增强功能和错误修复，不可能在一篇文章中涵盖所有这些。

因此，我们挑选了一些我们认为最值得关注的内容。要更深入地了解这些功能和改进，您可能还需要查看Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, 和 11.9.

话虽如此，本节将涵盖以下更改：

1. 边框支持UI
2. 列表视图改进
3. 区块间​​隙间距控制
4. 链接控制的丰富URL预览
5. 从链接弹出创建页面
6. 搜索区块的改进
7. 区块尺寸的新控件
8. 添加到小部件屏幕的新小部件组区块
9. Flex布局和新行区块

边框支持UI

从WordPress 5.9开始，当theme.json声明border设置并且块通过Block Supports API声明边框支持时，一个新的设置面板将提供对边框半径、宽度、样式、颜色和单位的控制（另见Gutenberg 11.1）。

核心Group区块是这种有用的UI增强的一个很好的例子。Group区块的block.json文件现在包含以下supports声明：

{
...
"supports": {
"align": [ "wide", "full" ],
"anchor": true,
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"padding": true,
"__experimentalDefaultControls": {
"padding": true
}
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
...
},
...
}

此功能允许用户以最小的努力在他们的网站上创建令人敬畏的图形效果。您可以通过新的2022主题看到它的实际效果。

在新的文章或页面中，创建一个新的组区块并选择它。您将在区块设置侧栏中看到一个边框面板。根据需要更改边框宽度和样式并享受结果。

具有自定义边框配置的组区块与2022主题

如果您是主题开发人员并希望将此功能添加到您的主题中，请打开您的theme.json文件并声明边框支持，如以下代码所示：

{
"version": 1,
"settings": {
"border": {
"customColor": true,
"customRadius": true,
"customStyle": true,
"customWidth": true
}
}
}

保存文件并返回到您的WordPress仪表板。在新的文章或页面中，创建一个新的组区块并选择它。您现在应该在区块设置侧边栏中看到一个边框面板（另请参见这个实验性的theme.json）。

列表视图改进

在WordPress 5.9中，列表视图得到了改进，现在具有拖放、可折叠部分和HTML锚点。

在列表视图中拖放

如pull request #33320中所述，拖放已在列表视图中实现，但由于性能问题而被禁用。

从WordPress 5.9开始，重新实现了列表视图中的拖放功能。您可以再次将区块和区块组拖放到列表视图中的任何位置。这极大地增强了编辑器的可用性，因为它允许您快速轻松地在页面周围移动区块和区块组。它有助于长篇文章和页面，以及管理嵌套区块的复杂结构。

在列表视图中拖放

列表视图可折叠部分

列表视图的另一项重大改进是能够展开/折叠嵌套区块的部分。这使您可以轻松导航复杂的区块结构，扩展单个区块组，同时将所有其余区块折叠起来。

您还可以使用左右箭头展开和折叠列表视图部分。

一组扩展的区块

列表视图项上的HTML锚点

另一个有用的增强功能是能够将HTML锚点添加到列表视图中的区块并一目了然。

列表视图中的HTML锚点

区块间​​隙间距控制

首次在Gutenberg 11.4中引入，现在与WordPress 5.9合并到核心中，新的区块间距控件允许您设置区块内项目之间的自定义距离。下面，您可以在具有2022默认主题的栏目区块中看到具有不同区块间距值的预览：

控制WordPress 5.9中的栏目区块间距

Gap Spacing最初可用于特定的区块，包括按钮、图像、列、标题和导航，但将来应该将支持扩展到更多区块。

主题应该使用新的外观工具属性在theme.json中启用间隙间距。您可以在我们深入了解2022主题的文章中了解更多关于外观工具的信息。另请参阅pull requests#33991和#34630。

链接控制的丰富URL预览

通过利用新的REST url-details端点，Link控件现在提供了丰富的URL预览，显示了链接目标资源的详细信息。

文章编辑器中的丰富URL预览

在其第一个实现中，此功能仅在文章编辑器富文本组件中可用。在撰写本文时，它还在站点编辑器中可用，但在导航和小部件编辑器中不可用。

从链接弹出创建页面

WordPress 5.9还具有改进的内联链接UI，显示了一个全新的按钮，可以直接从内联链接弹出窗口创建新页面。此功能仅在文章编辑器中可用。

WordPress 5.9具有新的内联链接UI

搜索区块的改进

搜索区块现在显示按钮和边框颜色设置。

搜索区块颜色设置

您现在还可以自定义背景和文本颜色以及边框颜色和半径。

搜索区块边框颜色和半径设置

区块尺寸的新控件

现在，用户可以使用新的尺寸设置面板来控制页面上区块占用的空间。面板应包括高度、宽度、填充、边距和可能的对齐控件，但并非所有属性都可用于每个区块。

WordPress 5.9中组区块的填充控件

Block开发人员会在GitHub上找到该组件，但请注意，它仍被标记为实验性功能，在撰写本文时可能会发生重大更改。

添加到小部件屏幕的新小部件组区块

现在，基于区块的小部件编辑器中提供了一个新的小部件组区块。最新区块允许您在小部件中添加一组区块，并在经典主题的小部件编辑器和定制器中添加标题。

2021主题中的小部件组区块

您可以在基于区块的小部件编辑器和定制器中的区块小部件中阅读有关小部件编辑器的更多信息。

Flex布局和新行区块

最初作为Gutenberg 11.2的实验性功能引入，flex布局已扩展到多个区块，包括社交链接和组区块。

一些区块，例如社交链接区块，现在提供一组工具栏控件和侧边栏设置，允许您自定义flex布局。

社交链接区块工具栏中的布局控件

导航区块和Row区块中提供了相同的功能，这是Gutenberg 11.5引入的Group区块的新变体。

下图显示了设置侧栏中带有布局控件的Row区块：

具有布局设置的新行区块

下面，您可以在前端和Chrome的检查器工具中看到相同的Row区块。

Chrome检查器工具中的Row区块

区块样板增强

区块样板首先在WordPress 5.5中引入，它允许WordPress用户只需单击几下即可将复杂的即用型嵌套区块结构包含到他们的内容中。

现在，WordPress 5.9通过对区块样板系统引入了一些增强功能，朝着设计民主化和用户授权迈出了一大步。

那么，WordPress 5.9中的区块样板有什么新功能？

样板目录中的特色样板

区块插入器现在显示从Pattern Directory动态检索的特色区块样板，为用户提供一种快速简便的方法来查找流行样板以在其内容中使用。

WordPress 5.9中的按钮区块样板

同样，随着样板直接进入WordPress仪表板，应该鼓励WordPress开发人员随着时间的推移创建和发布越来越多的样板，从而为用户提供越来越先进的设计能力。

新的全屏样板浏览器

随着Pattern Directory中可用的区块样板数量不断增长以及更多主题使用它们，WordPress 5.9引入了一个新的区块样板导航界面：Pattern Explorer。

WordPress 5.9中的全屏样板样板

一个新的“探索”按钮现在打开一个全屏样板，用户只需单击几下即可浏览、搜索和插入区块样板。结果是改善了用户体验。

区块插入器中的特色区块样板

在我们深入了解WordPress主题2022的过程中，您还可以找到其他注释和几个区块样板示例。

如果您有兴趣并想了解更多信息，请收听Josepha Haden Chomphosy的播客16和21集，并观看Anne McCarthy的Exploring WordPress 5.9 YouTube视频。

2022主题和WordPress区块主题

使用WordPress 5.9，您不再需要安装Gutenberg插件即可在您的WordPress网站上启用完整站点编辑。您只需要允许区块主题利用所有FSE功能。

此外，WordPress 5.9捆绑了一个全新的默认主题，2022，它改变了游戏规则，因为2022是有史以来第一个默认区块主题。

2022是一个高度灵活和可定制的主题。从WordPress 5.9开始，它提供了一个完美的沙箱来试用新的模板编辑流程、新区块、界面增强以及添加到核心的所有站点编辑功能。

2022是新的WordPress默认主题。（图片来源：WordPress.org）

如上所述，您需要做的就是安装并激活一个区块主题，例如2022。一旦主题处于活动状态，一个新的编辑器（测试版）菜单项将出现在WordPress仪表板管理菜单中。

WordPress 5.9中的新外观菜单

站点编辑器界面现在具有改进的站点编辑流程。在编辑界面中，您将能够直观地编辑站点的主页、模板和模板部分，以及访问全局样式界面。

编辑器导航菜单

当您激活区块主题时，您将找不到Customizer。这是因为定制器不支持仅使用站点编辑器的区块主题。这也是不能预览非活动区块主题的原因。

实时预览不适用于区块主题

因此，从WordPress 5.9开始，当区块主题处于活动状态时，定制器的访问点在管理菜单中不再可用（除非您使用的是使用它的插件）。

如果您仍然依赖于传统主题并且担心向后兼容性，请高枕无忧：您可以继续使用您的主题。

您目前有四种不同类别的主题可供选择：

• 区块主题：为FSE设计的主题
• 通用主题：可与定制器和站点编辑器一起使用的主题
• 混合主题：支持FSE功能的经典主题，如theme.json
• 经典主题：带有PHP模板、functions.php等的主题。

由于区块主题可能会对 WordPress 生态系统产生影响，我们有一篇涵盖2022和WordPress区块主题的整篇文章。请务必查看它以获得更深入的概述。

性能改进

这些改进将影响CMS的多个领域，从区块编辑器到区块主题、延迟加载等等。

1. 区块插入器增强功能
2. 加载较少的CSS
3. 延迟加载性能改进
4. 每个区块多个样式表

区块插入器增强功能

从WordPress 5.9开始，区块类型、样板和类别在区块插入器中延迟呈现。浏览器首先加载更高优先级的内容，为用户提供更流畅的编辑体验并提高性能。

区块编辑器上下文中进一步显着的性能增强会影响可重用区块和列表视图。

加载较少的CSS

至于前端，WordPress 5.9大幅减少了区块主题加载的CSS数量，从而显着加快了页面加载速度。

在这种情况下应该注意的主要改进是引入了theme.json设置和样式机制，它可以防止主题使用大量样式表，包括数百个CSS声明。主题使用的CSS代码量现在已减少到任何区块类型都可以重用的几个CSS自定义属性。

延迟加载性能改进

图片延迟加载最早是在WordPress 5.5中引入的。从WordPress 5.7开始，延迟加载功能被扩展到iframe，允许网站所有者构建更快的网站并改善他们的SEO。

无论如何，在对最大内容绘制 (LCP)进行分析之后，结果表明将loading="lazy"属性分配给页面上的所有图像和iframe会导致性能轻微下降。

简单地跳过loading="lazy"属性不是一个解决方案，因为这样做会导致失去延迟加载的明显优势。

最佳解决方案是仅省略出现在首屏上方的图像的属性loading="lazy"。但是，由于loading="lazy"属性是在服务器端分配的，因此WordPress无法确定哪些图像准确地显示在首屏上方。这主要取决于活动主题。

现在，作为一种权衡解决方案，从WordPress 5.9开始，loading="lazy"属性不会应用于第一个内容图像或iframe。对50个流行的WordPress主题进行的分析发现，该解决方案可以显着提高性能，并且页面加载速度提高了30%。

Felix Arntz解释了它是如何工作的：

…为了提高开箱即用的性能，而不需要开发人员自定义行为，WordPress现在将跳过页面上的第一个“内容图像或iframe”，以免延迟加载。此处的术语“内容图像或iframe”表示在当前主查询循环中的任何文章的内容中找到的任何图像或 iframe，以及此类文章的任何特色图像。这适用于“单一”和“归档”内容：在“单一”上下文中，（唯一）文章的第一个图像或 iframe 不是延迟加载的，而在“归档”上下文中，第一个图像或iframe的查询中的第一个文章不是延迟加载的。

主题开发人员现在可以使用新wp_omit_loading_attr_threshold过滤器来更改要从延迟加载中跳过的图像/iframe的数量。

每个区块多个样式表

区块和主题开发人员可以在每个区块上注册多个样式表，并在需要时从其他区块加载样式。这可以根据页面内容加载样式表，防止主题在每个页面上加载巨大的样式表。

根据Ari Stathopoulos的说法：

区块现在可以注册多个样式表，并在需要时从其他区块加载样式。主题将能够在每个区块的基础上添加样式，而不是加载在任何地方强制加载的单一样式表。这对基于页面和布局内容优化样式表加载的区块主题有更大的影响，但也可以被经典主题使用。

开发人员的附加功能

除了到目前为止讨论的许多功能和UI增强功能外，WordPress 5.9还为开发人员引入了一些功能。

注：如果您不熟悉WordPress区块开发，请务必查看我们的权威区块开发教程

1. 锁定区块的新属性
2. 访问全局设置和样式的新API
3. 面向开发人员的更多功能

锁定区块的新属性

区块开发者现在可以通过在区块设置中添加lock属性来阻止用户移动或删除单个区块：

{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}

启用此功能后，用户可以编辑区块内容，但不能在页面上移动区块或将其从编辑器画布中删除。下图显示了一个带有一组标准工具栏控件的自定义区块：

带有常规工具栏的自定义区块

定义lock属性，如上面的代码所示，隐藏区块移动器以及区块工具栏中的移动到和删除控件。下图显示了屏幕上的最终结果：

没有移动和删除控件的自定义区块

您还可以在区块样板中锁定特定块。例如，另请参阅WordPress 5.9中的锁定区块。

访问全局设置和样式的新API

WordPress 5.9引入了一个新的PHP公共API来从theme.json读取数据。

从theme.json读取设置和样式

有两个新函数可以从theme.json中声明的settings和styles部分读取数据:

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );

• $path是一个数组，列出了指定设置的路径
• $context是为这些数据设置上下文的数组。开发人员可以从特定的区块设置部分读取 – 例如，array( 'block_name' => 'core/paragraph' ). orygin设置为base允许忽略用户保存的自定义数据的键。

以下示例代码将返回contentSize设置值。在2022，它将是650px：

wp_get_global_settings( array( 'layout', 'contentSize' ) );

通过设置上下文，您可以检索特定区块的样式。以下代码显示了如何检索core/button区块的边界半径值：

function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button' )
);
}

上面的函数在考虑默认设置、主题设置和用户数据的同时返回所需的属性值。如果用户在全局样式界面中配置按钮边框半径，将提供自定义值。

要忽略用户数据，您将使用以下代码：

function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button', 'origin' => 'base' )
);
}

获取生成的样式表

WordPress 5.9还引入了一个新函数来获取由默认、主题和自定义样式生成的样式表：

wp_get_global_stylesheet( $types = array() );

$types是要生成的样式列表。

您可以在New API中阅读有关新API的更多信息，以访问全局设置和样式。

面向开发人员的更多功能

您可能想了解的针对开发人员的其他WordPress 5.9更改包括：

• 区块主题，一种在WordPress 5.9中构建主题的新方法
• 设置、样式和theme.json的更新
• WordPress 5.9中以主题为中心的更改和过滤器
• WordPress 5.9中的新功能查询
• WordPress 5.9中的其他核心更改
• WordPress 5.9中的其他区块编辑器更改
• 对内部区块区域进行更多控制（作为区块开发人员）

小结

我们将用一个关于WordPress市场份额的快速说明来结束这篇文章。WordPress目前为 65% 以上的内容管理系统已知的网站提供支持，并且占所有网站的43%。

这些数字令人印象深刻，尤其是与市场份额不到 5% 的最接近的竞争对手（如Shopify）相比。

这也意味着您不能忽视WP CMS的演变。每个新版本的WordPress都会带来新功能、界面增强、性能改进，WordPress 5.9也不例外。测试新功能所需的只是区块主题，例如新的2022默认主题，您就可以开始使用了。

原文地址：https://www.wbolt.com/wordpress-5-9.html