WordPress 6.5 新版亮点：字体库、数据视图、块绑定与交互API等功能介绍

WordPress 6.5 的发布定于3月26日，我们期待着其带来的新奇功能。

此版本引进了强大的新API，极大提升了WordPress开发体验。除此之外，WordPress 6.5还引入了多项改进，旨在优化网站构建和内容创作过程。

通过全新的字体库，用户可以在核心块中注入自定义字段值，并能直接从站点编辑器中下载及安装Google字体。新增的设计工具和用户界面的多项增强功能也将提升编辑体验。

但这只是WordPress 6.5更新内容的冰山一角。新版融合了众多改进和更新，篇幅所限，无法一一详述。因此，我们在这篇详尽的文章里，汇总了最具变革性和激动人心的特性。

现在，让我们深入探讨WordPress 6.5带来的新亮点。

新的 WordPress 字体库

WordPress 6.5带来了一个新特色，现在你可以直接在样式设置中管理字体了。

就像媒体库里管理图片一样，现在有了一个专门的WordPress字体库，让你能简单地管理字体。

使用这个字体库，安装或移除本地字体和Google字体变得简单，你可以随意开启或关闭任何字体，无论你用的是什么主题。

这挺酷的对吧？现在，对于网站的一个重要部分——排版，我们拥有了更多的控制权。要使用自定义字体，你不必再依赖主题提供的字体或通过CSS调整。

使用起来也非常方便。只需在网站编辑器中打开“全局样式”侧边栏，然后选择“排版”即可。

在WordPress 6.5中，管理字体变得简单明了。

当你进入“全局样式”，会看到所有可用的字体和排版元素。点击“管理字体”后，会弹出一个窗口，里面有三个选项卡：

1. “库”选项卡：这里展示了所有可用的字体预览。
2. “上传”选项卡：你可以拖动字体文件从电脑直接上传到这里。
3. “安装字体”选项卡：从这里，你可以选择并安装来自Google Fonts的字体。

一旦连接到Google Fonts，你就可以在一个地方看到所有的字体选项了。还可以用名字搜索具体字体。

找到喜欢的字体及其不同的风格后，点击“安装”，就大功告成了。

安装新字体后，字体库会把这些字体添加到你的网站里，并下载到网站的/wp-content/fonts/文件夹。如果需要，还会使用wp-content/uploads/fonts作为备用存储位置。

禁用字体库

插件和主题开发者现在可以利用新的PHP过滤器“fontLibraryEnabled”来关闭字体库功能。

function disable_font_library_ui( $editor_settings ) {

$editor_settings['fontLibraryEnabled'] = false;

return $editor_settings;

}

add_filter( "block_editor_settings_all", "disable_font_library_ui" );

数据视图

DataViews是一个组件，它支持用多种布局方式（比如表格、网格、列表等）来展示数据集。

在这次更新中，WordPress 6.5 带来了全新的视图和功能，用于更好地管理页面、模式和模板。这可能意味着我们在未来的WordPress版本中可以期待更多的改善。

现在，WordPress 6.5 在站点编辑器里新增了几种视图：

• 模板：你可以在“管理所有模板”下使用表格和网格布局来查看和管理模板。
• 图案和模板部件：在“管理所有模板部件”里，也能用表格和网格布局来整理和查找。
• 图案：现在采用网格布局，让查找和应用变得更加直观。
• 页面：在“管理所有页面”部分，同样支持表格和网格两种布局方式。

这些改进使得查看和管理网站内容变得更加简单和直观。

数据视图不仅仅改进了布局，还增加了许多实用的功能，比如过滤器、搜索、分页、排序，以及自定义显示或隐藏信息栏位。

你现在可以使用批量编辑功能，一次性对多项内容进行操作。比如，对于网页，你可以将它们移动到回收站、恢复或者彻底删除。

