WordPress 6.3新功能：网站编辑器改版、新命令面板、样式修订版本、新区块等！

WordPress 6.3 是 WordPress 路线图第二阶段的最后一个重要版本。在第二阶段，开发工作主要集中在网站编辑器上，增加了其功能，并改进了界面和可用性。

现在，网站创建者可以在同一个界面上设计布局和管理内容，无需从一个管理区跳转到另一个管理区，也无需编写一行代码。

随着 WordPress 6.3 的发布，10 个版本的 Gutenberg 插件合并到了核心中，如果你的网站没有使用 Gutenberg，你会发现网站编辑器的界面发生了很大变化。

在 WordPress 6.3 中，编辑体验得到了显著改善。一些技术上的变化影响了网站编辑器，从而产生了一种探索块主题和使用网站编辑器本身的新方式。改进的导航、免打扰模式、区块主题预览、样式和模板修订、新的命令面板等等。

关于 WordPress 6.3，我们还有很多话要说。所以，不要再等待了，让我们来看看第二阶段的最终版本有哪些新功能吧。

1. 增强网站编辑器中的导航功能
2. 新的区块样板系统
3. 网站编辑器中的样式修改
4. 命令面板
5. 网站编辑器的其他功能和改进
6. 新区块和改进的设计工具
7. 针对开发人员的性能增强和更改

增强网站编辑器中的导航功能

在 WordPress 6.3 中，网站编辑器的导航功能得到了显著改进，增加了通往编辑器不同区域的新入口。在 6.3 版之前，这些管理部分可以通过放置在不同管理菜单和屏幕中的入口点进入。这些更改带来了更轻松、更一致的编辑体验。

下图比较了 WordPress 6.2 和 6.3 中编辑器的导航菜单。

WordPress 6.2 与 6.3 中的网站编辑器导航

在上图中，你首先会注意到编辑器侧边栏右上角显示的两个按钮。查看网站按钮会在鼠标移动时出现，可以快速访问 WordPress 网站的前端。这是一个小而实用的新增按钮，无论你在网站编辑器中的哪个位置，当导航菜单打开时，都可以快速访问网站页面。

打开命令面本按钮（放大镜图标）可以访问 WordPress 6.3 的新功能–命令面板（下文将详细介绍）。

网站编辑器中的 “查看网站” 和 “打开命令面板” 按钮

新的编辑器导航包括以下项目。

1. 导航
2. 样式
3. 页面
4. 模板
5. 样板

导航

创建导航菜单后，它就会出现在网站编辑器的导航菜单中。在这里，您可以上下移动菜单项，或从下拉菜单中删除它们。您还可以拖放项目来安排菜单顺序。

网站编辑器中的导航菜单

点击菜单项可进入页面详情。在这里，您还可以编辑页面内容和布局（见下文）。

样式

通过 “样式” 菜单，您可以在浏览模式下访问各种样式。在这里，您可以预览可用的样式，应用其中一种并进行自定义。

WordPress 6.3 的样式菜单

眼睛图标可启动 “样式手册“，这是 6.2 版推出的一项功能，可在不离开编辑器界面的情况下预览应用了不同样式的可用区块。

您可以通过网站编辑器的样式面板轻松访问样式手册

页面

通过 “页面” 菜单项，您可以访问最近更新的 10 个网站页面以及若干编辑功能。在这部分中，您可以创建新页面、编辑现有页面的内容和布局、访问页面详细信息等。

这里最有趣的新增功能是，现在可以不离开编辑器界面就能创建新页面。

点击导航面板中的 + 图标后，页面中间会出现一个新的模态窗口，允许你为新页面设置标题，同时还会显示一个工具提示，为你的标题提供建议。

在 WordPress 6.3 中创建新页面

单击 “新建页面” 后，就会跳转到已加载新页面的 “文章编辑器”。

在 “页面” 下，您还可以直接从网站编辑器编辑页面内容。

WordPress 6.3 中的页面菜单

现在，您可以在同一个地方编辑页面内容和样式。这让你可以更好地控制页面的方方面面，大大改善了编辑体验。

在编辑模式下，您可以在页面编辑器和模板编辑器之间轻松切换。这样可以避免对编辑内容产生任何混淆，并让你确定所做更改是只影响当前页面，还是也适用于使用相同模板的其他页面。

