新功能、新区块、新 API:WordPress 6.9 的新变化

WordPress 6.9 即将发布,我们迫不及待地想使用这个全球最流行 CMS 最新版本中包含的众多精彩新功能。

概览来看,WordPress 6.9 的主要改进领域包括:

  • 新的核心区块(折叠面板、数学等),为内容创建提供更大的灵活性。
  • 重大编辑器改进,使构建体验更加流畅和直观。
  • 新的开发者 API,如能力 API、交互性 API 的更新以及区块绑定 API,以及 6.9 版本计划的其他升级。
  • 工作流程和协作改进,包括笔记、区块可见性选项,以及命令面板的扩展。

这些更新确保为所有人带来更好的体验:WordPress 用户将享受更强大的编辑和协作工具,而开发者则将从增强的 API 集中受益,获得更先进的集成能力。

内容很多,让我们来探索 WordPress 6.9 中最令我们兴奋的新功能:

新的核心区块

这个 GitHub 问题之后,WordPress 6.9 引入了六个新区块,扩展了区块编辑器的创意能力,无需用户安装额外的插件。这些新区块包括折叠面板分类查询阅读时间数学评论数评论链接

多年来,贡献者一直在争论新区块应该存在于核心中还是留在插件领域。WordPress 6.9 采取了一条务实的前进道路。用 Mathias Ventura 的话来说:

我认为这些区块不在核心库中会严重限制主题构建者(和用户)可以依赖的表达能力,以构建出色的设计,并且可能会破坏整体体验,迫使人们转向更完善的区块库,或者如果计划发布广泛使用的内容就完全放弃。

现在,让我们仔细看看随 WordPress 6.9 合并到核心中的每个新区块。

折叠面板

期待已久的折叠面板区块终于要进入核心了。它不是一个单一的区块,而是一个嵌套的区块结构,你可以在区块检查器中轻松探索它。

accordion block structure
文章编辑器中的折叠面板区块结构。

每个折叠面板区块由以下内部区块组成:

  • 折叠面板: 嵌套折叠面板项的容器。
  • 折叠面板项: 它是直接嵌套的元素,由一个标题和一个面板组成。
  • 折叠面板标题: 一个可点击的标题,用于打开和关闭面板。
  • 折叠面板面板: 该面板包含折叠面板项内容,可以包含任何类型的区块。
accordion block code
代码编辑器中的折叠面板区块。

该区块具有极简风格,但 Justin Tadlock 的优秀指南 “在 WordPress 6.9 中设置折叠面板样式” 提供了自定义折叠面板外观的基本知识。

查看 PR #64119#71222#71388 以获取新折叠面板区块的完整详情。

分类查询

WordPress 6.9 引入了新的分类查询区块。类似于查询区块,它显示分类而不是文章。这个新区块实际上是一个分类模板,包含一个区块,带有分类名称分类计数

terms query block structure
Terms Query 区块结构

Terms Query 区块附带多个配置选项。您可以设置分类法、对列表项进行排序、指定选中项,以及选择显示或隐藏空项或嵌套项。您还可以设置要显示的术语数量。

terms query block settings
Terms Query 区块设置

Term Template 有两种显示模式:列表和网格。网格视图允许您自定义网格元素的位置和列数。

terms query block grid view
Terms Query 区块有两种模式:列表和网格

您还可以更改区块元素的标签。例如,您可以使用 h2 元素作为 Term Name 区块。您也可以在 Terms Query 区块的元素之间插入区块。下图展示了行之间的分隔符区块。

terms query block customization
自定义 Terms Query 区块

要了解更多关于 Terms Query 区块的信息,请查看 PR #70720 和 Issue #49094

阅读时间

顾名思义,阅读时间区块显示当前文章或页面的阅读时间。该区块有两种模式:阅读时间和词数统计,并有一个选项可将阅读时间显示为范围或具体数值。

time to read block
阅读时间区块
word count mode
词数统计模式下的阅读时间区块

数学

数学区块允许您插入数学公式到您的内容中。只需使用 LaTeX 语法 编写公式,它们就会被转换为相应的数学符号。

