WordPress 6.2已经定于2023年3月28日发布，现在是时候让我们探索一下2023年的第一个版本会有什么。
随着WordPress 6.2的发布，我们进入了Gutenberg长期发展路线图第二阶段的最后阶段，区块编辑器也正式离开了测试阶段。
这个版本主要侧重于改进界面和简化编辑体验。
引入了一种在模板和模板部分之间导航的新方法，以及将小工具导入区块主题的能力，一个新的无干扰写作模式，一个按比例的区块设置体验，以及对现有区块、性能和可用性的大量大小改进。
但是，如果说有什么在功能和可用性方面的飞跃，那就是导航区块。自从它首次发布以来，导航菜单已经经历了几次迭代，随着时间的推移，已经大大简化了编辑过程。随着WordPress 6.2的发布，发展仍在继续，在这篇文章中，我们将向你展示：
改进的编辑体验
WordPress 6.2带来了一个改进的编辑体验，整个网站结构被置于中心位置。你现在可以更容易地管理导航菜单，从单个区块推送样式变化到全局样式，并通过彩色模板部件和可重用区块毫不费力地在模板和模板部件之间导航。
但还有更多。让我们详细探讨一下编辑器界面的主要新增内容和变化。
- 改良后的网站编辑界面和浏览模式
- 无干扰模式
- 标签式区块检查器
- 彩色模板部件和可重复使用的区块
- 改良后的区块插入器
- 区块插入器中的Openverse集成
- 将小工具迁移到区块主题中
- 文件详情和列表视图的结合
改良后的网站编辑界面和浏览模式
随着WordPress 6.2的推出，对编辑器界面的几项改进也进入了核心。第一个也是最有趣的更新影响了网站编辑器界面。由于有了一个新的浏览模式，现在更容易浏览模板和模板部分。
WordPress 6.2的网站编辑器界面
新的界面还允许你直接从编辑器的侧边栏添加一个新的模板或模板部分，只需点击位于菜单标题右侧的加号（+）图标即可。
WordPress 6.2网站编辑器的模板菜单
根据Wp核心和文档贡献者Ryan Welcher的说法，”关于这项功能的工作正在进行，并将随着新的Gutenberg版本的发布而继续改进”。
在WordPress 6.2中添加一个新的模板
现在的工作流程更顺畅、更无缝。要开始编辑当前的模板/模板部分，只需点击左侧菜单中的编辑按钮，或点击页面中间的模板预览。
点击编辑按钮或模板预览来编辑一个模板
无干扰模式
WordPress 6.2引入了一个新的无干扰编辑模式，它从画布上削减了杂乱无章的内容，使你能够专注于页面的内容。
启用无干扰模式
你可以通过点击右上角的省略号（三个点）图标，在显示的选项面板中激活这一功能。
一旦激活无干扰模式，无关的侧边栏和工具栏就会消失，屏幕上只留下你正在工作的内容。
标签式区块检查器
WordPress 6.2引入了一个新的区块检查器，旨在通过将设置控制划分为独立的面板，给侧边栏带来秩序。
区块设置现在被划分为标签，以将样式设置与其他区块设置分开。
如果有的话，Block Inspector的标签将按以下顺序显示：
- 列表视图： 包括管理一个区块的子项的控件，如导航区块中的子菜单和链接。
- 设置： 包括与区块的外观无关的配置设置
- 外观： 包括专门与当前区块的样式有关的设置，如排版和颜色
WordPress 6.2中按钮区块的新标签式设置侧边栏
这对界面的可用性是一个明显的改进，特别是对于像组区块或导航区块这样有许多配置选项的高级区块。
请注意：
- 新的检查器只在包含要显示的元素时显示一个标签。
- 如果设置选项卡只包含高级面板，它就会被移到外观选项卡上。
- 如果区块检查器只有一个标签，那么它就会像WordPress 6.2之前那样显示。
查看开发说明以了解新的区块检查器的详细情况。
彩色模板部件和可重复使用的区块
为了更容易地将它们与组和区块区分开来，模板部件和可重复使用的区块现在在列表视图、区块插入器、区块工具条和编辑器画布中以不同的颜色突出显示。
列表视图中的彩色模板部件
这发生在网站编辑器和文章编辑器中，如下图所示：
文章编辑器中的彩色可重复使用区块
改良后的区块插入器
区块插入器受到几个变化的影响，大大改善了整体编辑体验。
首先，新的界面设计改善了图案和媒体类别之间的导航，并为图案和媒体项目提供更大的预览。
WordPress 6.2中区块插入器的样板预览
当网站上存在媒体时，一个媒体选项卡会显示在区块插入器中，以简化内容中的媒体插入。你可以拖放图片/媒体，或者直接点击你的媒体，将其添加到内容中。
区块插入器中的新媒体标签
在这个标签里面，一个打开媒体库的按钮把你带到WordPress的媒体库。
区块插入器中的Openverse集成
Openverse是一个旨在分享公开许可或公共领域作品的工具，供任何人使用。现在，在WordPress 6.2中，Openverse被整合到了Block Inserter中。
要访问这个新功能，点击Block Inserter的Media标签。这将显示一个带有搜索字段的面板，以及直接从Openverse资源库获取的图片预览。
Openverse现在已集成到区块插入器中
有关技术细节，请参见Openverse集成拉取请求。
将小工具迁移到区块主题中
从WordPress 6.2开始，运行一个使用经典主题的网站的用户，如果决定切换到一个区块主题，可以将他们现有的小工具区域迁移到新的主题，将它们转换为模板部分。
让我们来看看它是如何工作的。
首先，在一个经典主题中创建一个小工具区域。例如，你可以激活Twenty-Eleven，并在页脚区域一添加一个日历。
在Twenty Eleven中添加一个小工具
现在把主题改为Twenty Twenty-Three。打开网站编辑器，选择一个模板进行编辑，并添加一个模板部分。
在Twenty Twenty-Three主题的模板中添加模板部分
在区块侧边栏，从导入小部件区域的下拉菜单中选择要导入的小工具区域。
在WordPress 6.2中导入小工具区域
而这就是了。现在你可以像其他模板部分一样管理你以前的小工具区域。
预览导入的小工具区域
文件详情和列表视图的结合
在WordPress 6.2之前，编辑器工具栏上有两个独立的按钮，分别是详情和列表视图。在下图中，你可以看到WordPress 6.1中的文档详情弹出窗口，包括字数、字符数、阅读时间，以及页眉、段落和区块的数量，还有文档大纲。
WordPress 6.1中的 “详细信息 “弹出窗口
从WordPress 6.2开始，列表视图和详情已被移到一个单一的文档大纲面板，分为两个标签： 列表视图和大纲。
WordPress 6.2中新的文档大纲面板
这一变化应该为管理该文件提供一种更容易的方式。
扩展的区块功能
随着WordPress 6.2的推出，几个核心区块类型的功能都得到了扩展。这对导航区块来说尤其如此，它受到了编辑体验的几个变化和改进的影响。
让我们来详细看看主要的变化。
基于列表的导航区块编辑
随着WordPress 6.2的发布，可以从区块设置侧边栏的列表视图中改变导航区块元素的排列。
新的菜单标签显示导航菜单的列表视图
点击该菜单项将使你进入所选页面链接的设置侧栏，在那里你将能够编辑链接的细节，包括标签、URL、描述、链接标题和链接关系。
页面链接设置侧边栏
这一变化大大简化了导航菜单的编辑体验，允许你在菜单中添加、安排和删除项目，甚至创建新的导航菜单。
锁定导航
导航区块的另一个改进是能够以更精细的方式锁定菜单编辑。现在你可以限制编辑、禁止移动和防止删除，而在WordPress 6.1中，只有限制编辑和禁止移动选项可用。
此外，选择的选项也可以应用于内部区块（链接和子菜单）。
WordPress 6.2中的锁定导航
从区块工具条上添加/删除说明文字
一个新的添加/删除说明文字按钮允许用户从区块工具栏上控制几个区块（音频、视频、图像）的说明文字。
如果你已经设置了一个说明文字，当你把图片添加到你的内容中时，它将被自动包含。
从区块工具条上添加/删除说明文字
对页面列表区块的改进
有两项改进涉及到页面列表区块。
首先，页面列表块现在可以被展开，以显示列表视图面板中的页面列表。
列表视图中扩展的页面列表区块
此外，区块侧边栏的一个新选项现在允许你设置一个起始页，并在区块中只显示从它开始的页面。
为页面列表区块设置一个父页面
新的组区块占位符
现在，当组区块被添加到页面内容中时，组区块占位符会显示一个变体选取器。
WordPress 6.2中的组区块占位符
支持固定位置区块
WordPress 6.2引入了一个新的位置区块支持功能，首先是固定位置。
这个新功能目前只适用于组区块，在默认情况下，它被选择加入。
主题开发者可以使用theme.json中的 appearanceTools 功能在他们的主题上启用固定位置。如果你想对外观工具进行更精细的控制，你也可以将 settings.position.sticky 道具设置为 true。
你可以在Inspector控件侧边栏的Position面板中启用固定位置。
在组区块中设置位置为固定
在打开固定位置的情况下，HTML标签会得到一个 is-position-sticky 类，一些CSS规则适用于相应的元素：
.wp-container-6 {
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;
}
使用Twenty Twenty-Three主题的固定位置示例
固定位置只对文档根部的组区块起作用。虽然这可能会防止用户的混淆和错误，但目前你可能会发现内置的固定位置有点棘手（你可能想检查不同的方法来为你的WordPress网站添加一个置顶header）。然而，根据开发说明、
……在人工测试中，反馈表明，如果没有额外的UI或UX工作，如果用户不小心将一个非根区块设置为固定，或者例如，将一个标题模板部分中的区块设置为固定，可能会对试图创建固定header的用户造成混乱。我们决定在6.2版本中将该功能缩减到只针对根区块，以便有更多的时间来探索适合嵌套区块的解决方案。
位置功能只适用于单个区块，所以你不会在全局样式中找到它。
对区块编辑体验的额外改进
区块编辑的其他一些显著的升级包括以下内容：
- 你现在可以把图片拖到一个空段落上，用一个图片区块来代替它。
- 排版控件已被归入面板。这使得样式界面与设置界面更加一致，并提高了它的可用性，因为你现在可以像在区块设置界面那样显示和隐藏控件。WordPress 6.1中的排版控件与WordPress 6.2的对比：
- 现在可以直接在全局样式界面中修改标题区块的字母间距。
- 现在您可以设置日历块的背景、链接和文本颜色。
- 引入了两个新的横幅和页脚区块样式类别，以更好地反映网页的结构。
- 现在可以使用
[[快捷键来自动完成任何区块中的链接。在这一变化之前，区块必须使用__experimentalSlashInserter明确声明对链接自动完成的支持。 - 一个新的
control+option+1–6键盘快捷键允许你将一个段落转换成一个标题。 - 页面列表区块现在支持所有的排版选项，包括字体家族、字体大小、外观、行高、字母间距、装饰和字母大小写。WordPress 6.2中的页面列表区块排版设置：
增强的设计工具
WordPress 6.2引入的许多新功能和改进都增强了CMS的风格和设计能力。下面是6.2版本中最有趣的与设计有关的功能的列表；我们将进一步详细介绍每个功能。
样式手册
WordPress 6.2引入了一个新的样式手册功能，允许用户预览可以在他们的网站上使用的任何区块，而不必将这些区块添加到模板/模板部分。你可以通过点击现在显示在全局样式内的样式header中的打开样式手册按钮（眼睛图标）来启动样式手册。
这将打开一个界面，按类别显示每个核心和第三方区块的预览。
样式手册界面
新的Style Book界面通过在一个集中的位置提供每一个区块样式的预览，简化了设计过程。
从技术角度来看，新的界面是由添加到 @wordpress/edit-site 的一个新的 StyleBook 组件产生的，以在一个iframe中显示每个注册区块的预览（见PR #45960）。
同样的界面也提供单个区块的预览。作为一个例子，下面的图片显示了一个定制的日历小工具的预览。
定制和预览日历区块
开发者可以通过两种方式隐藏一个区块，使其不被插入和预览。首先，你可以在block.json中把 supports.inserter 设为 false ：
{
"supports": {
"inserter": false
}
}
另一种隐藏区块预览的方法是避开 example 属性，该属性用于在检查器帮助面板中创建区块的预览（在此阅读更多内容）。
全局样式中的阴影
在WordPress 6.2中，现在可以使用全局样式或theme.json为一些区块添加和定制阴影（截至本文写作时，阴影功能只对Button区块可用）。
首先，在支持该功能的主题中，你可以从全局样式界面中添加阴影。
要看到它的作用，激活Twenty Twenty-Three主题，导航到样式>区块>按钮，然后点击阴影按钮。
一个阴影弹出窗口允许你从主题预设中选择一个阴影。
在区块样式中设置阴影
主题开发者和高级用户也可以使用theme.json给区块添加阴影。下面的定义为Button区块添加了一个4px的黑色阴影：
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},
你也可以定义预设，让主题用户能够从样式界面中选择一个：
"settings": {
"shadow": {
"presets": [
{
"shadow": "4px 4px #FF0000",
"name": "Red",
"slug": "red"
},
{
"shadow": "4px 4px #00FF00",
"name": "Green",
"slug": "green"
},
{
"shadow": "4px 4px #0000FF",
"name": "Blue",
"slug": "blue"
}
]
},
}
一旦定义好了，你的预设就会出现在Shadow面板的样式区块中。
区块样式中的自定义阴影预设
你也可以挑选一个预设值并将其作为区块默认值：
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}
新的最小高度尺寸控制
从WordPress 6.2开始，组和文章内容区块的区块设置侧边栏的尺寸面板现在提供了一个新的最小高度控制，在使用 appearanceTools 功能的主题中默认启用。
组区块的最小高度控制
这个新的控件允许用户为组和文章内容区块设置一个最小高度，并且可以用来在页面底部呈现页脚，即使内容很少。
与新的垂直对齐工具相结合，它还允许在页面的顶部/中心/底部垂直对齐内部元素。
开发者可以通过在theme.json中添加 minHeight 设置来为主题增加对最小高度的支持：
{
"settings": {
dimensions: "minHeight": true
}
}
你也可以使用 appearanceTools 属性：
{
"settings": {
"appearanceTools": true
}
}
新的 minHeight 属性也可以用来直接在theme.json中设置一个特定的值：
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}
区块的开发者可以在他们的block.json文件中添加 supports.dimensions.minHeight 属性，并将其值设置为 true。对于静态区块，CSS min-height 规则将被存储为内联样式，而对于动态区块，它将被包含在 get_block_wrapper_attributes 返回的样式属性中。
样式面板中的自定义CSS
与主题定制器相比，网站编辑器缺少的一个功能是添加自定义CSS样式的能力。WordPress 6.2填补了这个空白，现在全局样式界面包括一个文本字段，可以添加自定义的CSS规则，当你更新你的主题时，这些规则不会被覆盖。
区块样式面板中的额外区块CSS
你可以在per-block的基础上添加自定义样式，从区块样式面板，或通过点击样式工具栏上的更多样式操作按钮。这将显示一个弹出式菜单，显示一个额外的CSS元素。
WordPress 6.2中的额外CSS文本区
为了支持自定义CSS，一个新的 styles.css 属性已经被添加到theme.json中。
自定义CSS规则可以完全覆盖theme.json中设置的任何自定义样式。如果你不希望发生这种情况，你可能要考虑使用现有的队列方法包括样式表。
你也可以使用 styles.blocks.block.css 属性在theme.json中添加per-block自定义CSS：
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}
你也可以对嵌套元素和伪选择器使用 & 。
要仔细了解新的自定义CSS功能，请参见全局样式和每个区块的自定义CSS。
在区块之间复制和粘贴样式
区块的工具栏的选项菜单中的一个新组现在显示两个按钮，用于复制样式和粘贴样式。在这个新增功能之前，只能复制样式，但不清楚如何粘贴样式。
WordPress 6.2中的复制样式
要尝试这个新功能，请添加一个新的区块，比如说标题。改变样式并从区块选项菜单中选择复制样式。
允许谷歌浏览器查看复制到剪贴板的文本和图像
然后选择另一个区块，选择粘贴样式。复制的样式将被自动应用到第二个区块。
在WordPress 6.2中粘贴样式
注意，这个功能只在支持浏览器的安全（https）网站上可用。有关其他细节，请参阅拉取请求。
在全局范围内应用区块变化
WordPress 6.2还在高级面板下为单个区块引入了一个 “全局应用” 按钮，允许你将区块样式的变化推送到全局样式，并在整个网站上应用这些变化。
在WordPress 6.2中全局应用区块样式的按钮
感谢这个新功能，将区块的排版、间距、尺寸和颜色样式应用到该类型的所有区块上，现在就像按下一个按钮一样简单（也请看这个拉取请求）。
使用间距可视化器改进设计体验
间距显示器允许你预览应用在一个区块上的边距或填充量。在WordPress 6.2中，这一功能得到了加强，增加了一些改进编辑经验的内容。
首先，现在只要你把鼠标悬停在margin或padding控件上，就可以看到Spacing Visualizer。
第二，现在只要你把鼠标悬停在间距设置上，间距展示器就会自动隐藏区块工具条，这样你就可以在没有区块工具条的干扰下预览新的边距和填充设置。
没有区块工具条的间距显示器
这些变化虽小，但意义重大，影响了相当数量的核心区块。
开发人员应该注意的项
WordPress 6.2也为开发者带来了许多新的功能：新的API、错误修复、性能改进，以及更多。让我们深入了解最吸引人的新增功能。
新的HTML API
WordPress 6.2引入了HTML标签处理器，这是一个符合HTML5规范的分析器，它提供了一种安全的方式来寻找特定的HTML标签，并通过PHP添加、删除或更新属性。HTML标签处理器是一个新的HTML处理API中的第一个组件。
这个新的API使得以前需要使用正则表达式才能完成的复杂任务变得容易。
在下面的例子中，我们只需将 alt 属性添加到一个 img 标签中：
$html = '<img src="/my-image.jpg" />';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
echo $p->get_updated_html();
这段代码将产生以下 img 标签：
<img alt="Hello WordPress 6.2" src="/my-image.jpg">
$p->next_tag() 方法移动到HTML中下一个可用的标签。它还接受一个标签名称、一个CSS类或两者，以寻找特定的标签，如上面的例子所示。
要编辑HTML标签，你首先要选择目标标签：
$p->next_tag();
一旦您选择了目标标记，您就可以使用API方法来执行若干操作：
$p->get_tag()$p->set_attribute()$p->get_attribute()$p->remove_attribute()$p->add_class()$p->remove_class()
你可以设置一个样式属性：
$html = '<a href="https://example.com">example.com</a>';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag( 'a' ) ) {
$p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}
echo $p->get_updated_html();
你也可以添加或删除一个类或一个属性。在下面的代码中，我们为 h1 标签添加一个自定义类：
$html = '<div><h1>Page Title</h1></div>';
$p = new WP_HTML_Tag_Processor( $html );
if( $p->next_tag( 'h1' ) ) {
$p->add_class( 'title' );
}
echo $p->get_updated_html();
然后你可以使用 $p->get_updated_html() 方法来回声或返回更新的标签。
要想更仔细地了解新的HTML API，请看WordPress核心提交者Adam Zieliński的这个交互式PHP教程。
样板API和新的 template_types 属性
样板API允许WordPress开发者 “创建预先设计好的内容区块，可以很容易地插入到文章、页面、自定义文章类型和模板中”。
在WordPress 6.2中，模式API现在包括一个新的 template_types 属性，允许你指定某个区块样板可以在哪些模板中使用。
Jorge Costa强调，这只是一个后台的更新，目前还没有相应的用户体验功能。然而，我们可以期待在WordPress 6.3中看到这个功能的进化的实现：
在为WordPress 6.3考虑的第一个用法是，当用户开始创建一个模板时，向用户展示一些在模板上有意义的模式。用户可以从一个模式开始，而不是从 “空白” 或后退模板开始。
在技术方面， register_block_pattern() 函数已经被修改，包括一个新的 template_types 参数，这是一个字符串数组，包含了区块样板所要使用的模板名称。
REST API也被修改，以返回一个区块样板的模板类型，如果至少有一个已经被定义。
React v18.0和并发模式
WordPress 6.2还提供了一个新版本的React库，现在已经更新到18.0版本。新版本带有新的API、功能、改进和错误修复。React v18.0的主要功能之一是引入了并发模式，”一种新的幕后机制，使React能够同时准备多个版本的UI”。
React中的并发模式的主要特征之一是它是可中断的：
React保证，即使渲染被打断，用户界面也会显示一致。为了做到这一点，它等待执行DOM突变，直到最后，一旦整个树已经被评估。有了这种能力，React可以在后台准备新的屏幕而不阻塞主线程。这意味着UI可以立即响应用户的输入，即使它正处于一个大型的渲染任务中，创造一个流畅的用户体验。
主要的好处是，用户界面可以立即响应用户的输入，并与它在后台运行的工作保持一致。
然而，并发性也带来了潜在的隐患，开发者应该注意。关于WordPress 6.2中React的并发模式的更深入的概述，请查看开发说明中提供的例子。
对开发者的其他变化
开发人员应注意的其他值得注意的变化包括以下内容：
- WordPress 6.2引入了一个新的JavaScript过滤器，可以用来在编辑器在屏幕上呈现之前过滤区块的设置。新的
blockEditor.useSetting.before过滤器还允许开发者根据区块的位置、当前用户角色、邻近的区块等来修改设置。更多信息和使用例子，请看WordPress 6.2中任何区块的自定义设置。 - 引入了一个新的
skipBlockSupportAttributes道具来排除与ServerSideRender组件中的区块支持相关的属性和样式。 - 一个新的theme.json API现在允许从theme.json中对现有的核心区块变化进行样式设计。
- 在Twenty Twelve到Twenty Seventeen的捆绑主题中，谷歌字体现在包含在本地，而不是从谷歌地址获取。
但这还不是全部。WordPress 6.2引入了许多功能、改进和错误修复，为了简洁起见，我们在这里没有提及。要获得更全面的概述，请查看WordPress 6.2字段指南。
小结
WordPress 6.2让我们更接近Gutenberg项目第二阶段的结束，该阶段名为定制化。但是，正如Matias Ventura所指出的，这并不意味着定制化的工作已经完成，在未来的版本中。一如既往，我们可以期待根据社区的反馈对编辑器进行额外的改进。
在这篇文章中，我们探讨了WordPress 6.2的一些主要功能、改进和错误修复。但是在6.2中还有更多。随着Gutenberg插件的十个版本进入核心–从14.2到15.1–我们将看到一个新的浏览模式，一个标签式的区块检查器，Widgets到区块主题的迁移，新的API，以及大量的改进和错误修复。此外，还将对可访问性和国际化进行改进。
评论留言