同一屏幕还可显示页面详细信息。

网站编辑器中的页面详细信息

目前的详细信息包括

• 状态
• 别名
• 模板
• 父级
• 字数
• 阅读时间
• 最后修改

模板

在这里可以访问页面模板。模板界面的结构变化不大。不过，在 WordPress 6.3 中，当您创建一个新模板时，会有一个新的模态叠加提供一个页面列表，供您选择模板。

在创建新模板时，新模板提供了一个可供选择的默认页面列表

第二步，一个新的模板窗口会提供一个区块样板列表，您可以用它来创建模板。

在模板创建过程中选择样板

样板

在上一次迭代中被命名为 “库” 的 “样板” 管理部分反映了涉及区块样板系统的许多显著变化。这些变化不仅仅是用户界面的变化。它是对整个区块样板架构的全面改造。

WordPress 6.3 中的样板屏幕

在样板管理部分，您可以管理模板部件和样板。这里有一个菜单，可以按类别访问模板部件和区块样板。锁定图标表示用户不能修改的主题样板。

网站编辑器新样板部分中的模板部件和主题样板

在这一部分，您可以创建新的模板部件和自定义区块样板，并与主题样板一起管理它们。

在 WordPress 6.3 中创建新的模板部件和区块样板

单击 “创建样板” 按钮后，弹出一个新的样板窗口，允许您为样板指定名称，并设置要创建的样板类型（同步或不同步）。

在 WordPress 6.3 中创建同步样板

创建至少一个自定义图区块样板后，就可以从 “我的样板” 中访问它，它将出现在样板菜单的顶部。

在 WordPress 6.3 中的我的样板

您可以选择区块样板，然后进入一个新的面板，查看样板的细节。通过向右或向左移动手柄，可以预览不同分辨率下的样板并检查其响应速度。

细节部分显示当前样板的同步状态。

在 WordPress 6.3 中预览自定义区块样板

在 “样板” 菜单的底部，您还可以找到几个链接： 管理所有模板部件和管理我的所有样板。通过这些链接可以直接访问模板部件和自定义样板。

这就是网站编辑器中新的样板管理界面。现在让我们了解一下区块样板系统的结构和功能有哪些变化。

新的区块样板系统

从 WordPress 6.3（和 Gutenberg 16.1）开始：

• 可重复使用区块已更名为同步样板，
• 基本区块样板现在被命名为非同步样板，
• 扩展了 wp_block 自定义文章类型，以支持自定义字段，并添加了一个新的 wp_block_sync_status 元字段，用于存储样板的同步状态，
• 在区块样板和响应中添加了 source 属性，以区分核心样板和用户样板，
• 扩展了 REST API，增加了一个新属性。

 wp_block_sync_status 元字段用于存储区块样板的同步状态

现在可以更清楚地看到，对同步样板所做的所有更改都将应用到整个网站上出现的每个区块。

相反，对非同步区块样板所做的更改只会影响该样板的特定实例，而不会应用到您可能添加到网站其他文章或页面的任何其他实例。

借助新的样板管理系统，您现在可以直接在网站或文章编辑器中创建同步或不同步的区块样板，而以前只能创建可重复使用区块（现在是同步样板）。

要在文章编辑器中试用这项新功能，请打开 WordPress 面板，然后转到文章 -> 写文章。在那里，创建一组新的区块，或者直接选择要添加到区块样板中的区块。然后从区块工具栏的弹出菜单中选择创建样板/可重复使用区块。

在文章编辑器中创建样板/可重复使用区块

此外，在网站编辑器中，创建样板按钮允许您创建新的模板部件或样板。

在网站编辑器中创建新样板

单击 “创建模板部件” 打开一个模态/弹出窗口，让您为模板部件添加名称以及模板部件在页面中的位置。

在网站编辑器中创建模板部件

单击 “创建样板” 后，会弹出一个不同的样板/弹窗，允许您为样板设置名称，并选择创建同步或非同步样板。

在网站编辑器中创建样板

在网站编辑器中确认并创建样板或模板部件。

在网站编辑器中创建区块样板