math block
数学区块允许您在文章和页面中插入数学公式。

也可以插入行内公式。

inline math
在 WordPress 6.9 中添加行内数学

评论链接和评论数

评论链接评论数区块不再标记为实验性。这两个区块现在都可以在站点编辑器和文章编辑器中使用。

现有区块的改进

WordPress 6.9 为众多区块引入了次要和主要更新,提升了它们的功能和/或可用性。

修复了标题区块的背景填充问题

WordPress 6.9 修复了标题区块背景填充的 CSS 特异性问题。在此版本之前,应用到标题区块的填充样式会影响其他使用标题的区块,例如手风琴区块。

得益于 :where() 伪类的使用,使用背景的标题的 CSS 选择器变得更加具体,如开发说明中所述。

h1, h2, h3, h4, h5, h6 {
	&:where(.wp-block-heading).has-background {
		padding: ...;
	}
}

如果主题使用 .has-background 类,但其中的标题元素不是标题块,这些元素将不再接收默认的背景内边距。

按钮块和分隔符块的可选择 HTML 元素

为了提高可访问性,你现在可以选择按钮块和分隔符块的 HTML 元素。

对于按钮块,你可以在块的“高级”设置中选择 <a><button>

button block settings
按钮块高级设置

对于分隔符块,你可以在 <hr><div> 之间选择。

separator block settings
分隔符块高级设置

文章内容块的 tagName 选择器

从 WordPress 6.9 开始,你可以为文章内容块选择语义上合适的包装器。你可以在 <main><section><article> 之间选择。

html element option post content
文章内容块的 HTML 元素选项

社交链接的自定义链接图标

新的 block_core_social_link_get_services 过滤器现在允许开发者使用区块变体为社交链接块添加自定义链接图标。这一新增功能为自定义社交链接块提供了更多选项,也不再需要核心来管理大量的服务。

你可以在 PR #70261 中找到技术细节和注册社交链接变体的代码。下图显示了文章编辑器中的效果。

custom social link icon
WordPress 6.9 中的自定义链接图标

查询循环块中按菜单顺序排序

除了文章标题和日期,你现在还可以按菜单顺序对查询循环块中支持页面属性的文章类型进行排序。要尝试这个新功能,请创建多个页面并使用“快速编辑”来编辑每个页面。

menu order quick edit
在页面屏幕中更改菜单顺序。

你也可以通过单独编辑每个页面来更改菜单项顺序。在左侧的页面侧边栏中,点击“操作”按钮(右上角的三个点)。然后,选择“顺序”。将弹出一个包含数字字段的弹出窗口,用于设置菜单顺序。

menu order option
从操作菜单中选择菜单顺序。
change menu order
更改菜单顺序

设置页面顺序后,创建新页面并添加查询循环块。选择页面作为文章类型,然后按菜单顺序排序。

数据库中所有文章类型都支持 menu_order 值;但是,你需要注册对 page-attributes 功能的支持,才能让你的自定义文章类型使用此设置。

有关此功能的更多信息,请参阅 PR #68781

导航块的更新

导航块已进行多项更新。以下是主要更新的快速列表:

一个新的创建页面按钮已添加到导航链接块的链接 UI 中。此更新包括立即发布页面的选项。

create page from link ui
从导航链接块的链接UI创建页面
publish immediately link ui
立即发布选项

此功能也可用于按钮块,即使它包含在导航菜单中。

create page button
在按钮块的链接UI中创建页面命令

由于块绑定API,当原始URL更改时,导航链接块的URL属性会动态更新,前提是链接指向一个实体,例如页面或文章。

synced link url
同步的链接URL

导航链接块设置侧边栏中的一个新的切换选项现在允许用户配置导航链接在新标签页中打开。以前,在新标签页中打开选项仅在上下文菜单模态链接中可用。通过此添加,该选项更容易找到,因为它位于侧边栏中所有其他设置旁边。

open link in new tab
导航链接块的链接UI中的在新标签页中打开选项

现在您可以从编辑器界面为导航菜单块设置透明背景。在WordPress 6.9之前,您必须使用自定义CSS代码来实现此效果。