此外，数据视图引入了一种全新的主过滤器 API，这种特殊的过滤器始终可见，使你能在屏幕上直接进行筛选。比如，在模式管理区，你现在可以看到一个显示同步状态的新过滤器。

还有，DataViews API通过新的@wordpress/dataviews npm 包提供了，这让开发者可以方便地试验和使用数据视图。

块绑定 API

块绑定API是WordPress 6.5中的一个新功能，它让你能够把区块属性链接到不同来源的数据。这意味着区块的内容可以根据不同的情况自动改变。举个例子，一个标题区块可以显示变化的作者名字，这个名字是基于每篇文章的作者。

这是一个重要的更新，因为它增强了很多核心区块的功能。现在，你可以把任何类型的动态数据连接到区块属性上，不管是站点数据、自定义字段、用户信息、模式、短代码、其他区块，甚至是外部的数据源。

块绑定API的工作流程可以分为三个步骤：

1. 创建绑定：首先，你需要设置区块属性和数据来源之间的连接。
2. 获取数据：然后，API会从设定的数据来源中提取信息。
3. 更新区块：最后，根据收到的数据更新区块的HTML内容。

目前，块绑定API支持连接区块属性和自定义字段。尽管有计划将其用于同步模式覆盖，但这已被推迟到将来的版本。

在初始阶段，只有少数区块（比如标题、段落、图片和按钮）支持这个API。但随着时间的推移，我们可以期待更多的区块，包括自定义区块，将会加入这个功能。

对于插件开发者，这个新API还提供了注册自己的数据源的能力，就像注册一个core/post-meta数据源一样。这让你的插件能够利用这项新技术。

register_block_bindings_source(

'myplugin/plugin-data',

array(

'label' => _x( 'Plugin Data', 'block bindings source' ),

'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',

)

);

接下来，把绑定对象添加到你的区块里：

<!-- wp:paragraph

{

"metadata": {

"bindings": {

"content": {

"source": "myplugin/plugin-data",

"args": {

"key":"plugin_key"

}

}

}

}

}

-->

<p>Paragraph</p>

<!-- /wp:paragraph -->

这里是每个部分的简单说明：

• metadata：这是关于区块的信息的一个集合。
• bindings：这个部分包含了一个或多个数据绑定，用于连接数据和区块属性。
• content：这是连接到数据源的区块属性。在这个例子中，它是段落区块的“content”属性。
• source：数据的来源。
• args：传递给数据源的参数集。

随着时间的推进，块绑定API将会引入更多功能。不久，我们将能够直接从视觉编辑器里创建绑定，将区块属性与更多类型的数据源（如站点数据或分类数据）连接，并且能够在更多区块中使用这项功能。

现在，让我们更直观地探索块绑定API的第一个实现。

将自定义字段连接到块

在WordPress 6.5更新之前，开发者无法直接将自定义字段的数据显示在网站的标准区块，如文本或图片中。他们必须专门创建自定义区块来展示这些信息。

但现在，在WordPress 6.5版本中，事情变得更简单了。你可以将自定义字段中存储的数据直接显示在常用的区块里，比如按钮、标题、图片和文本段落。

正如前面提到的，通过新的块绑定API，你可以将区块属性链接到各种数据源，包括自定义字段。想要启动这项功能，只需到编辑器的“选项”菜单，然后是“首选项”、“常规”和“高级”，在那里启用自定义字段就行了。

请注意，在WordPress 6.5版本中，还没有一个直观的用户界面来帮助你把自定义字段的值连接到区块属性上。

这意味着，当你添加了自定义字段的键（key）和值（value）之后，你需要转到代码编辑器模式，并在区块的代码中添加一个名为“bindings”的部分，就像下面的示例代码一样：

<!-- wp:paragraph

{

"metadata": {

"bindings": {

"content": {

"source":"core/post-meta",

"args": {

"key":"my_custom_field"

}

}

}

}

} -->

<p>Paragraph</p>

<!-- /wp:paragraph -->