对编辑满意后，保存区块样板并返回网站编辑器。打开样板部分，点击 “管理我的所有样板“。样板屏幕上将显示新的自定义区块样板。

WordPress 6.3 中的样板屏幕

区块样板还利用了图片区块的宽高比控件。现在，如果您为图片设置了宽高比，那么当您将图片换成另一张不同尺寸的图片时，宽高比将得到保留。这对区块样板特别有用，因为在区块样板中更换图片时，你不再需要关心图片的尺寸。

图像区块宽高比控制

有关对图片区块样板系统所作更改的更深入概述，请参阅 PR  #51078, #51144, 和 #50028.。

网站编辑器中的样式修改

网站编辑器现在提供了修订历史记录，让您可以浏览更改并选择一个进行恢复。

要访问修订历史，请单击样式面板中的修订版本按钮。

在 WordPress 6.3 中访问修订版本

该面板以时间轴的形式提供修订列表。它还在工具提示中提供每个修订的作者姓名以及每个修订的日期和时间。您可以预览所有修订，并选择要恢复的修订。

WordPress 6.3 中的样式修订版本

您可以在全局样式界面中浏览修订版本，预览并随时恢复内容。

修订版本的开发不会就此停止。进入第 3 阶段后，修订版本将受到新添加内容和增强功能的影响，这些内容和增强功能将进一步提高修订版本的可用性并释放新功能。

命令面板

命令面板是一项新功能，可让您使用命令执行常用操作，例如跳转到编辑器中的其他页面或模板。

在网站编辑器中，点击镜头图标或点击 cmd + k （Windows 和 Linux 系统为 ctrl + k ）。这将启动命令面板。

当你开始键入命令时，命令面板提示各种命令供你选择。这为执行任务或进入站点编辑器的特定区域提供了一种快捷方式。

WordPress 6.3 中的命令面板

该功能的首次实施带来了快速搜索功能和一些操作，如导航网站编辑器、创建新文章/页面、切换用户界面元素、重置或删除模板或模板部分等。在未来的迭代中还会添加更多命令。

新工具将带来无穷无尽的使用案例。例如，在显示特定文章或页面的设计选项时，可能需要使用命令调色板。

借助新的命令面板 API，您还可以注册自定义命令，以呈现、注册和取消注册命令。

根据要注册的命令类型不同，注册命令的方法也不同。

• 静态命令：开发人员可以使用 wp.data.dispatch( wp.commands.store ).registerCommand 操作或 wp.data.useCommand React 钩子注册自定义静态命令。
• 动态命令：这些命令包含在命令列表中，取决于用户在命令面板输入框中输入的搜索词，或者当某个命令仅在满足某些条件时可用。
• 上下文命令：这些命令在特定上下文中具有优先权，也就是说，它们会自动出现在正确的上下文中（例如，当你正在编辑模板时）。重置模板和删除模板命令就是上下文命令的例子。目前已实现两种上下文：
  • 站点编辑器：该上下文在浏览网站编辑器时设置
  • site-editor-edit（站点编辑器-编辑）：在编辑器中编辑某些内容（模板、模板部分或页面）时设置此上下文

您可以在浏览器控制台运行 wp.data.select( wp.commands.store ).getCommands() 获取可用命令列表。

在 WordPress 6.3 中列出命令

命令面板最初可用于 “文章” 和 “网站” 编辑器，将来会扩展到整个管理员界面。

有关命令面板的开发人员预览，请查看请求回调。

网站编辑器的其他功能和改进

除了前面几节讨论的功能和改进之外，WordPress 6.3 还为我们带来了：

1. 网站编辑器中的主题预览
2. 加载状态改进
3. 免打扰模式
4. 其他用户界面改进

网站编辑器中的主题预览

从 6.3 开始，新的 theme_preview 参数允许在网站编辑器中加载每个区块主题，并在激活前进行预览。

在网站编辑器中预览 TT1 区块主题

要预览区块主题，请导航至外观 > 主题屏幕，然后将鼠标悬停在任何区块主题上。你会在每个块主题上方看到一个实时预览按钮。只需点击该按钮，即可在网站编辑器中启动主题预览。对于非区块主题，实时预览按钮会启动主题定制器。

加载状态改进

