WordPress 6.0已经正式发布，并且像往常一样，我们一起来讨论一下这个重要的WordPress版本的新功能。
让我们马上说，如果WordPress 5.9将我们带到了古腾堡第二阶段的核心，那么WordPress 6.0旨在整合已经可用的定制工具。
但新版本不会只是这样。正如Matias Ventura在6.0的初步路线图中所指出的那样，站点编辑器的引入标志着一个重要的里程碑，但也只是旅程的第一步。
事实上，使用WordPress 6.0，我们可以期待CMS的几个方面（从可用性到性能）有相当大的改进，包括以下内容：
- 改进的信息架构和模板浏览体验
- 改进的模板创建
- 新的导航UI
- 站点编辑器的新浏览模式
- 替代全局样式
- 增强的导航块
- 新的设计工具
- 以及更多…
但是等等，这还不是全部。WordPress 6.0还带来了大量的更改、功能和错误修复，包括400多个更新和500个编辑器错误修复。已修复189多个工单问题反馈，其中包括91项新功能和增强功能。
事不宜迟，我们正式开始了解WordPress 6.0中的新功能。
- 网页字体API
- 全局样式切换
- 无处不在的区块样板
- 站点编辑功能
- 界面和可用性改进
- 新核心区块
- 对现有区块的改进
网页字体API
新的Webfonts API现在提供了一种将Webfonts加载到WordPress中的标准化方法，以确保性能和用户隐私。
从WordPress 6.0开始，您只能从您的theme.json注册一个新的网络字体。
使用theme.json非常简单。您需要做的就是向该typography部分添加一个新的字体系列。下面的代码提供了一个webfont注册的例子：
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
},
{
"fontFamily": "\"Inter\", sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "200 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
}
]
}
]
}
使用上面的代码，我们将Inter字体添加到二〇二二默认设置的fontFamilies。如果您想自己尝试，请从Google Fonts下载Inter webfont到./assets/fonts文件夹，然后将上面的代码添加到二〇二二主题theme.json的settings.typography部分。完成后，保存文件并返回站点编辑界面。
下图显示了编辑器中的结果。
一个新的字体系列已在二〇二二注册
Webfont API仅注册在当前页面上呈现块所需的字体，这对于在style variables中定义的webfonts特别有用。此外，API通过按font family注册和排队字体来优化HTTP请求的数量。
您可以阅读更多关于在Webfonts API拉取请求和WordPress 6.0包含的Webfonts API状态的更多信息。
全局样式切换
全局样式变体是WordPress 6.0中最受期待的功能之一。主题作者现在可以将多组全局样式与其主题捆绑在一起，使用户能够通过单击在样式变体之间进行切换。
这很像拥有现成的子主题，每个主题都有一组预定义的样式。
要将样式变体添加到块主题，您需要将替代JSON文件添加到位于主题根目录中的样式文件夹中。
支持全局样式变体的主题在全局样式侧边栏中显示了一个新的浏览样式项。这会带来一个面板，主题用户可以在其中找到可用样式的列表。
在WordPress 6.0中浏览样式
从列表中选择一个全局样式，该样式会自动应用于您的整个网站。
在WordPress 6.0中单击即可选择样式
新功能允许主题开发人员创建无限数量的样式变化，并与新的Webfonts API完美搭配。
下图显示了上一个示例中的自定义样式，标题应用了不同的字体。
WordPress 6.0中带有自定义字体的样式变体
如果您想自己尝试，请将样式文件夹添加到块主题的根目录，创建一个具有有意义名称的新JSON文件，在您喜欢的代码编辑器中打开它并添加以下代码：
{
"version": 2,
"settings": {
"color": {
"duotone": [
{
"colors": [ "#143F6B", "#EFEFEF" ],
"slug": "foreground-and-background",
"name": "Foreground and background"
},
{
"colors": [ "#143F6B", "#FEB139" ],
"slug": "foreground-and-secondary",
"name": "Foreground and secondary"
},
{
"colors": [ "#143F6B", "#F6F54D" ],
"slug": "foreground-and-tertiary",
"name": "Foreground and tertiary"
},
{
"colors": [ "#F55353", "#EFEFEF" ],
"slug": "primary-and-background",
"name": "Primary and background"
},
{
"colors": [ "#F55353", "#FEB139" ],
"slug": "primary-and-secondary",
"name": "Primary and secondary"
},
{
"colors": [ "#F55353", "#F6F54D" ],
"slug": "primary-and-tertiary",
"name": "Primary and tertiary"
}
],
"palette": [
{
"slug": "foreground",
"color": "#143F6B",
"name": "Foreground"
},
{
"slug": "background",
"color": "#EFEFEF",
"name": "Background"
},
{
"slug": "primary",
"color": "#F55353",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FEB139",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F54D",
"name": "Tertiary"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "\"Inter\", sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "200 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
}
]
}
]
}
},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"core/query-title": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)"
}
}
},
"elements": {
"h1": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h2": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h3": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h4": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h5": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h6": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)"
}
}
}
您可以在GitHub和gist上找到上面示例中使用的完整代码。
开发人员将在Global Settings & Styles和Theme.json文档文章中找到对Global Styles和Theme.json的深入概述。
您还可以查看最新版本的二〇二二，它现在具有三种新的风格变化。
浏览二〇二二主题中的样式
无处不在的区块样板
可以肯定的是，区块样板在WordPress开发的当前阶段起着核心作用。WordPress 5.5首次引入，块模式随着时间的推移定期得到改进。
此外，从WordPress 5.9开始，样板目录中的区块样板进入了我们的WordPress网站，从样板目录中动态检索并加载到区块插入器中。
现在任何人都可以成为模式开发人员，这要归功于全新的在线工具。Pattern Creator允许您构建、编辑并将您的最佳区块样板提交到Pattern Directory 。您只需一个WordPress.org帐户即可开始使用。
在Pattern Creator中搜索图像
并且WordPress 6.0引入了对区块样板的进一步改进。
首先，区块样板在模板编辑中更容易找到。现在快速插入器仅在您在模板的顶层访问它时显示区块样板，即当您要添加到模板的区块是文档的直接后代时。
这时满足以下条件：
- 您正在编辑区块模板
- 快速插入器位于根级别
- 您正在其他区块之间添加一个区块（即，既不是页面上的第一个区块也不是最新区块）
快速插入器仅在模板编辑器中显示区块样板
另一个有用的功能现在使主题开发人员能够将推荐的样板添加到theme.json。尝试一下，搜索Patterns目录，找到你想推荐给主题用户的样板，然后从URL中获取模式slug并将其添加到你的theme.json中，如下所示：
"patterns": [ "image-with-angled-overlay-shape-call-to-action-button-and-description", "hero-section-with-overlap-image" ],
用户将在区块插入器中找到您推荐的样板。
快速插入器中的推荐样板
WordPress 6.0附带的一个强大的模式相关功能是隐式模式注册。主题现在可以通过将样板声明为主题根目录下的新目录/patterns下的PHP文件来隐式注册样板。
这个过程非常简单：
- 在主题的根目录中创建一个新的样板文件夹，
- 在区块编辑器中建立一个块组，
- 将您的HTML复制并粘贴到一个新的文本文件中，
- 前置以下标题，
- 并将文件作为PHP保存在您的样板文件夹中。
就是这样。您现在有一个新的区块样板可以显示在区块插入器中。
快速区块插入器中的自定义样板
如需更全面地了解区块样板开发，您可以关注GitHub上的跟踪问题。
站点编辑功能
WordPress 5.9并未结束全站编辑开发。WordPress 6.0通过改进视觉主题构建功能和为块主题提供新的模板选项，使事情更进一步。更多功能正在开发中。
可视化主题构建
WordPress 6.0引入了改进的区块主题导出工具，它允许您下载当前主题以及所有更改和自定义。
如果您到目前为止还没有使用过区块主题导出工具，它是一个强大的站点编辑工具，允许您将样式和模板作为一个整体主题导出。
当您对更改感到满意时，从站点编辑器的界面中，打开“选项”侧边栏并找到“工具”部分。此处的导出按钮可让您下载当前主题以及zip文件中的所有样式和模板自定义。
从编辑器界面导出主题
然后，您可以导出您的主题并将其安装在任何WordPress网站上。
我们在本地WordPress安装上测试了改进的主题导出工具，发现几乎一切都按我们的预期工作……
无论如何，导出工具仍在开发中，今天我们只能瞥见它的巨大潜力。考虑从网站的编辑界面创建主题并将它们分发到任意数量的安装的可能性。这就是您是否是开发人员…
还有很多未解决的问题需要解决，这让我们认为我们很快就会看到一些改进。如果您好奇并想了解更多关于视觉主题构建的信息（就像我们一样），您可以关注GitHub上的跟踪问题。
区块主题中的更多模板选项
在以前的WordPress版本中，我们提供的模板类型数量有限。
在WordPress 5.9中添加新模板
现在，WordPress 6.0引入了几种新的模板类型，包括Author、Category、Date、Tag和Taxonomy。
在WordPress 6.0中添加新模板
此添加应简化您的站点编辑工作流程。要尝试一下，只需从下拉列表中选择一个新模板，添加必要的块，保存您的更改，然后检查它在前端的外观。是的，就这么简单。现在，将其与上面提到的主题导出功能结合起来，您会更好地了解我们对站点编辑的期望。
界面和可用性改进
WordPress 6.0对UI进行了许多更改，其中许多更改旨在在侧边栏中进行排序。所有这些变化应该会对整体编辑体验产生相当大的影响。在这里我们只会提到其中的几个，但您可以查看Gutenberg发行说明以获取更全面的更改列表（请参阅Gutenberg 12.4、12.5、12.6、12.7、12.8、12.9、13.0）。
- 列表视图改进
- 区块样式预览
- 段落排版部分
- 在工具面板下移动的边框和颜色设置
- 发布后面板类别提醒
- 代码编辑器添加到站点编辑器
- 其他增强功能
列表视图改进
列表视图受到大量改进组件可用性的更改的影响。
在选择时展开列表视图
当您在编辑器中单击一个区块时，现在该区块会在列表视图中自动突出显示。如果块嵌套在父区块中，则父区块会展开以显示区块树中的项目。
选择区块时在列表视图中展开组区块
列表视图默认折叠
在WordPress 6.0之前，当您打开列表视图面板时，默认情况下它会展开。
WordPress 5.9中的默认列表视图
但是由于文章通常包含嵌套块的复杂结构，因此在打开列表视图时让块树折叠是非常有意义的。
在6.0中，所有编辑器中的列表视图默认折叠，使区块树一目了然。
WordPress 6.0中的默认列表视图
关注列表视图按钮
当您打开列表视图面板时，焦点现在正确返回到列表视图按钮。这在您从键盘浏览列表视图时特别有用，并带来更流畅和更无缝的编辑体验。
多区块选择和拖放
列表视图的另一项更改允许您选择同一级别的多个区块并将它们拖放到列表中的另一个位置。
区块样式预览
在WordPress 6.0之前，块样式预览被放置在区块侧边栏中，占据了样式面板的很大一部分。
WordPress 5.9中的区块样式预览
在6.0中，只有样式变体的名称出现在样式面板中，而当样式名称悬停或获得焦点时，样式预览会显示在侧边栏之外。
此更改减少了侧边栏的尺寸，并且应该使样式名称更加明显。
WordPress 6.0中的区块样式预览
段落排版部分
为了在区块侧边栏中进行排序，段落块的首字下沉控件已从其部分移至排版部分。
通过此更改，所有排版设置控件现在都放置在同一部分下，从而带来更一致的用户体验。
WordPress 5.9与WordPress 6.0中的排版设置
在工具面板下移动的边框和颜色设置
为了在杂乱的设置侧边栏中进行排序，边框设置和颜色设置控件已移至工具面板中，并且可以在多个上下文中展开和折叠。
新的边框设置面板
此更改应通过多个区块简化编辑体验，并为侧边栏带来更多一致性。
WordPress 6.0中的颜色面板
发布后面板类别提醒
当您赶时间或定期发布大量博客文章时，您很容易忘记标签或类别。如果您经常遇到这种情况，您会发现“发布”面板中显示的标签提醒非常有用。
现在，为了帮助网站管理员和作者确保为他们的文章分配了必要的类别，WordPress 6.0提供了一个新的建议：当尚未将类别添加到文章中时，分配类别面板会出现在文章发布面板中。
下图比较了WordPress 5.9和6.0中的发布发布面板。
WordPress 5.9与6.0中的发布面板
代码编辑器添加到站点编辑器
从WordPress 6.0开始，代码编辑器现在也可以在站点编辑器中使用。与Post Editor一样，您会在Options菜单下找到Code Editor。
WordPress 6.0将代码编辑器添加到站点编辑器
其他增强功能
多选——现在可以跨多个区块选择文本。
跨两个段落选择文本
区块锁定UI – 更多设置下拉列表中的新锁定项打开一个弹出窗口，您可以在其中阻止用户移动或删除区块（或两者）。
锁定一组区块
这在模板编辑和可重复使用的区块中特别有用，您还可以在其中限制区块编辑。
锁定可重用组区块
样式保留– 当您转换区块或创建新按钮时，现在会保留几种样式。
下图显示了具有不同样式的List区块。
应用了不同样式的列表区块
当您将List区块转换为段落时，新区块将保留与以前的列表项相同的样式。
将列表转换为段落
相同的增强适用于添加到Buttons区块的新按钮，这些按钮现在从相邻按钮继承样式。
新核心区块
核心区块的数量不断增加。如果您想知道当前可用的核心区块是什么，现在有一个手册页面提供了Gutenberg插件中包含的核心区块的完整列表。对于每个区块，都提供了名称、类别、支持和属性，以及指向区块开发人员会喜欢的源代码的有用链接。
WordPress 6.0将提供更多区块。在这里找到您可能期望即将发布的版本的区块。
- 评论查询循环
- 阅读更多
- 查询循环中没有结果
- Avatar头像和文章作者信息
评论查询循环
与查询循环区块类似，一个新的评论查询循环块显示发表评论。它是一个高级区块，包括几个可以单独编辑和配置的内部区块。
如下图所示，您可以选择Comment Query Loop区块中包含的任何块来自定义其外观。您还可以添加更多区块或移动或删除现有区块（源代码）。
配置评论查询循环区块
阅读更多
一个新的、可自定义的阅读更多区块允许您自定义阅读更多按钮的不同方面：边框、颜色、角落、排版等（源代码）。
这是一个很好的补充，因为它允许您在摘要区块的上下文之外添加和自定义阅读更多链接。
新的阅读更多区块
查询循环中没有结果
No Results区块是一个块容器，您可以在其中添加任何文本或区块以在查询没有结果时显示。要将No Results区块添加到Query Loop，只需选择Query Loop并单击右下角的加号图标以启动快速插入器。然后搜索无结果。该区块在查询循环（源代码）之外不可用。
将无结果区块添加到查询循环
Avatar头像和文章作者信息
WordPress 6.0还引入了新的块类型，将作者区块拆分为其组件，并在您的内容中单独使用它们。
Post Author Biography区块提供作者的描述（源代码）。
Avatar区块仅显示用户的头像，允许您在站点作者之间进行选择（源代码）。
WordPress 6.0中的头像区块
此区块对于在作者信息块或评论的上下文之外显示作者的头像特别有用。例如，您可以在专用于所有作者的页面上使用它，或者在显示用户/读者评论的页面上使用它。
对现有区块的改进
WordPress 6.0还对现有块引入了一些更改和增强功能，这些更改和增强可能会对您的编辑工作流程产生重大影响。导航块将受到一些更改的影响，但您还会看到其他区块的改进，包括查询循环、特色图像、组和社交图标。
导航区块改进
在过去的几个月中，导航区块获得了多项改进，现在具有更易于使用的界面。
首先，在导航链接块中添加了丰富的预览。添加指向可公开访问资源的链接时，单击区块工具栏中的链接按钮会显示该资源的预览图像。
导航链接的丰富预览
一些额外的更改会影响整体编辑体验。
现在，当您添加一个新菜单并且只存在一个Navigation Menu时，它默认为唯一可用的menu。如果您只有一个导航菜单，此更改应该会加快您的编辑工作流程。
导航链接已经有一个描述字段，用户可以在其中输入描述其导航链接的文本。但是，在以前的WordPress版本中，主题不支持此功能。
现在，在WordPress 6.0中，链接标签之后会出现一个 。
导航链接描述出现在链接标签之后
在二〇二二中，.wp-block-navigation-item__description元素通过CSS隐藏，但主题可以添加一个display: block属性来显示链接描述。
WordPress 6.0和二〇二二中的导航链接描述
查询循环过滤器和特色图像
查询循环过滤器设置部分现在显示自定义分类的输入字段。这使用户能够通过为所选文章类型注册的一个或多个自定义分类法过滤当前文章类型。
现在还可以过滤多个作者的文章，而在以前的版本中，您只能从下拉列表中选择一个作者。
查询WordPress 6.0中的循环过滤器设置
此外，您现在也可以在Query Loop区块中设置特色图像尺寸。
控制查询循环区块中的特色图像尺寸
响应式组区块中的排版和边界支持
Group和Row区块现在支持Typography设置。此更改允许用户一次将相同的排版设置应用于整组区块，在格式化包含多个嵌套区块的组时节省了几次点击。
组区块的排版设置
组区块得到了进一步改进，现在您只需单击一下即可轻松地将区块分组到堆栈或行中。
只需选择要分组的区块，然后选择块工具栏中可用的三个控件之一：Group、Row、Stack。
将区块分组后，设置侧栏中的新面板会显示组变体描述，使您只需单击几下即可切换变体。
水平显示行区块
WordPress 6.0还引入了对Group blocks的边距支持，使用户能够分别控制顶部和底部边距。
使用组区块控制边距
封面中的特色图片
现在，您可以像使用WordPress 6.0一样在封面区块中使用特色图像，区块工具栏中添加了使用特色图像切换。借助这个新控件，您只需单击一下即可从当前图像切换到特色图像。
使用带有封面区块的特色图片
在社交图标中显示/隐藏标签
社交图标区块的一个小而有用的增强现在使用户能够打开/关闭图标链接标签。
显示标签控件允许在社交图标中打开/关闭标签
启用此选项时，您可以显示默认服务名称或单独为您的图标设置自定义标签。
显示标签已打开
其他的区块增强
即将推出的WordPress版本还为许多其他块带来了大量增强功能。
例如，现在您可以控制Columns区块的边框（Gutenberg 12.7）。
列区块的边框控件
另一个有用的UX改进允许您使用简单的键盘触发器[[插入内部链接。
在WordPress 6.0中添加内部链接更容易
借助新的区块间距控件，现在可以更轻松地控制图库区块中图像周围的空间。
没有区块间距的图像
具有区块间距的图像
但这些只是您从WordPress 6.0开始看到的一些改进。如需完整列表，请查看Gutenberg的发布说明。
小结
如上所述，我们现在可以说我们正处于Gutenberg开发的第二阶段，即定制阶段。
完整站点编辑现在是WordPress核心和6.0的一部分，以下版本将进一步改进我们已经拥有并可以立即使用的内容。所有这一切都将对WordPress生态系统和整个网络产生巨大影响，同时考虑到，在撰写本文时，
我们知道其内容管理系统的所有网站中有64.2%使用WordPress。这是所有网站的43.0%。（来源W3Techs）
我们暂时停在这里。我们的WordPress 6.0的功能和改进列表不能在一篇文章中穷尽，但希望我们至少强调了将对我们日常使用WordPress的方式产生最大影响的新增功能。
原文地址：https://www.wbolt.com/wordpress-6-0.html