当你把自定义字段加到一个区块上时，相关的设置会被锁定，这意味着你不能再手动编辑那个区块的内容了。

下面我们来看看这是怎样在图片区块上应用的。我们将为图片的“alt”（替代文本）和“src”（图片来源）属性添加两个自定义字段。

注意，一旦你设置了自定义字段，你就不能用编辑器的常规控件来更改图片的来源了。

目前，在块绑定的第一版中，你只能将自定义字段链接到下面这些区块属性：

• 段落：只能链接到“内容”属性。
• 标题：同样只能链接到“内容”属性。
• 图片：可以链接到“URL”、“alt”（替代文本）和“标题”属性。
• 按钮：可以链接到“文本”、“URL”、“linkTarget”（链接目标）和“rel”（关系属性）。

如果你想了解如何将自定义字段与区块属性关联，可以查看块绑定功能的详细介绍。

改进的修订系统

修订功能让你放心大胆地编辑，因为你可以随时回退到网站之前的外观，撤销任何不想要的更改。这个功能对于需要多人合作的网站来说特别重要，所以在WordPress的最新开发阶段，样式修订变得非常关键。在WordPress 6.5版本中，修订系统进行了一些重大更新。

下面是在WordPress 6.5版本中你会看到的一些修订功能的更新。

变更说明

在WordPress早期版本中，当你查看修订版本时，只能看到修订的日期、时间和谁做的更改。但从WordPress 6.5版本开始，除了这些基本信息之外，你还可以看到一个关于每个修订的简短摘要和更多详细信息。

无限修订和分页

在WordPress 6.5之前，因为Rest API的限制，你在编辑界面的侧边栏里最多只能看到100个修订版本。

但是，从Gutenberg 17.2版本开始引入的两个新选择器getRevisions和getRevision，现在已经整合到WordPress 6.5中，所以之前的100个修订的限制已经取消了。现在，你可以查看所有的修订版本，它们被分成每页10个项目来显示。

修订样式书集成

另一个更新是“修订”面板现在也可以用在“样书”上了。这意味着你可以查看对那些不在当前模板里的图案和区块样式所做的更改。

模板和模板部件的修订

你现在还能够在模板和模板部分的修订记录中切换，回到设计项目的早期版本，这为你的编辑工作增加了一层额外的保护。

交互API

在WordPress 6.5之前，如果开发者想让网页更互动，他们需要自行引入并使用他们喜欢的JavaScript库。不过，这种做法使得网站前端的JavaScript开发缺乏统一标准。

从WordPress 6.5版本开始，引入了全新的交互API，这是一种现代化且标准化的方法，让你可以轻松地为WordPress网站增添互动元素。

如果你对这个新API感兴趣，可以查看WordPress 6.4版本的一些早期实现，比如已经利用这个API重构的图像、搜索、文件、导航和查询区块。一个具体的例子是图片的灯箱效果。

你可以通过这个新的交互API，在你的网站上实现动态分页、即时搜索和区块之间的实时互动等功能。

区块现在可以互相共享数据、进行操作和发送回调。这让区块之间的沟通变得更简单，同时也减少了出错的机会。举个例子，当你点击一个“加入购物车”的区块时，它可以自动刷新另一个独立的“购物车”区块。

而且这一切的速度超级快。只有当网页上至少有一个互动性区块存在时，才会加载必要的脚本，这样就不会无谓地拖慢网页速度。

Interactivity API采用了最新的前端开发技术，通过使用自定义HTML属性来大大减少实现页面互动性所需的JavaScript代码量。

如果你已经熟悉像HTMX和Alpine.js这样的前端库，你会很喜欢在WordPress中使用Interactivity API来实现类似的功能。那么，这究竟是怎样工作的呢？我们来详细了解一下。

什么是交互API？

交互式 API 是一种新的标准，可以让网站开发者更简单地添加交互元素到网页上，这意味着网站访问者可以直接在页面上进行操作，比如即时搜索、发表评论或加东西到购物车，而不需要刷新整个页面。

