我们离WordPress 6.0的发布只有一小段时间了，像往常一样，我们偷看了幕后，给我们的读者一个预览，看看他们可以期待下一个WordPress的主要版本。
看看Kinsta在竞争中的表现如何比较
让我们马上说，如果说WordPress 5.9把我们带到了Gutenberg的第二阶段的核心，那么WordPress 6.0的目的是巩固已经有的定制工具。
但新版本不会仅仅如此。正如Matias Ventura在6.0的初步路线图中指出的，网站编辑器的引入标志着一个重要的里程碑，但也只是旅程中的第一步。
对于WordPress 6.0，我们可以期待，事实上，在CMS的几个领域，从可用性到性能，都有相当大的改进，包括以下内容：
- 改进信息架构和模板浏览体验
- 改进的模板创建
- 一个新的导航用户界面
- 一个新的网站编辑器的浏览模式
- 替代的全局样式
- 一个增强的导航块
- 新的设计工具
- 还有更多...
但等等，这还不是全部。WordPress 6.0还带来了令人印象深刻的变化、功能和错误修复，包括编辑器的400多项更新和500多项错误修复。超过189个票据已经被修复，包括91个新功能和增强功能。
是的，有很多要谈的。所以，让我们不要再拖延了，看看WordPress 6.0有什么新东西。
保存日期!🗓 WordPress 6.0定于5月24日发布，将带来改进的模板创建、替代的全局样式、新的块，以及更多更多。🎁 在这里查看即将发布的WordPress主要版本的新功能👇Clickto Tweet
Webfonts API
一个新的Webfonts API现在提供了一个标准化的方法来把Webfonts加载到WordPress，确保性能和用户隐私。
从WordPress 6.0开始，你只能从你的theme.json注册一个新的网络字体。
使用theme.json是非常直接的。你所需要做的就是在typography 部分添加一个新的字体家族。下面的代码提供了一个注册网络字体的例子。
"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字体添加到了Twenty Twenty-Two的默认集合fontFamilies 。如果你想自己试试，从谷歌字体下载Inter网络字体到*./assets/fonts文件夹，然后将上面的代码添加到Twenty Twenty-Two的theme.json*的settings.typography 部分。完成后，保存该文件并回到网站编辑界面。
下面的图片显示了编辑器中的结果：
一个新的字体家族已经在Twenty Twenty-Two中注册了。
Webfont API只注册在当前页面上渲染区块所需的字体，这对在样式变化中定义的Web字体特别有用。此外，该API通过按字体家族注册和排队，优化了HTTP请求的数量。
你可以在Webfonts API拉动请求和WordPress 6.0的Webfonts API状态中阅读更多关于新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 上找到上述例子中使用的完整代码。
开发人员可以在全局设置与样式和Theme.json文档文章中找到对全局样式和Theme.json的深入概述。
你也可以查看最新版本的Twenty Twenty-Two，它现在有三种新的风格变化。
浏览Twenty Twenty-Two中的样式。
到处都是块状图案
有一件事是肯定的，块状模式在现阶段的WordPress发展中起着核心作用。块状模式最早是在WordPress 5.5中引入的，随着时间的推移，块状模式已经被定期改进。
此外，从WordPress 5.9开始，模式目录中的模式进入了我们的WordPress网站，被动态地从模式目录中检索并加载到块插入器。
现在，由于一个全新的在线工具，任何人都可以成为一个模式开发者。图案创造者允许你建立、编辑和提交你最好的块状图案到图案目录。你只需要一个WordPress.org账户就可以开始了。
在图案创造者中搜索图片。
而WordPress 6.0对块状图案进行了进一步的改进。
首先，块状图案在模板编辑中更容易找到。现在，快速插入器只在你在模板的顶层访问它时显示块状图案，也就是说，当你要添加到模板的块状图案是文件的直接后代时。
这是在满足以下条件的情况下：
- 你正在编辑一个块状模板
- 快速插入器位于根层
- 你正在其他块之间添加一个块（即，既不是页面上的第一个也不是最新的块）
快速插入器只显示模板编辑器中的块模式。
现在还有一个有用的功能，使主题开发者能够将推荐的模式添加到主题.json中。要试一试，搜索模式目录，找到你想推荐给你的主题用户的模式，然后从URL中抓取模式的蛞蝓，并将其添加到你的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文件保存在你的pattern文件夹中：
<?php
/**
* Title: My pattern
* Slug: my-theme/my-pattern
* Categories: text
*/
?>
就这样了。你现在有了一个新的区块模式，可以在区块插入器中显示出来。
快速区块插入器中的自定义模式。
要想更全面地了解区块模式的发展，你可以关注GitHub上的跟踪问题。
网站编辑功能
完整的网站编辑开发并没有随着WordPress 5.9而结束。WordPress 6.0通过改进可视化主题构建功能和为块状主题提供新的模板选项，使事情更进一步。而且，更多的功能也在路上。
可视化主题构建
WordPress 6.0引入了一个改进的块状主题导出工具，它允许你下载当前的主题和你所有的修改和定制。
如果你到目前为止还没有使用块状主题导出工具，它是一个强大的网站编辑工具，允许你把你的样式和模板作为整个主题导出。
当你对你的改动感到满意时，在网站编辑器的界面上，打开选项侧栏，找到工具部分。这里有一个 "导出"按钮，允许你下载当前的主题，并将你所有的样式和模板定制在一个zip文件中。
从编辑器的界面导出一个主题。
然后你可以导出你的主题，并将其安装在任何WordPress网站上。
我们在本地的WordPress安装上测试了改进后的主题导出工具，发现几乎所有的东西都像我们预期的那样工作...... 😅。
无论如何，导出工具仍在开发中，今天我们只能瞥见它巨大的潜力。想想看，从你的网站的编辑界面创建你的主题，并把它们分发到任意数量的安装上的可能性。而这是无论你是否是一个开发者...
仍然有很多开放的问题需要解决，这使我们认为我们很快就会看到一些改进。如果你很好奇，想了解更多关于Visual Theme Building的信息（和我们一样），你可以关注GitHub上的跟踪问题。
块状主题中更多的模板选项
在以前的WordPress版本中，我们可用的模板类型数量有限。
在WordPress 5.9中添加一个新的模板。
现在，WordPress 6.0引入了几种新的模板类型，包括作者、分类、日期、标签和分类法。
在WordPress 6.0中添加一个新的模板。
这个新增功能应该可以简化你的网站编辑工作流程。要试一试，只要从下拉列表中挑选一个新的模板，添加必要的块，保存你的改动，然后检查它在前端的样子。是的，就这么简单。现在，把它和上面提到的主题导出功能结合起来考虑，你就会更好地理解我们对网站编辑的期望。
界面和易用性的改进
WordPress 6.0对用户界面引入了一些变化，其中许多是为了使侧边栏有秩序。所有这些变化应该对整个编辑体验有相当大的影响。在这里我们只提到其中的几个，但你可以查看Gutenberg发布说明，以获得更全面的变化清单（见Gutenberg12.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中的块状样式预览。
段落排版部分
为了使区块侧边栏有秩序，段落区块的Drop Cap控件已经从它的部分移到排版部分。
有了这个变化，所有的排版设置控件现在都被放在同一个板块下，导致了更一致的用户体验。
WordPress 5.9与WordPress 6.0中的排版设置。
边框和颜色设置移到了工具面板下
为了使混乱的设置侧边栏变得有序，边框设置和颜色设置控件被移到了工具面板上，可以在多种情况下展开和折叠。
注册订阅新闻简报
想知道我们是如何将流量提高到1000%以上的吗？
加入20,000+人的行列，获得我们的每周新闻通讯，了解WordPress的内部技巧
新的边界设置面板。
这个变化应该可以简化几个区块的编辑体验，并为侧边栏带来更多的一致性：
WordPress 6.0中的颜色面板。
帖子发布面板分类提醒
当你很匆忙或定期发布大量的博客文章时，你很容易忘记标签或类别。如果你经常看到自己处于这种情况，你会发现出现在帖子发布面板上的标签提醒非常有用。
现在，为了帮助网站管理员和作者确保他们的文章有必要的类别分配，随着WordPress 6.0，一个新的**建议。**当一个类别还没有被添加到帖子上时，一个新的建议：指定一个类别面板会出现在帖子发布面板上。
下面的图片比较了WordPress 5.9和6.0中的帖子发布面板。
WordPress 5.9和6.0中的帖子发布面板。
添加到网站编辑器中的代码编辑器
从WordPress 6.0开始，代码编辑器现在也可以在网站编辑器中使用。和帖子编辑器一样，你可以在选项菜单下找到代码编辑器。
WordPress 6.0把代码编辑器添加到网站编辑器中。
额外的增强
多重选择--现在可以跨多个区块选择文本。
选择跨越两个段落的文本。
块锁定用户界面- 在更多设置下拉菜单中的一个新的锁定项目打开了一个弹出窗口，你可以防止用户移动或删除块（或两者）。
锁定一组块。
这在模板编辑和可重复使用的块中特别有用，你也可以限制块的编辑。
锁定一个可重复使用的组块。
风格保留- 当你转换块或创建新的按钮时，现在会保留几种风格。
下面的图片显示了一个具有不同风格的列表块。
一个应用了不同样式的列表块。
当你将List块转化为段落时，新的块会保留与之前的列表项相同的样式。
将一个列表转换为段落。
同样的改进也适用于添加到Buttons块的新按钮，现在它们继承了相邻按钮的样式。
新的核心区块
核心块的数量在不断增加。如果你想知道目前有哪些核心块，现在有一个手册页面提供了Gutenberg插件中包含的核心块的完整列表。对于每个区块，都提供了名称、类别、支持和属性，以及区块开发者会喜欢的源代码的有用链接。
而更多的区块将随着WordPress 6.0的到来而出现。在这里，你可以找到即将到来的版本中你所期待的块。
评论查询循环
与查询循环块类似，一个新的评论查询循环块显示帖子的评论。它是一个高级块，包括几个内部块，你可以单独编辑和配置。
如下图所示，你可以选择评论查询循环区块中的任何一个区块，按你的意愿定制其外观。你还可以添加更多的块，或者移动或删除现有的块（源代码）。
配置注释查询循环块。
阅读更多
一个新的、可定制的**"阅读更多 "**块允许你定制"阅读更多 "按钮的不同方面：边框、颜色、角落、排版等等（源代码）。
纠结于停机时间和WordPress问题？Kinsta是为节省您的时间而设计的托管解决方案查看我们的功能
这是一个很好的补充，因为它允许你在摘录块的背景之外添加和定制 "更多 "链接。
新的 "更多信息 "块。
查询循环中没有结果
无结果区块是一个区块容器，你可以在其中添加任何文本或区块，以便在查询没有结果时显示。要将无结果块添加到查询循环中，只需选择查询循环并点击右下角的加号图标来启动快速插入器。然后搜索 "无结果"。该块在查询循环之外是不可用的（源代码）。
将 "无结果 "块添加到查询循环中。
头像和文章作者传记
WordPress 6.0还引入了新的块类型，可以将作者块分割成其组成部分，并在你的内容中分别使用它们。
头像块简单地显示了一个用户的头像，允许你在网站作者之间进行选择（源代码）。
WordPress 6.0中的Avatar块。
这个块对于在作者信息块或评论的范围之外显示作者的头像特别有用。例如，你可以在一个专门介绍所有作者的页面上使用它，或者在显示你的用户/读者的评论的页面上。
对现有区块的改进
WordPress 6.0还引入了对现有块的一些变化和改进，这些变化和改进有可能对你的编辑工作流程产生很大影响。导航块将受到几个变化的影响，但你也会看到其他块的改进，包括查询循环、特色图片、组和社交图标。
导航块的改进
在过去的几个月里，导航区块得到了一些改进，现在它的界面明显更容易使用。
首先，导航链接块增加了一个丰富的预览。当你添加一个指向可公开访问的资源的链接时，点击区块工具栏中的链接按钮会显示该资源的预览图片。
导航链接的丰富预览。
一些额外的变化影响了整体的编辑体验。
现在，当你添加一个新的菜单并且只有一个导航菜单存在时，那么它默认为唯一可用的菜单。如果你只有一个导航菜单，这一变化应该可以加快你的编辑工作流程。
导航链接已经有一个描述字段，用户可以在那里输入描述他们的导航链接的文字。然而，在以前的WordPress版本中，主题不能支持这个功能。
现在，随着WordPress 6.0的推出，一个<span class="wp-block-navigation-item__description"> 出现在链接的标签之后。
导航链接的描述出现在链接的标签后面。
在Twenty Twenty-Two中，.wp-block-navigation-item__description 元素是通过CSS隐藏的，但主题可以添加一个display: block 属性来显示链接描述。
WordPress 6.0和Twenty Twenty-Two中的导航链接描述。
查询循环过滤器和特色图片
查询循环过滤器设置部分现在显示自定义分类法的输入字段。这使用户能够通过为所选帖子类型注册的一个或多个自定义分类法来过滤当前的帖子类型。
现在还可以按多个作者过滤帖子，而在以前的版本中，只允许从一个下拉菜单中选择一个作者。
WordPress 6.0中的查询循环过滤器设置。
此外，你现在也可以在一个查询循环块中设置精选图片的尺寸。
在查询循环块中控制特色图片的尺寸。
响应式组块中的排版和边框支持
组和行块现在支持排版设置。这一变化允许用户将相同的排版设置一次性应用于整个组块，当涉及到格式化一个包含几个嵌套块的组时，可以节省一些点击次数。
组块的排版设置。
组块得到了进一步的改进，现在你只需点击一下，就可以轻松地在堆栈或行中组块。
只需选择你想分组的块，然后从块工具栏中的三个控件中选择一个。组、行、堆栈。
一旦你对块进行了分组，设置侧边栏中的一个新面板就会显示组的变化描述，使你能够通过几次点击切换变化。
行块则是水平地显示块。
WordPress 6.0还为组块引入了边距支持，使用户能够分别控制顶部和底部的边距。
用组块控制边距。
封面块中的特色图片
现在你可以在封面区块中使用特色图片了，因为WordPress 6.0在区块的工具栏中增加了一个使用特色图片的切换键。由于这个新的控件，你可以通过一次点击从当前图片切换到特色图片。
在封面块中使用特色图片。
在社交图标中显示/隐藏标签
社交图标块的一个小但有用的改进，现在使用户能够切换图标链接标签的开/关。
一个显示标签控件允许在社交图标中打开/关闭标签。
当启用这个选项时，你可以显示默认的服务名称或为你的图标单独设置自定义标签。
显示标签已打开。
额外的区块增强功能
即将推出的WordPress版本还为许多其他块带来了大量的增强功能。
例如，现在你可以控制Columns块的边框（Gutenberg12.7）。
列块的边框控制。
另一个有用的用户体验改进允许你使用一个简单的[[ 键盘触发器来插入内部链接。
在WordPress 6.0中添加内部链接更容易了。
由于有了新的Block spacing控件，现在更容易控制Gallery块中的图片周围的空间。
没有区块间距的图片。
有区块间距的图片。
但这些只是从WordPress 6.0开始你将看到的一些改进。关于完整的列表，请查看Gutenberg的发布说明。
你已经知道WordPress 6.0会有哪些功能了吗？不知道......？🙀 那就不要错过这个关于WordPress 6.0的深度预览🎉点击转发
如何在本地开发环境中安装WordPress 6.0
如果你想在正式发布之前尝试一下WordPress的开发版本，请遵循以下步骤：
- 打开DevKinsta，创建一个新的本地WordPress网站
- 完成后，打开你的WordPress仪表盘，导航到插件→添加新的插件
- 搜索并安装WordPress Beta Tester插件
- 激活该插件，并进入工具→Beta测试
- 在WP Beta Tester设置选项卡中选择Bleeding edge选项并保存设置。
- 回到你的WordPress仪表板，打开更新屏幕并更新到最新的夜间版本。
这就是全部!现在你有一个本地的WordPress开发安装，你可以自由地运行你所有的测试。看一看，让我们知道你对新功能的看法。
有了DevKinsta，你只需要点击几下就可以在你的本地机器上拥有一个现代的WordPress开发环境。🖥
在这里免费下载DevKinsta!👈
总结
如上所述，我们现在可以说，我们正处于Gutenberg开发的第二阶段，即定制阶段的中期。
全站编辑现在是WordPress核心的一部分，6.0和下面的版本将对我们现在已经拥有和可以使用的东西带来进一步的改进。所有这些将对WordPress生态系统和整个网络产生巨大的影响，也考虑到，在写这篇文章的时候。
在我们所知道的内容管理系统的所有网站中，有64.2%使用WordPress。这是所有网站的43.0%。(来源：W3Techs)
我们暂时就到这里吧。我们对即将到来的WordPress 6.0的功能和改进的清单不可能在一篇文章中穷尽，但希望我们至少已经强调了将对我们每天使用WordPress的方式有最大影响的新增功能。
现在，我们想用一些问题来结束这篇文章，供我们的读者参考
你是否已经在使用FSE建立你的网站？你认为新的编辑器是一个适合建立专业网站的工具，还是你认为在你可以使用它进行商业活动之前，它仍然需要改进？你是否已经测试了6.0版本中的新WordPress功能？
请在下面的评论区与社区分享你的想法。👇
节省时间、成本，并通过以下方式最大限度地提高网站性能：
- 来自WordPress托管专家的即时帮助，24/7。
- Cloudflare企业集成。
- 全球32个数据中心，覆盖全球观众。
- 通过我们内置的应用程序性能监控进行优化。