伸缩标题和伸缩段落块变体

伸缩标题和伸缩段落块是两个新的变体,它们会自动拉伸文本以适应容器的全宽。

您可以通过两种不同的方式插入这两个变体:直接从块插入器插入,或从标题和段落块工具栏的下拉菜单中插入。

stretchy heading paragraph
伸缩标题和伸缩段落块变体
transform to stretchy paragraph
转换为伸缩段落

封面块的的海报图片支持

由于新的poster-image组件,封面块现在支持海报图片。这对于大型视频和慢速连接的用户特别有用,可以改善用户体验。

现在我们已经探讨了核心块的主要新增和改进,让我们看看WordPress 6.9如何促进团队在内容创建方面的协作,并根据个人职责量身定制。此版本引入了两个强大的功能,将显著增强编辑器内的协作和工作流程:笔记可见性

在WordPress 6.9中使用笔记功能为块添加评论

您现在可以在文章编辑器中为块添加笔记。此功能 enables 团队成员之间的异步协作,允许您跟踪活动并简化编辑工作流程。

由于此功能是文章编辑器特有的,用户必须具有对该文章的edit_posts能力才能添加笔记。这意味着:

  • 具有管理员或编辑者角色的已登录用户可以查看所有文章上的所有笔记。
  • 作者和贡献者可以查看和编辑他们创建的笔记。
  • 订阅者无法查看笔记。

要添加新笔记,请单击块工具栏中的添加笔记按钮。

add note button
区块工具栏的“选项”菜单中会显示一个新的“添加备注”项目。

这将显示一个新的“备注”侧边栏和一个用于添加备注的面板。

note panel
在 WordPress 6.9 中为区块添加备注

您可以通过点击添加第一条备注后出现的“所有备注”按钮来切换“备注”侧边栏的打开/关闭状态。

all notes button
编辑器设置工具栏中的“所有备注”控制按钮。

备注可以被标记为已解决、修改或删除。

edit note
在 WordPress 6.9 中编辑备注

备注在文章和页面中默认启用,但您也可以通过新的 notes 支持为自定义文章类型启用它们。以下是一个如何为自定义文章类型添加备注支持的简单示例:

register_post_type( 'book', array(
	'label' => 'Books',
	'public' => true,
	'show_in_rest' => true,
	'supports' => array(
		'title',
		'editor' => array( 'notes' => true ),
		'author',
		'excerpt',
	),
) );

在注册自定义文章类型时添加备注支持非常简单。但是,为现有文章类型添加备注支持则稍微复杂一些。幸运的是,核心开发人员已经在努力简化这一流程,我们可以期待在未来的 WordPress 版本中对此功能进行更新。

从技术上来说,备注就是评论,它们存储在 wp_comments 表中,comment_type 字段设置为 note。要从插件中以编程方式访问备注,请按以下方式使用 get_comments() 函数:

$args = array(
	'post_id' => $post_id,
	'type'    => 'note',
);
$notes = get_comments( $args );

请注意,当尝试从插件中检索备注时,必须指定 note 类型,因为备注类型的评论默认会被排除在查询结果之外。

当用户为区块添加备注时,文章的作者会收到通知邮件。这些邮件默认是启用的,但可以通过导航到 WordPress 仪表盘中的 设置 > 讨论 > 每当 并取消选择新选项 任何人发布备注 来禁用。

notification settings wp 69
WordPress 6.9 中的邮件通知设置

开发人员可以通过使用 notify_post_author 过滤器以编程方式控制这些通知。

请注意,这是备注功能的初始版本。开发团队已经在为 WordPress 7.0 的下一次迭代 进行工作。

此外,在 WordPress 6.9 中,备注仅在区块级别可用。行内备注 将在未来的迭代中实现。

请参阅开发者备注WordPress 6.9 的区块评论迭代,以更深入地分析具有多个代码示例的新备注功能。

区块可见性控制

WordPress 6.9 引入了一个新的区块 API 和一个新的界面,用于控制区块在前端和编辑器中的可见性。