这项新技术有很多现代化的特点，让它成为一个强大的开发工具：

• 它能够在服务器端生成页面内容，也支持在客户端更新这些内容。
• 它能够很好地与 PHP 语言和现有的页面模块系统配合使用。
• 它能够和 WordPress 的现有插件以及已有的 JavaScript 库一起工作。
• 它采用声明式编程，这意味着你只需要描述你想要的结果，而不是具体操作步骤。
• 它运行效率高，可以根据需要进行扩展。
• 它是基于小型、可组合的单元：你可以用不同的小功能块来构建复杂的效果。
• 它可以和 WordPress 的其他开发工具一起使用。

简单来说，交互式 API 让你可以通过特殊的 HTML 属性给网页元素添加各种动态功能，使得网页更加生动和互动。这是交互式块的示例：

<div

<?php echo get_block_wrapper_attributes(); ?>

data-wp-interactive='{ "namespace": "create-block" }'

data-wp-context='{ "isOpen": false }'

data-wp-watch="callbacks.logIsOpen"

>

<button

data-wp-on--click="actions.toggle"

data-wp-bind--aria-expanded="context.isOpen"

aria-controls="<?php echo esc_attr( $unique_id ); ?>"

>

<?php esc_html_e( 'Toggle', 'inter-block' ); ?>

</button>

<p

id="<?php echo esc_attr( $unique_id ); ?>"

data-wp-bind--hidden="!context.isOpen"

>

<?php

esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );

?>

</p>

</div>

WordPress 在服务器上处理这些指令并生成相应的标记。

如何开始使用交互 API

使用交互式 API 并不会改变你创建网页模块的常规流程。你可以轻松地通过使用 @wordpress/create-block 命令，然后选择一个专门的交互模板来创建一个插件，这个插件能让你添加带有交互功能的网页模块。

打开你喜欢的命令行程序，找到你的插件文件夹，然后输入以下命令：

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

这样做会创建一个具有交互性的网页模块，这个模块是根据一个特殊模板制作的，该模板使用了一个叫做 viewScriptModule 的字段来存储信息。当这个模块在网页上显示的时候，viewScriptModule 里面指定的程序代码就会自动运行。你可以查看更多关于 viewScriptModule 和如何开发脚本模块的详细信息。

安装完成后，你可以在 WordPress 的管理界面找到一个新的插件。打开它，然后回到命令行，找到这个新插件所在的文件夹，并启动相关的服务：

cd my-interactive-block && npm start

现在，去创建一个新的文章或页面，打开用来添加模块的工具，然后滚动到“小工具”那一部分。你会看到一个叫做“我的互动块”的新模块，你可以用它来制作新的、有趣的互动内容：

网站编辑器更新

对网站编辑器进行了多项升级，这应该会让你编辑网站时感到更轻松，并使你的工作更加顺畅。

列表视图增强功能

首先，你现在可以用鼠标右键点击列表视图中的任何一个模块，就能快速打开模块的设置选项。这个改进虽小，却很实用，因为它让从列表视图中直接调整模块设置变得更简单了。

其次，现在你几乎可以在列表视图中给所有模块重新命名，除了以下几种特殊的模块：

• 核心/块
• 核心/模板部分
• 核心/样板
• 核心/导航

此外，列表视图的键盘快捷方式也被提升了。现在，通过按 Windows 上的 CTRL + A 或 Mac 上的 CMD + A，你可以快速选中列表视图中的所有模块，这让批量操作变得更容易了。

复制并重命名样板

在以前，你不能编辑由主题提供的模板，也就是说，你无法用它们作为基础创建自己的模板，或者修改模板中的一些部分。但是，在 WordPress 6.5 中，添加了一个很实用的新功能：现在你可以复制和重新命名模板了，这意味着你可以根据自己的需要调整和改动这些模板。