WordPress 6.3 对编辑器的加载状态进行了改进，以防止用户在编辑器完全加载之前进行交互。

现在，在加载完成之前，用户无法与编辑器进行交互

免打扰模式

WordPress 6.3 在网站编辑器中引入了免打扰编辑模式。这与 WordPress 6.2 中的文章编辑器的功能相同。

网站编辑器中的免打扰模式

您可以在网站编辑器的选项面板中激活这一功能。一旦启用 “免打扰模式”，边栏和工具栏就会消失，让您可以专注于编辑工作。

其他用户界面改进

• 新的 <ViewLink> 组件现在可显示一个按钮，用于在新窗口中打开任何已发布的文章类型。这是一个小而实用的功能，让您无需在设置侧边栏中搜索链接，即可查看当前的文章类型（PR #50260）
• 改进了模板说明，以更好地解释每个模板的具体功能。这将有助于用户在网站编辑器中选择正确的模板进行自定义。
• 以前，双色调过滤器设置只能在区块工具栏中使用。在 6.3 中，现在可以通过设置侧边栏使用双色调控制（PR #49838）
• 在 WordPress 6.3 之前，大字体在小屏幕上的缩放不够。现在，由于采用了对数缩放因子来计算小屏幕的最小字体大小，流体排版可以平滑缩放 (PR #49707)

新区块和改进的设计工具

WordPress 6.3 还提供了一些有用的区块，应该会让很多内容作者感到高兴。

1. 新的阅读时间区块
2. 新脚注区块
3. 新的详细信息区块
4. 封面区块增强
5. 增强型双色调过滤器
6. 其他改进

新的阅读时间区块

新的 “阅读时间” 区块显示当前页面或文章的平均阅读时间。该区块对长篇内容尤其有用，因为它可以让网站读者组织阅读并保存内容以供稍后使用。

带设置侧边栏和文档概览的 “阅读时间” 区块

区块中显示的时间值与详细信息面板中显示的值一致。根据《Investigative Ophthalmology & Visual Science》的研究，平均阅读率设置为 189。开发人员可以在 GitHub 上查看该区块的代码。

新脚注区块

WordPress 6.3 还为我们带来了超级实用的脚注区块。

为文本区块添加脚注

有了这个新功能，只需点击几下就能在文本区块（段落、标题和列表）中添加脚注。将光标放在要添加链接的位置，然后点击文本区块上下文菜单中的脚注按钮。这将在页面底部添加脚注。

WordPress 6.3 中的脚注区块

脚注区块会在您编辑文本时自动添加、删除脚注并重新排序，这一点非常有用，尤其是对长篇文章而言。

新的详细信息区块

现在，有了新的 “详细信息” 区块，您可以隐藏一段内容，直到读者准备好阅读您的常见问题、观看您的视频或收听您的精彩播客。

带有摘要和隐藏内容的空 “详细信息” 区块

新区块由两个独立元素组成：摘要和隐藏内容。默认情况下，内容是隐藏的，但您可以在区块设置边栏中更改设置。

包含摘要和视频内容的详细信息区块

该代码块使用了一个带有富文本 <summary> 的 <details> 元素和一个包含隐藏元素的 <div> （另见 PR #45055）。

封面区块增强

封面区块增强了一些设计功能，使其更易于使用，并为自定义提供了更多可能性。

首先，封面区块现在支持文本颜色设计工具。有了这项新增功能，用户和主题作者只需设置封面区块上的文字颜色，就可以更改所有内部区块的颜色。此外，由于文字颜色现在可以顺利传递到生成的区块，因此可以更轻松地处理来自媒体和文本区块的转换。

封面区块现在支持文本颜色设计工具

WordPress 6.3 对封面区块的另一项新增功能是支持所有与边框相关的设计工具。这一新增功能可减少对自定义区块样式的需求。

封面区块的边框控制

WordPress 6.3 还为封面区块添加了对约束/流程布局的支持，现在可以像处理组区块一样处理封面区块。这一改动增加了布局处理的一致性，肯定会使用户和主题开发人员更容易进行定制。

封面区块的布局设置

不过，主题开发人员应在现有主题上进行一些测试，因为区块布局系统可能会覆盖自定义实现。

增强型双色调过滤器

一些更改改进了我们使用双色调滤镜的方式。

首先，您现在可以在网站编辑器的样式面板中全局设置双色调过滤器。以前，您只能在theme.json中全局应用双色调滤镜。

在网站编辑器的样式面板中应用双色调过滤器

之所以可以这样做，是因为双色调值现在是使用颜色标签而不是颜色值来设置的。这也意味着，只要使用相同的标签，您就可以一次性设置双色调值，并将其应用到当前主题或主题变体中。

最后，对于那些精通技术的人来说，Duotone 样式现在使用 WordPress 样式引擎生成，并与支持 CSS 的区块一起存储，而不是内联。

其他改进

• 按钮区块现在支持边框颜色、样式和宽度 (PR #44574)
• 为 “文章摘要” 区块添加了摘要长度控制 – https://github.com/WordPress/gutenberg/pull/44964
• 现在可以控制文章特色图片区块的长宽比 (PR #47854)
• 全局样式界面现在包含了标题元素的颜色和排版控制（PR #49141）
• 在发布日期区块中添加了文章修改日期变体。如果你想快速添加文章修改日期而不是发布日期，这将非常有用（PR #49111）
• 现在可以从侧边栏更换网站Logo (PR #49992)

针对开发人员的性能增强和更改

WordPress 6.3 还带来了许多更改和新功能，旨在改善网站性能和开发人员的工作流程。在众多新增功能中，我们挑选了以下几项：

1. 放弃对 PHP 5 的支持
2. 图像加载性能增强
3. 支持 HTML 5 异步和延迟属性
4. 开发模式
5. 针对开发人员的其他更改

放弃对 PHP 5 的支持

从 WordPress 6.3 开始，将不再支持 PHP 5。新的最低支持版本将是 PHP 7.0.0，建议使用 7.4 或更高版本的 PHP。7.4也是WordPress网站使用最多的版本，占WordPress网站总数的50.8%。

截至 2023 年 7 月现有 WordPress 网站使用的 PHP 版本（图片来源：WordPress.org）

这不仅对开发人员很重要，对所有 WordPress 用户也很重要，因为它可以提高网站的安全性和性能。

截至 2023 年 7 月支持的 PHP 版本（图片来源：PHP.net）

图像加载性能增强

从 WordPress 6.3 开始，取值为 "high" 的 fetchpriority 属性会分配给图像，以确定它是否是 LCP（最大内容绘制）图像，而最大内容痛点是一个指标，用于报告视口中最大元素的呈现时间。

fetchpriority 属性指示浏览器在计算布局之前就优先处理该图片。

另一项改进是使用 loading 属性自动处理图片的懒加载。该属性最初是在WordPress 5.5中引入的，后来在WordPress 5.9中进行了改进，省略了第一张内容图片的 loading="lazy" 属性（请参阅WordPress 5.9中的懒加载性能改进）。现在，在WordPress 6.3中，所有遗留问题都已得到解决，从而实现了良好的性能改进。

fetchpriority 和 loading 属性现在都由新函数 wp_get_loading_optimization_attributes() 控制。该函数返回一个关联数组，其中包含用于优化加载性能的属性。目前，该函数可能返回的属性有：

• 值为 "lazy" 的loading
• 值为 "high" 的 fetchpriority 属性

请注意，任何元素都不能同时拥有这两个属性，因为它们是相互排斥的。如果一个元素同时包含这两个属性，则会触发警告。

有关 wp_get_loading_optimization_attributes() 函数、 fetchpriority 和 loading 属性的更深入概述及使用示例，请参阅 WordPress 6.3 中的图像性能增强。

支持 HTML 5 async 和 defer 属性

async 和 defer 是两个 HTML 5 属性，用于指示浏览器在不暂停 HTML 解析的情况下下载 JavaScript。

这两个属性之间有一个关键区别：

• 带有 async 属性的脚本在加载后会立即异步执行。脚本加载完成后，浏览器会暂停 HTML 解析并执行脚本。
• 而带有 defer 属性的脚本只有在页面解析完成后才会被执行。

从WordPress 6.3开始，您现在可以使用 wp_register_script() 或 wp_enqueue_script() 函数中的 $in_footer 布尔参数，注册具有 async 和 defer 属性的脚本（另请参阅如何在WordPress中排序您的资产）。

该参数已被重载，现在可接受一个新的 $args 数组参数，允许您为脚本指定加载策略。

下面举例说明如何使用 wp_register_script （代码与 wp_enqueue_script 相同）在插件的 PHP 文件中定义延迟策略：

wp_register_script( 
'custom-script', 
plugins_url( '/js/custom-script.js' , __FILE__ ), 
array(), 
'1.0.0', 
array(
'strategy' => 'defer'
) 
);

允许向后兼容，因此您可以继续指示 WordPress 在页脚加载您的脚本：

wp_register_script( 
'custom-script', 
plugins_url( '/js/custom-script.js' , __FILE__ ), 
array(), 
'1.0.0', 
array(
'in_footer' => true,
'strategy' => 'defer'
) 
);

有了新的实现，现在就可以防止脚本在脚本依赖树中以意外的顺序加载，而在 WordPress 6.3 之前的工具是无法做到这一点的。有关脚本应用程序接口更改的详细概述，以及其他示例和技术细节，请查看 Simon Dowdles 的开发说明。

开发模式

WordPress 6.3 引入了一种新的开发模式，开发人员可以使用新的 WP_DEVELOPMENT_MODE 常量启用该模式。任何开发网站都建议使用这个新常量，其值取决于正在进行的开发类型。

WP_DEVELOPMENT_MODE 可以使用以下其中一个可能的值：

• core – 用于表示网站被用作核心开发环境。
• plugin – 用于开发插件。
• theme – 用于主题开发。
• all – 表示网站用于所有三种类型的开发。
• 默认为空字符串，表示网站不用作开发环境。

WP_DEVELOPMENT_MODE 应仅用于开发安装。它与生产无关。

开发模式会影响 WordPress 行为的某些底层方面。在撰写本文时，唯一的区别是主题.json 文件的缓存，当 WP_DEVELOPMENT_MODE 设置为 'theme'时，缓存将被绕过。

WP_DEVELOPMENT_MODE 的工作方式与通常在开发中使用的 WP_DEBUG 和 WP_ENVIRONMENT_TYPE 常量不同，因为 WP_DEBUG 和 WP_ENVIRONMENT_TYPE 不会以任何方式影响 WordPress 的行为。当 WP_ENVIRONMENT_TYPE 为 'development' 或 'local' 时，您可能会使用 WP_DEVELOPMENT_MODE ，因为开发不应该发生在实时网站上。

您可以通过这种方式启用开发模式：

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 还引入了一个新的 wp_in_development_mode() 函数，让您可以检查网站是否处于开发模式。通过 $mode 参数，新函数还可以检查当前的开发类型，该参数的可能值为 'core', 'plugin', 和 'theme'：

if ( wp_in_development_mode( 'theme' ) ) { ... }

您还可以在站点健康工具的信息面板中查看 WP_DEVELOPMENT_MODE 的当前值。

针对开发人员的其他更改

• 主题开发人员现在可以在注册模板样板时使用 template_types 属性指定一个或多个模板类型，以便将其包含在用户创建新模板时出现的模态叠加中。
•  get_pages() 函数已更新，现在内部使用 WP_Query 。
• 对 WP_User_Query 类进行了重大改进，特别是实现了WP_Query 缓存。
• 对缓存 API 进行了多项改进。
• 编辑网站链接现在可以加载当前模板，而不是编辑器的主页。
• 新的区块选择器 API 允许为区块配置多个 CSS 选择器，以便在全局样式中使用。
• 社交图标应用的颜色现在可根据 theme.json 和全局样式动态更新。
  更多更新涉及国际化（I18N）和布局支持。

小结

随着 WordPress 6.3 的发布，我们进入了古腾堡开发路线图的第二阶段：自定义。这个新版本为我们带来了编辑体验上的重大改进，包括网站编辑器中的新编辑功能、新的更灵活的区块样板系统、新的区块、更好的性能、可访问性和国际化方面的改进等等。

WordPress的下一个版本预计将于2023年11月发布，我们将进入第三阶段：协作，其主要目标是为编辑器带来先进的协作功能。