此功能对于隐藏尚未准备好的区块非常有用,它与新的备注功能完美配合。现在,团队可以协作创建页面,并仅在部分完成并获批准后才最终确定。

要试用新功能,请创建新的文章或页面,并添加一个或多个区块或模式。然后,从区块设置下拉菜单或列表视图中隐藏区块或模式,并在编辑器和前端查看效果。

hide blocks list view
在 WordPress 6.9 中隐藏区块
block visibility control
新的区块可见性控制

命令面板扩展到管理仪表板

命令面板现已在站点编辑器和 WordPress 仪表板中可用(Ctrl+K 或 Command+K),使导航更加便捷和快速。在面板中输入以搜索、浏览仪表板或直接执行操作。例如,输入“add”会弹出操作菜单,如添加文章添加媒体文件添加用户等。

command palette wp 69
文章屏幕中的命令面板

已经提出了多项扩展和改进命令面板的建议,未来将添加新命令。请关注命令面板概述问题以获取最新信息。

开发者的新功能

现在,让我们来看看 WordPress 6.9 中最令开发者兴奋的部分。一套全新的 API 现已推出,使开发者能够让他们的插件可被 AI 系统访问。但这还不是全部!WordPress 6.9 还为现有 API 带来了许多改进,包括交互式 API、区块绑定和数据视图 API。

让我们详细探讨这些新功能。

能力 API

WordPress 6.9 引入了能力 API,这是一个新的功能接口,提供标准化的注册表,允许插件、主题和 WordPress 核心以人类和机器可读的格式公开其功能。

这个集中式注册表是所有功能可以正式注册以通过 PHP、REST API 和 AI 解决方案进行一致地发现、验证和执行的地方。

新的能力 API 直接惠及 WordPress 用户,因为它允许外部服务(如 AI 助手、外部应用程序和 UI 功能(如命令面板))以标准化方式理解和执行 WordPress 操作(例如,发布或编辑)。

这对开发者有什么好处?

第一个好处是清晰度:能力是具有描述、输入和输出的已注册功能。

新 API 的第二个重要方面是标准化。API 确保命令的制定和理解在任何环境中保持一致。这可能是 WordPress 仪表板、块编辑器、通过 REST API 访问的外部应用程序或 AI 助手。

另一个关键方面是工作流自动化。借助能力 API,您可以创建操作序列,使开发者能够构建复杂的自动化工作流。

开发者可以将能力 API 用于各种目的,包括扩展命令面板的功能、创建自动化工作流等。

注册后,能力即可被 AI 系统访问,例如 ChatGPT 和 Gemini:

该 API 管理注册和权限,而协议适配器将这些转换为外部 AI 系统可理解的格式。这在 WordPress 功能和 AI 助手之间建立了强大的连接,第一方 API 作为公开逻辑的权威来源。

能力是“一个具有定义输入、输出、权限和执行逻辑的独立功能单元。”

API 提供了一组函数,允许您管理能力和能力类别的各个方面。它还提供新的 REST API 端点、操作和过滤钩子。

要注册新能力,API 提供了新的 wp_abilities_api_init 操作和 wp_register_ability 函数。以下是函数签名:

wp_register_ability( string $name, array $args ): ?\WP_Ability

wp_register_ability 接受以下参数:

  • $name (string) 是能力的唯一标识符
  • $args (array) 是参数数组

如果注册成功,函数返回 WP_Ability 的实例;失败则返回 null

以下是一个注册能力的示例,摘自文档

add_action( 'wp_abilities_api_init', 'my_plugin_register_site_info_ability' );
function my_plugin_register_site_info_ability() {
	wp_register_ability( 'my-plugin/get-site-info', array(
		'label' => __( 'Get Site Information', 'my-plugin' ),
		'description' => __( 'Retrieves basic information about the WordPress site including name, description, and URL.', 'my-plugin' ),
		'category' => 'data-retrieval',
		'output_schema' => array(
			'type' => 'object',
			'properties' => array(
				'name' => array(
					'type' => 'string',
					'description' => 'Site name'
				),
				'description' => array(
					'type' => 'string',
					'description' => 'Site tagline'
				),
				'url' => array(
					'type' => 'string',
					'format' => 'uri',
					'description' => 'Site URL'
				)
			)
		),
		'execute_callback' => function() {
			return array(
				'name' => get_bloginfo( 'name' ),
				'description' => get_bloginfo( 'description' ),
				'url' => home_url()
			);
		},
		'permission_callback' => '__return_true',
		'meta' => array(
			'annotations' => array(
				'readonly' => true,
				'destructive' => false
			),
		),
	));
}