另外，WordPress 6.5 中还引入了两种新的模板类型：音频和视频。这意味着你现在可以更专门化地处理音频和视频内容。

改进的首选项面板

在 WordPress 6.5 版本中，设置界面进行了更新和重新排列。主要的新变化有：

• 加入了新的“外观”和“辅助功能”设置选项。
• 在“外观”设置中新增了一个顶部工具栏的选项。

如果你开启顶部工具栏，网页编辑时所有的编辑工具和文档设置都会集中到编辑器顶部的一个工具栏里，使得操作更为集中和方便。

在无干扰模式下的区块工具栏

在 WordPress 6.5 更新之前，当你开启了无干扰模式，就不能看到块的编辑工具栏，每次需要用到时都得开启和关闭。但现在，从 WordPress 6.5 版本开始，只要你把鼠标移动到编辑器的上方，就能立刻看到用于编辑的块工具栏了。这样做让编辑变得更简单，不再需要频繁切换。

改进的链接控制组件

链接功能已经得到了提升，现在添加链接变得更简单了。下面这张图将展示当你点击一个链接进行编辑时会看到的更新后的面板。

要查看关于链接控制功能更新的所有信息，请参考 #50891。

拖放改进

编辑器的拖拽功能有了很多改进：

在列表视图里：

• 如果你把一个模块拖进一个可以折叠的模块里，那个折叠的模块会自动展开。
• 当你拖动东西时，会看到一个特殊的拖动图标。

在编辑器的主画布中：

• 你现在可以方便地把东西拖到内容的最开始或最后。
• 在相同层级的容器模块之间拖动元素变得更流畅。
• 你也可以在模板部分中拖动模块。
• 新的提示会告诉你哪些模块不能被拖动。
• 你可以把元素直接拖到文档的开头或结尾。
• 通过简单地把一个模块拖到另一个模块旁边，你就可以创建一行或者画廊。比如说，如果你把一个图片放在另一个图片旁边，它们会自动组成一个画廊。

有关拖放改进的更全面列表，请参阅区块拖放跟踪问题。

其他更改和改进

WordPress 6.5 还引入了很多其他重要的更新和改进。

经典主题的外观工具

从 WordPress 6.5 版本开始，即使你的网站使用的是传统主题，你也能在站点编辑器中使用一些新的设计功能。通过选择 appearanceTool 主题支持，你可以使用以下设计工具：

• 边框设置
• 颜色选择
• 间距调整
• 排版设计

这意味着传统主题的用户可以体验站点编辑器的一些功能，并且更容易从传统主题过渡到使用块的现代主题。

AVIF 支持

WordPress 6.5 现在支持一种新的图片格式叫 AVIF。这种格式用更先进的技术压缩图片，所以相比以前的格式（包括 WebP），AVIF 让图片文件体积更小，但图像质量依然很高。

现在，用户可以像上传其他格式的图片一样，轻松地通过 WordPress 媒体库上传 AVIF 格式的图片。不过，上传前最好检查一下你的网站托管服务是否支持 AVIF 格式。

在 WordPress 中，你可以检查你的网站托管是否支持 AVIF 图片格式。只需点击“站点运行状况”里的“信息”选项卡，然后找到并打开“媒体处理”部分来查看。

插件依赖

从 WordPress 6.5 版本开始，插件开发者可以用一个新的“Requires Plugins”（需要的插件）标签来说明他们的插件需要依赖哪些其他插件来运行。这个标签里会列出所有必需的插件名字，用逗号隔开。

这个功能让插件用户更容易知道他们需要安装和激活哪些插件，还会提供链接到 WordPress.org 的插件库，方便用户下载和安装。

另外，如果一个插件依赖于另一个插件，它会在详细信息中标明。这意味着，如果一个插件被另一个插件依赖，你就不能删除它，除非先删除依赖它的那个插件。

WordPress 6.5 新增了一个叫做 wp_plugin_dependencies_slug 的过滤器，这意味着你现在可以用编程的方式来调整插件的依赖关系。

