WordPress 6.4 计划于 11 月 7 日发布,现在是时候让我们探索一下新版 WordPress 最值得关注的功能和改进了。
最值得关注的新增功能包括区块钩子(Block Hooks)、改进的模式组织、重新设计和增强的命令调色板、附件页面的更改、图片的灯箱效果,以及写作工作流程的多项改进。
改进的模板加载、完善的脚本加载策略和其他性能增强功能将使您的 WordPress 网站运行得更快,而列表视图增强功能和对管理用户界面的多项升级将使其更易用、更易访问。
WordPress 6.4 还带来了一个新的默认主题,其中包含大量现成可用的模式和模板,可简化您的编辑流程。
东西还真不少,不是吗?别再等了,让我们来看看 WordPress 6.4 有哪些新功能吧。
区块钩子
区块钩子(原名自动插入区块)可让插件与古腾堡编辑器自动交互。
更确切地说,有了区块钩子,当内容中添加了另一个区块时,该区块就会被自动放置在特定位置。
区块钩子的工作方式应遵循两个原则:
- 用户无需在编辑器中手动插入区块,而且在前端插入区块应在提供挂钩区块的插件激活后立即进行。停用插件应自动移除区块。
- 区块在编辑器中应是可见的,用户应能控制自动插入。
为了兼顾这两项原则并保留代码中包含的信息,挂钩区块只适用于未修改的模板和模板部分,以及主题提供的模式、从模式目录中复制的模式或使用 register_block_pattern
函数注册的模式。它们无法在文章内容、修改过的模板和模板部分以及用户生成的模式中使用。
此外,开发说明还警告说
自 WordPress 6.4 起,您不能自动插入具有保存功能的区块,否则会出现区块验证错误。通俗地说,这意味着 Block Hooks 适用于动态区块,而非静态区块。
了解更多关于静态区块和动态区块的信息。
你可以通过两种方式实现区块钩子:使用 block.json 文件或新的 hooked_block_types
过滤器。
通过 block.json 钩住区块
使用 block.json 是挂钩第三方区块的快速而简单的方法,但它并不具有很大的灵活性,这意味着通过 block.json 自动插入的区块将无条件地附加到目标的所有实例上。
你可以使用新的 blockHooks
属性添加挂钩区块,该属性接收键/值对对象,其中键是你要挂钩的区块名称,值则指定其相对于目标区块的位置。
你可以设置以下位置之一:
before
目标区块after
目标区块- 目标容器区块的
firstChild
(首个子区块) - 目标容器区块的
lastChild
(最后一个子区块)
例如,您可以使用 blockHooks
将一个区块钩住每个 Spacer 区块:
{ blockHooks: { 'core/spacer': 'after' } }
在 block.json 中使用 firstChild
或 lastChild
时,区块检查器中会出现一个新的插件面板,其中列出了计划自动插入的区块,并提供了选择加入/退出自动插入区块的切换按钮。
启用自动插入(图片来源 PR #52969)
使用 hooked_block_types
勾住区块
使用新的 hooked_block_types
过滤器可以更灵活地将区块挂钩到目标。它允许你像使用 block.json 方法一样无条件地挂钩区块,或根据条件挂钩区块,例如,根据区块所在的模板、模板部分或模式,将区块挂钩到目标。
hooked_block_types
的回调函数接受四个参数:
$hooked_blocks
– 已挂钩区块的数组。$position
– 可以是before
,after
,first_child
, 或last_child
。$anchor_block
– 锚点区块的名称。$context
– 锚点区块所属的区块模板、模板部件或样板。
有关 Block Hooks 的更多技术信息,请参阅开发说明。
增强样板系统
区块样板是一种强大的设计工具,可用于内容或模板中,让您轻松构建复杂的区块结构。您可以使用区块主题提供的样板,也可以从样板目录中复制更多样板。
你也可以在网站/文章编辑器界面从头开始创建你的样板。如果你擅长编码,还可以通过 .php 文件将模式添加到当前主题或子主题中。如今,样板在 WordPress 中非常重要,因此我们发布了一份深入指南,介绍有关区块样板的一切。
在 WordPress 6.3 中创建样板
既然如此,让我们来看看 WordPress 6.4 中的样板系统有哪些新功能。
首先是样板分类。在以前的 WordPress 版本中,创建新样板时只能设置样板名称和类型、同步或不同步。
从 WordPress 6.4 开始,您还可以为您的样板添加一个类别,以便在站点和文章编辑器中更容易地识别。
在 WordPress 6.4 中创建样板
也可以在编辑样板时更改类别。
编辑样板类别
此外,还删除了区块插入器的 “Synced patterns(同步样板)”选项卡,现在您可以从同一个 “Patterns(样板)”选项卡访问所有样板。
WordPress 6.3与WordPress 6.4中的区块插入器选项卡对比
从网站编辑器以 JSON 格式导入或导出样板也更加方便。
从站点编辑器以 JSON 格式导出样板
其他更改提高了样板与经典主题的兼容性,并为未来的实施铺平了道路。
Twenty Twenty-Four 主题
Twenty Twenty-Four 是 WordPress 6.4 的新默认 WordPress 主题。它是一款多功能而又简约的 WordPress 主题,专为三种主要使用情况量身定制:小企业主、摄影师和艺术家以及作家和博主。
Twenty Twenty-Four 并不为您的网站添加功能。它更像是一个模板和样板的集合,将它们组合在一起,您就可以创建各种各样的网站。
此外,它还提供了大量的默认内容,以及大量真实的页面结构示例,您可以根据自己的需要进行编辑和定制。
我们有一篇完整的文章介绍了全新的 Twenty Twenty-Four 主题。请点击查看。
新的设计工具和功能
随着 WordPress 6.4 的发布,一些设计工具和功能进入了核心。其中最有趣的包括:
内容区块的颜色控件
内容区块是循环查询区块的子区块,在需要自定义循环查询中的内容外观时特别有用。
内容区块可在循环查询区块中使用
当您编辑循环查询时,它可以在文章编辑器中使用;当您创建或编辑模板时,它可以在站点编辑器中使用。
在 WordPress 6.4 中,”内容”区块得到了增强,现在支持文本、背景和链接的颜色。
内容区块的颜色设置
支持背景图片区块
WordPress 6.4 添加了新的背景图片区块支持,默认情况下选择了组区块。
WordPress 6.4 中组区块的背景图片控件
当主题使用了 theme.json 中的 appearanceTools
功能时,Background 面板会显示相应的背景图片控件,同时还会显示背景图片的预览。
设置背景图片时,会在组区块的 div
元素中添加 background-image
属性以及 background-size: cover
声明,以确保图片覆盖整个组区块。
有两种方法可以在主题中添加背景图片支持。第一种也是最简单的方法是选择使用外观工具属性。这样就可以使用多种设计工具,包括背景图片。
如果需要对设计工具进行更精细的控制,可以在 theme.json 中使用 backgroundImage
属性:
{ "settings": { "background": { "backgroundImage": true } } }
图像的灯箱效果
在图片区块设置面板中新增了 “Expand on click” 开关功能,允许您启用/禁用图片上的灯箱效果。这是该功能的首次迭代,在今后的版本中还会进一步改进。
点击 “Expand on click” 开关按钮可启用图像灯箱视图
灯箱效果也可与双色滤镜一起使用,但在图库中使用时会有点混乱。在撰写本文时,无法在图库级别启用灯箱效果,您应该在单张图片上启用该功能。
在以前的 WordPress 版本中,要实现这一功能必须使用插件。现在它是核心的一部分,这意味着您的 WordPress 网站可以减少第三方代码。
垂直文本方向
新的文字方向选项允许主题支持竖排文字。如果你的主题支持这一功能,你可以在 Typography(排版)设置中启用从右到左的竖排文字。
设置垂直方向
该功能默认为禁用。主题开发者可以通过在其 theme.json 中添加新的 writingMode
设置来添加对文本方向的支持:
{ settings: { "typography": { "writingMode": true } } }
您还可以为特定区块设置不同的默认行为。下面的示例展示了如何为所有段落区块设置 vertical-rl
方向:
{ "styles": { "blocks": { "core/paragraph": { "typography": { "writingMode": "vertical-rl" } }, } } }
脚注区块的增强功能
WordPress 6.4 还对脚注区块进行了一些改进。它现在支持链接、背景和文本颜色。它还提供了排版、尺寸和边框控制。
脚注区块的颜色、排版、尺寸和边框设置
文本和链接颜色控件默认为展开状态。其他控件会在页面加载时折叠。
导航区块中允许使用的按钮
按钮现已列入导航区块允许使用的内部元素列表。
在 WordPress 6.4 中将菜单项转换为按钮
当您创建一个新菜单项时,您可以从区块工具栏中轻松地将其转换为按钮。
导航区块中的按钮
改进用户界面和工作流
WordPress 6.4 还对编辑器界面进行了多项改进,增强了编辑体验并简化了工作流程。我们最喜欢的变化包括:
增强的命令面板
WordPress6.3 首次引入了命令面板,它允许您在网站编辑器界面中运行常用操作。WordPress 6.4 通过更新设计和一些额外的改进,向前迈出了新的一步。
WordPress 6.3 中的命令面板
WordPress 6.4 中的命令面板
下面的图片举例说明了命令面板在 WordPress 6.3 和 6.4 中的不同行为。
在 WordPress 6.3 中搜索样机
在 WordPress 6.4 中搜索样机
该版本还增加了一些新命令,并改进了一致性和命名。新命令包括区块变换以及复制、拷贝、移除和前后插入选项。
一个小改动是删除了许多命令开头的动词。这提高了一些命令的可搜索性和清晰度。
在 WordPress 6.3 中搜索 “打开” 选项
在 WordPress 6.4 中搜索 “打开” 选项
新版本还增加了区块选择命令。要查看其实际效果,请在网站编辑器中选择几个区块,然后按 cmd + k
(MacOS) 或 ctrl + k
(Windows),并输入搜索关键字,如 “transform”。你会看到以下建议:
区块选择命令
您可以对选择的区块执行多种命令。例如,您可以对几个区块进行分组:
从选区创建区块组合
当然你也可以取消组合。
取消组合区块的命令
在撰写本文时,区块选择命令包括添加到之前、添加到之后、删除、复制、移动到、分组、取消分组和转换至。
改进的列表视图
通过列表视图,您可以浏览页面内容,并对区块、组和模式执行若干操作。这些操作包括复制、重复、分组等。这对嵌套区块的复杂结构尤其有用,因为它允许你展开和折叠项目组,并对单个区块、组和样板执行多项操作。
WordPress 6.3 中的列表视图
WordPress 6.4 中的列表视图
从 WordPress 6.4 开始,您还可以使用 cmd + shift + d
快捷键(Windows 下为 ctrl + shift + d
)重命名一组区区块、预览图库和图片区块的图像、复制区块。
从列表视图重新命名组区块
捕捉工具栏
在编辑有多个子区块的区块时,使用内部区块可能会比较麻烦。当涉及到导航区块时尤其如此。
在 WordPress 6.4 之前,当选择内部区块时,区块工具栏会移动到屏幕上的不同位置。这种行为导致导航和列表等区块的用户体验不佳。
自 WordPress 6.4 起,子区块工具栏被附加到父区块的位置。这样,当您在同级块之间切换选择时,工具栏会固定在父区块的相同位置。
列表区块工具栏
列表项目区块工具栏
针对开发人员的性能改进和其他更改
100 多项性能更新已并入内核,同时还为主题开发人员带来了一些变化。让我们一起来探讨几个有趣的变化。
脚本加载策略
脚本加载策略是在 WordPress 6.3 中引入的,它提供了一种使用 async
和 defer
属性防止脚本在脚本依赖树中以意外顺序加载的方法。
在 WordPress 6.4 中,核心主题和捆绑主题中的前端脚本都采用了脚本加载策略。
此外,从 WordPress 6.4 开始,”使用 defer
属性加载的脚本已从页脚移至页首,以便在加载文档时更早地发现它们,并在加载文档后更快地执行”。
“其他更改还提高了核心安全性和可维护性。有关脚本加载的更多技术概述,请查看 WP 6.4 开发说明。
附件页面的更改
从 WordPress 6.4 开始,新安装的WordPress附件页面将完全禁用。
在 WordPress 6.4 之前,WordPress会为每个上传的多媒体文件自动创建附件页面。但这在许多网站上是不合理的。这些页面会被搜索引擎收录,可能会给用户带来不好的体验。
从 WordPress 6.4 开始,一个 wp_attachment_pages_enabled
数据库选项可以控制附件页面的行为。
从 WordPress 6.4 开始,该选项对现有网站设置为 1
(启用附件页面),对新网站设置为0(禁用附件页面)。
网站管理员可以通过 WP CLI 更改该值:
wp option set wp_attachment_pages_enabled 0|1
或者访问网站上的 wp-admin/options.php,更改 wp_attachment_pages_enabled
选项的值。
更改启用附件页面的选项
进度条组件
引入了一个基本的水平 ProgressBar
组件,以取代之前在站点编辑器中加载内容时使用的 Spinner
组件。
站点编辑器中的新进度条组件
WordPress 6.4 中的加载样板
在 WordPress 6.4 之前, _register_theme_block_patterns()
函数用于在其 patterns 目录下注册活动主题可能提供的任何样板。由于该函数需要进行大量的文件操作,因此使用该函数会导致资源开销问题,尤其是在提供大量样板的主题(如 Twenty Twenty-Four)中更为明显。
为了解决这个问题,WordPress 6.4 引入了一个新的 _wp_get_block_patterns()
函数,将样板存储在临时缓存中。有了这个新函数,后续请求就不需要查找文件,从而显著提高了性能。
开发人员可以通过启用主题的开发模式、更新主题的版本号、切换主题或调用 WP_Theme::delete_caches()
方法来绕过样板缓存。
减少文件存在性检查
以前,主题 API 中的一些函数在返回父主题之前,会对子主题中是否存在文件执行多次检查。
这不是最佳做法,因为这些函数没有考虑当前主题是否为子主题。
为了防止无用的文件存在性检查,更新了主题 API 中的多个函数和方法,现在,在进行文件存在性检查之前,我们会检查当前主题的样式表目录是否与模板目录一致。
这将大大提高性能,尤其是在使用非子主题时。
其他性能改进还包括 get_block_theme_folders()
和 the_header_image_tag()
函数。
新选项函数
默认情况下,选项会自动加载。如果网站的选项过多,可能会导致服务器响应时间变慢和出现错误。为防止出现这种情况,插件开发人员现在可以利用几个新函数来管理选项、提高性能并设置不同的默认行为。
有两个函数允许通过一次数据库查询获取多个选项。
prime_options()
可以通过一次数据库查询获取多个选项。选项值会存储在缓存中,因此后续的get_option()
调用不需要额外的数据库查询。prime_options()
接收一个选项名称数组,不返回任何选项值,因为它唯一的职责是更新相关缓存。prime_options_by_group()
与prime_options()
的工作原理类似,但针对的是特定的选项组。
另外两个函数允许设置选项自动加载值。
wp_set_option_autoload_values()
用于设置单个选项的自动加载值。wp_set_options_autoload_values()
可用于设置多个选项的自动加载值。
针对开发人员的其他更改
针对开发人员的其他更改包括!
- 用
wp_add_inline_style()
代替硬编码样式标签(参见开发说明) - 在 theme.json 中配置流体排版的最小和最大视口值(参见开发说明)
- 在 theme.json 中禁用布局控件(参见开发说明)
- 使用新的
useBlockEditingMode
钩子设置区块编辑模式(参见开发说明) - 增强了
wp_get_loading_optimization_attributes()
函数,并引入了新的过滤器来控制加载优化属性(参见开发说明) - 新的
registerInserterMediaCategory
API 允许插件开发人员注册自定义插件媒体类别,并为用户提供更多选择。该 API 只允许添加自定义插入式媒体类别,但不提供对核心类别的控制,Openverse 类别除外(参见开发说明) - 两个新的
wp_get_admin_notice()
和wp_admin_notice()
函数 “减轻了维护负担,促进了一致性,并为所有管理员通知启用了参数和信息过滤功能”(请参阅开发说明) - 改进了
WP_Query
和WP_Term_Query
缓存系统,减少了数据库查询并提高了整体效率(参见开发说明) - 改进了登录和注册页面的标记,以优化其结构并为开发人员提供更灵活的自定义功能(参见开发说明)
小结
WordPress 2023 第三个版本带来了大量新功能、新设计工具、用户界面改进、错误修复和其他小改动。
它还引入了一个新的轻量级多功能默认主题,其中包含大量模式和模板,您可以根据具体使用情况进行定制。
您最喜欢 6.4 中的哪些功能?请在下面的评论中分享您的想法。
评论留言