以下是这段代码的作用:

  • wp_abilities_api_init 是注册新能力时需要钩入的操作,确保在尝试注册新能力之前,能力 API 已完全初始化。
  • wp_register_ability 是注册新能力的函数。第一个参数是能力的唯一标识符(my-plugin/get-site-info);第二个参数是设置数组。
  • label 是要在 UI 中使用的人类可读标签(例如命令面板)。
  • description 是能力的描述
  • category 是能力类别
  • output_schema 是一个数组,定义能力返回的数据。
  • execute_callback 是调用能力时执行的回调函数。
  • permission_callback 是一个函数,用于验证用户或代理是否有权执行该能力。
  • meta 是可选元数据的数组。

开发者可以在以下资源中找到更多详细信息和代码示例:

块绑定 API 改进

WordPress 6.9 为块绑定 API引入了多项改进。

首先,块绑定 API 的支持已扩展到其他块。

  • Data 块现在可以接受任何日期,无论文章的发布或更新日期如何。这得益于新增的 core/post-data 数据源。您可以自己尝试:在文章中添加一个 Date 块并为其分配一个自定义日期。然后,再添加一个 Date 块并选择 Post Date 变体。然后更改发布日期,保存文章,并查看差异。如需技术详情,请参阅 PR #70585
  • WordPress 6.9 还在 pattern overrides 中增加了对 Image 块 caption 属性的支持

编辑器的界面已得到增强,可以显示不同的 Block Bindings 数据源。用户只需几次点击就可以在数据源之间切换并绑定或解绑属性(见下图)。

WordPress 6.9 还为开发者带来了几个有趣的变化。

API 中新增了一个 block_bindings_supported_attributes_{$block_type} 过滤器,供服务器端使用。该过滤器允许您指定哪些块属性可以连接到自定义数据源。

在客户端,您现在可以使用源注册函数中的 getFieldsList 方法来注册自定义源。

开发说明 提供了一段有价值的代码,您可以将其复制并粘贴到浏览器的控制台中,以查看改进后的 Block Bindings 界面。

下图显示了一个 Paragraph 块的新数据源选择器。

block binding ui wp 69
WordPress 6.9 中的 Block Bindings 界面

DataViews 和 DataForm 的增强

DataViews 和 DataForm API 提供了一种现代、标准化的方式来查看和管理结构化数据,例如文章、页面或媒体的列表。

这两个 API 用途不同。

  • DataViews API 专为查看和导航数据而设计。它使您能够创建视图,包括表格、网格和列表。您还可以使用它来搜索、过滤和排序数据。
  • DataForm API 专为修改数据集的元素而设计。
pages section wp 69
DataViews 示例:在站点编辑器的列表布局中显示页面

使用 WordPress 6.9,这两个 API 获得了多项改进。以下是主要新增功能的列表:

  • DataViews 新增了字段、控件和运算符。在各种新增功能中,您将找到新的 media、boolean、email 和 array 字段类型定义,新的 checkboxtoggleGroup 编辑控件,新的筛选运算符,等等。
  • 验证系统已完全重构。所有字段现在都支持“requiredelements 规则,以及通过自定义函数定义自定义验证”。
  • 除了 datetime 字段类型外,DataViews 现在还支持 date 字段类型。这允许您仅根据日期显示项目。此新增功能还支持使用新的 Calendar 组件按日期筛选。
  • 新版本还添加了 DateCalendarDateRangeCalendar 组件。
  • 表格布局进一步改进。现在可以通过 Control/⌘ + 点击选择多个项目
  • 新的 groupByField 属性使您能够根据字段值直观地对数据进行分组,从而更轻松地组织数据。此功能同时适用于网格表格布局。
  • WordPress 6.9 还为 DataViews 带来了性能改进。在 6.9 版本之前,DataViews 中使用的 FeaturedImageView 组件以全尺寸加载图像。这意味着拥有大量大尺寸预览图片的站点必须加载数兆字节的图片。然而,从 6.9 开始,网格布局使用响应式图片,这大大改善了使用大量图片的站点的后端性能。