要了解更多信息，请查看关于插件依赖的开发指南。

HTML API 更新

在 WordPress 6.5 版本中，用于处理 HTML 标记的工具得到了提升。现在它能更好地识别和处理各种 HTML 代码，比如普通的标记、注释、文档类型定义，以及文本内容。

这项改进意味着你可以更安全地改变 HTML 代码内部的文本，而不会破坏整个页面的结构。

“可修改文本”指的是那些你可以改变的文本部分，包括普通文本节点里的内容，HTML 注释里的内容，或者是特定元素（比如 <script> 或 <style>）标记之间的内容。

WordPress 6.5 还引入了一些新的功能，让你可以：

• next_token()：在文档中移动到下一个代码片段。
• get_token_type()：找出当前代码片段的类型。
• get_token_name()：获取当前代码片段的名称。
• get_modifiable_text()：获取并修改特定代码片段的文本内容。
• get_comment_type()：识别注释的类型。
• paused_at_incomplete_token()：检查是否在文档的中断处结束。

要获取更详细的信息，请参阅 WordPress 6.5 的开发者指南中关于 HTML API 更新的部分。

网站和帖子编辑器统一

WordPress 6.5 对编辑界面进行了更新，使界面和操作更加统一。

• 一些编辑功能从“编辑文章”模块被转移到了更通用的@wordpress/editor模块。这样做是为了让网站编辑器也能使用这些功能，包括：
  • 页面属性
  • 文章分类
• 现在，在网站编辑器中，你也可以看到针对不同文章类型的“查看”链接。
• 为了支持不同类型的文章，讨论面板被添加到了网站编辑器的侧边栏。
• 特色图像面板现在也加入了。
• 网站编辑器中也新增了一个修订面板。

另外，当你在文章编辑器中编辑页面时，现在可以像在网站编辑器里一样，预览模板。你可以从页面设置侧边栏开启或关闭模板预览。这让你能更直观地看到页面的最终外观。

性能增强

WordPress 6.5 做了超过 110 项改进，大幅提升了文章编辑器和网站编辑器的速度和工作效率。现在，这些编辑器的加载速度比之前快了两倍，打字和输入的反应速度快了将近四倍。此外，集成了一个叫做 Performant Translations i18 的新库，这有助于减少翻译过的网站在内存使用和加载时所需的时间。

辅助功能改进

WordPress 6.5 的更新带来了超过 65 项改进，让管理面板更易于使用。这些升级包括更清晰的焦点提示、更强的颜色对比度和更容易排序的定制菜单等。

块钩子更新

WordPress 6.4 版本首次引入了“块钩子”功能，让你能够自动把特定的块放在内容的某个位置。

以前，这个功能只能用于那些没有被用户更改过的模板、模板部分或模式。但现在，即使是那些已经被修改过的布局，也可以使用块钩子了。

在 WordPress 6.5 更新之前，你只能把这些“挂钩块”放在导航块的前面或后面。现在，你还可以把它们作为导航块的第一个或最后一个子块添加进去。

此外，这次更新还带来了新的 hooked_block 和 hooked_block_{$hooked_block_type} 过滤器。

想了解更详细的信息和示例，请查看有关块钩子更新的开发指南。

总结

准备迎接新的 WordPress 更新吗？标记日历上的 3 月 26 日，因为 WordPress 6.5 即将到来！这个新版本将为你的网站建设和内容创作带来许多改进。

现在，有了全新的 WordPress 字体库，你可以像管理图片那样管理字体，这让版面设计更加自在。DataViews 功能让你能以不同的布局显示数据，还能使用过滤器和搜索，让网站管理更加高效。而通过块绑定 API 和交互 API，你的网站访问者将享受到更流畅和个性化的体验。

总的来说，WordPress 6.5 的更新让你的网站更加强大，给你的网站制作和内容创作带来全新的可能。