DataViews 的其他值得注意的更改包括:

  • 引入了锁定筛选,允许查看筛选效果而无需修改它们。这对于预配置的视图非常有用。
  • date 字段实现了新的编辑控件
  • 现在可以自定义 DataViews 空状态,允许您自定义消息或提供 React 节点以进行进一步自定义。

有关 DataViews 和 DataForm API 更改和新增功能的完整列表,请参阅开发说明以及 PR #70567#70578

Interactivity API 增强

顾名思义,Interactivity API 使开发者能够创建可实时响应用户交互的交互式块。简而言之,这是一个用于构建丰富用户体验并使网站变得吸引人、动态化和引人入胜的工具。

Interactivity API 最初在 WordPress 6.5 中引入,在本次版本中获得了重大更新。以下是一些最有趣的新增功能。

为 Interactivity API 指令添加 ID

现在可以为 Interactivity API 指令添加 ID。此功能非常有用,因为它允许您解决无法在同一 HTML 元素上使用多个同名属性的限制。

要为指令分配 ID,请在后面附加三个破折号(---)后跟 ID,如下例所示:

<div
></div>

脚本模块和样式表加载

这个变更实现了更全面、更流畅的客户端导航。WordPress 现在在客户端导航“之后”替换样式表并加载脚本模块。这具有重要意义。

  • 新算法会重用与之前页面共享的样式表,加载这些页面中不存在的新样式表,并禁用未使用的样式表。这可以最大程度减少网络请求。
  • 得益于新的 importmap 定义,脚本模块的管理也更加高效。
  • 最后,预加载会预加载所有尚未预加载的样式表和脚本模块。

交互元素内的路由区域

另一个新增功能是支持在交互元素内使用路由区域。之前,路由区域——即用户点击链接时更新的页面区域——必须是根级交互元素。这意味着如果路由区域位于另一个交互元素内,内容将不会更新。WordPress 6.9 改变了这一情况,使开发者能够在交互元素内放置路由区域。

路由区域的新 attachTo 属性

路由区域现在接受一个可以在 data-wp-router-region 指令中定义的新 attachTo 属性。借助这个新属性,路由区域现在可以在初始页面上不存在的情况下进行渲染。attachTo 的值需要是一个指向路由区域将被注入的父元素的 CSS 选择器。以下是开发说明中的一个示例:

<div
	data-wp-router-region='{ "id": "example/region", "attachTo": "body" }'
>
	我在一个新区域里!
</div>

getServerState 和 getServerContext 同步

getServerState()getServerContext() 函数已得到改进。现在,当这些函数在客户端导航期间跟踪一个不变的值时,这些值会被重置。此外,只会保留当前页面的属性,而移除之前页面的属性。

要更深入地了解带有代码示例的 Interactivity API 改进,请查看 WordPress 6.9 中 Interactivity API 的客户端导航改进WordPress 6.9 中 Interactivity API 的变更

要全面了解 Interactivity API,请参阅我们的深度指南

开发者的其他更新

WordPress 6.9 为开发者引入了各种更新。以下是开发说明的快速列表:

展望未来:从 WordPress 6.9 到 7.0

WordPress 6.9 为块编辑器、API 和协作工作流程带来了重要的升级,这些更新将在 7.0 中继续演进。随着平台变得更加动态,并与 AI 驱动的工具深度集成,具有前瞻性能的托管服务变得越来越重要。如果您正在准备升级到 6.9 或规划接下来的版本,请探索 Kinsta 方案,为您的 WordPress 项目提供可靠的托管服务。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注