WordPress 6.7 新功能和特性：缩放模式、Meta元框、区块样板 API 以及更多内容

WordPress 6.7 新功能和特性

WordPress 6.7 发布在即，此前我们也先对 WP 6.7 的新功能进行了简单的预览，是时候回顾一下新版本为我们带来的新功能、新变化和新改进了。

该版本包括 87 项核心增强功能、功能请求和 200 多个错误修复。

WordPress 6.7 的核心包含从 18.6 到 19.3 的八个 Gutenberg 版本。区块编辑器获得了 445 项改进、464 项错误修复和 55 项可访问性改进。

内核为开发人员提供了新的强大 API。编辑器界面有了多项新增和改进，包括以前只能使用代码访问的工具。可用性改进和新的设计工具将简化设计流程。

WordPress 6.7 还展示了一个新的默认主题–Twenty Twenty-Five，它受益于新版本的最新功能。

在 WordPress 6.7 带来的众多新功能和新变化中，我们挑选了一些开发者和用户最感兴趣的内容。要说的还有很多，请直接进入新功能。

缩放模式

WordPress 6.7 具有新的“缩放”模式，可帮助您创建和编辑内容，重点关注样板而不是单个区块。这让您可以在更高的层次上工作，并提供正在构建的页面的整体视图。

下面的图片展示了新功能的实际效果。在顶部工具栏中新增的“切换缩放”按钮可让你切换“缩小”视图的开和关，使你可以在样板或单个区块上交替工作。

缩放模式

在 WordPress 6.7 中切换缩放

切换“缩放”模式

在 WordPress 6.7 中切换“缩放”模式

启用缩小模式后，您可以对所选图案执行多种操作。图块工具栏提供拖拽、上移/下移和重新排列等控制。列表视图提供了执行多种操作的链接，如编辑、复制和删除所选图案。

列表视图中的区块样板

启用“缩放”后，区块插入器默认为“样板”选项卡。列表视图也会反映编辑模式，并显示样板而不是区块。

有关“缩放”模式相关功能和更改的更全面列表，请参阅“缩放”模式迭代问题和WordPress 6.7 中“缩放”的开发人员说明。

文章编辑器中的Meta元框

在 6.7 之前的版本中，元方框会阻止文章编辑器画布在 iframe 中加载。这样就无法获得一些好处，例如从编辑器用户界面中隔离块和主题 CSS，以及媒体查询和视口的相对 CSS 单位的准确性。简而言之，这个问题排除了在编辑器和前端视图中使用相同 CSS 的可能性。

从 WordPress 6.7 开始，编辑器内容和元框可以在编辑器界面中共存。由于采用了新的分割视图，即使当前文章/页面有一个或多个元方框，也能在 iframe 中加载文章编辑器画布。根据开发说明

这一更改确保了编辑器和前端视图之间一致的所见即所得体验。此外，它还让元框比以前更易于使用。它允许在处理任何元数据框时直观地参考文章内容的任何部分，反之亦然。

WordPress 6.7 中带有元框的框架画布

该实现使用 flex 使内容视图和元框区域可滚动。

该增强功能还为“文章”编辑器界面带来了一些变化：

元方框区域的高度默认限制为 50%，以防止占用过多空间。
元方框区域可根据视口高度折叠或调整大小。
调整后的高度状态和打开/关闭状态将在用户偏好设置中保持不变。

WordPress 6.7 中可调整大小的元框区域

查看开发说明，了解面向开发人员的更深入概述。

改进区块绑定 API

区块绑定应用程序接口（Block Bindings API）是在 WordPress 6.5 中首次引入的，它允许您将区块的属性绑定到外部数据源。区块绑定应用程序接口的首次迭代使自定义字段值与标题、段落、按钮和图片区块的属性绑定成为可能。WordPress 6.6 在区块绑定API的基础上为一项新的强大功能打开了大门：样板重写（Pattern Overrides）。

WordPress6.7 为我们带来了通过块绑定API实现的新功能和改进，以及管理文章元源的新默认界面。

新的块绑定用户界面

本次迭代提供了一个新界面，可使用内置的文章元块绑定源从设置侧边栏管理标题、段落、按钮和图片区块的区块绑定。

一旦注册了自定义字段并选择了其中一个受支持的区块，一个新的属性面板就会出现在区块设置侧边栏中。添加一个或多个自定义文章字段后，“属性”面板就会变成交互式的，让您可以将区块属性连接到自定义字段。

WordPress 6.7 中的新属性面板

这可以帮助您创建绑定，而无需在代码编辑器中手动添加代码。

默认情况下，只有管理员可以创建和修改绑定。开发人员可以使用 block_editor_settings_all 或 map_meta_cap 过滤器覆盖默认行为。

开发说明警告了与新属性接口相关的两个限制。

此版本还无法将块属性连接到自定义源。这一增强功能应在未来的版本中实现。
第二个限制与“属性”面板中显示的自定义字段类型有关。目前，只支持字符串或富文本类型的字段。同样，我们可以期待在未来的迭代中逐步支持其他类型的自定义字段。

有关增强的区块绑定 API 与自定义帖子模板的有趣用例，请参阅开发说明。

新的文章元标签属性

新增了一个 label 属性，允许插件开发人员在注册时为文章元字段添加自定义标签。现在您可以使用以下代码注册带有标签的自定义字段：

register_post_meta( 
'post', 
'book_title', 
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __('Book title')
)
);

如果设置了标签，则标签将代替元键显示在区块绑定用户界面中。下图显示了带有自定义标签的属性面板：

带有自定义字段标签的属性面板

编辑块绑定功能

除了新的区块绑定界面外，还可使用新的 canUpdateBlockBindings 编辑器设置来确定新界面是否可与用户交互。这默认为新的 edit_block_binding 功能，管理员设置为 true，其他用户设置为 false。

您可以使用 block_editor_settings_all 过滤器更改默认行为。

面向开发人员的新应用程序接口和功能

WordPress 6.7 为开发人员在编辑器中使用块绑定带来了新功能。

新的编辑器 API 允许您使用引导值注册服务器上定义的自定义源。简而言之，您可以使用服务器 API 注册外部源并在用户界面中呈现它们。

新的默认主题 Twenty Twenty-Five 提供了一个使用版权模式进行源引导的好例子。在主题的 functions.php 文件中，你可以找到以下代码：

// Registers block binding sources.
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* Registers the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
*
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label'              => _x( '&copy; YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
'get_value_callback' => 'twentytwentyfive_copyright_binding',
)
);
}
endif;
// Registers block binding callback function for the copyright.
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* Callback function for the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
*
* @return string Copyright text.
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: Copyright symbol or word, 2: Year */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'&copy;',
wp_date( 'Y' )
);
return $copyright_text;
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

默认情况下，该代码会在用户界面中显示© YEAR，如下图所示。

带有引导值的自定义源

请注意，区块画布中的段落不是动态的，只显示源代码标签。

要检查该代码块的标记，您需要创建一个 Twenty Twenty-Five 版权模式的副本，并在代码编辑器中打开您的副本：

<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"twentytwentyfive/copyright"
}
}
},
"className":"copyright",
"textColor":"primary",
"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

您可以在 6.7 开发说明中的块绑定中阅读有关区块绑定新功能的更多信息。

数据视图新增功能

数据视图是用于模板、样板、页面等集合的改进用户界面。它也是一个组件和一个 API，允许您在站点编辑器中使用不同类型的布局（如表格、网格、列表等）呈现数据集。

WordPress 6.7 中的布局列表

数据视图在 WordPress 6.5 中首次引入，并在WordPress 6.6中得到改进。现在，WordPress 6.7 增加了新特性和增强功能，使它们变得更加灵活和实用。

从 WordPress 6.7 开始，网格视图的右上角会显示一个齿轮图标。点击该图标后，外观面板会显示一系列视图选项。在这里，你可以对视图中的元素进行排序，调整网格密度，设置每页的元素数量，以及选择要在预览中显示的元素属性。

小视图预览

中视图预览

切换按钮允许用户显示/隐藏视图筛选器，从而改善在窄屏幕上的使用体验。

在数据视图中显示/隐藏筛选器的切换按钮

在 WordPress 6.7 中隐藏数据视图中的筛选器

当您设置一个或多个筛选器时，切换筛选器按钮会显示活动筛选器的数量。

WordPress 6.7 中的切换过滤器显示

数据视图的其他更改包括可配置的长宽比、菜单中的数据视图选项等。

改进的查询循环区块

查询循环区块是功能最强大、最复杂的程序块之一。它必须提供最大的功能和自定义可能性，同时保持直观和易于使用。在 WordPress 6.7 中，查询循环块得到了多项改进和新增功能，使其功能更多，使用更方便。

以前的“从模板中继承查询”设置控件已经更改，现在应该更加直观和简单。

编辑模板时，查询循环设置面板会显示查询类型控件。以下图片显示了两种不同查询类型的设置选项：默认和自定义。

WordPress 6.7 中的查询类型控件

上下文检测也得到了改进。查询块有一个默认设置为true 的 inherit 设置。在单个页面上，这对查询结果没有影响，相应的控件已在 WordPress 6.7 中删除。

WordPress 6.7 中单个页面的查询循环设置

另一方面，在归档或索引模板中，查询块的内容取决于请求类型。这意味着特定类别的存档页面默认显示分配给该类别的内容，而与用户明确设置的其他设置（如文章数量）无关。

您可以在此处找到涉及查询循环块问题的综合列表。

媒体管理新增功能

在 WordPress 6.7 中，媒体管理变得更加实用和高效。从自动调整懒加载图片的大小到广泛支持背景图片，以下是 6.7 中对媒体管理的一些改进。

懒加载图像的自动尺寸

为 sizes 设置默认值可让浏览器从srcset属性的值中识别要使用的图像文件。这样，浏览器就能在知道页面布局之前预先知道图像的宽度。

HTML 规范允许图片省略 sizes 属性，或明确将其设置为 auto 或以 auto 开头的字符串：

关键字 auto 是在解析 sizes 属性时计算出的宽度。如果存在，它必须是第一个条目，而整个 <source-size-list> 值必须是字符串 auto（ASCII 大小写不敏感）或以字符串 auto, 开头（ASCII 大小写不敏感）。

在 WordPress 6.7 中，auto 属性会自动添加到任何懒加载图片的 sizes 属性开头。这将提高页面加载的性能。

在 WordPress 6.7 中自动调整懒加载图片的尺寸

开发人员可以使用新的 wp_img_tag_add_auto_sizes() 函数修正 sizes 属性的值。

字体库增强功能

WordPress 6.7 还对字体库进行了一些有用的改进。首先，字体现在按来源（主题和自定义）分组，这样就更容易一目了然地了解每种字体的来源。

WordPress 6.7 中按来源分组的字体：主题字体

WordPress 6.7 中按来源分组的字体：自定义字体

当您在 Google Fonts 上搜索字体时，一个新的“全选”选项按钮可为您节省几次点击。

在 WordPress 6.7 中选择所有字体变体

其他更改包括：在字体不可用时提供新的“未安装字体”消息；在字体已安装但未激活时提供改进的“未安装字体”状态。

支持 HEIC 格式

HEIC 格式（高效图像容器）是 HEIF（高效图像格式）的更新变体，被苹果公司用于所有运行 iOS 11 或更高版本的 iPhone 和 iPad。这种格式可确保 iOS 用户充分利用 4k 摄像机并获得更小的文件大小。

在 WordPress 6.7 中，HEIC 图像上传会尽可能在服务器上自动转换为 JPEG 格式。这一新增功能允许用户在媒体库中查看 HEIC 图像，即使浏览器不支持 HEIC，也能在文章和页面中使用它们。

浏览器支持 HEIF/HEIC 图像格式

浏览器支持 HEIF/HEIC 图像格式（来源：Caniuse）

新的增强型设计工具

有了 WordPress 6.7，设计人员可以使用新的强大设计工具，包括扩展块支持、字体大小预设等。

诗句、引言和文章内容区块的背景图片支持用户界面

WordPress 6.7 带来了新的用户界面控件，用于管理全局样式中少数区块的背景图片。这些区块包括诗句、引语和文章内容。

WordPress 6.7 中的背景图片用户界面

在全局样式中设置背景图片适用于整个网站。为区块添加背景图片后，您只需为同一区块的单个实例自定义设置，即可定制其外观。

在 WordPress 6.7 中自定义背景图像

您可以在“文章内容”区块中使用此功能，在模板中包装文章和页面内容。下面的截图提供了一个如何使用背景图片的示例。

在“文章内容”区块中编辑背景图片

字体大小预设

WordPress 6.7 引入了一个新的用户界面，用于在全局样式界面中控制字体大小预设。这允许用户覆盖主题的默认设置，并使用编辑器创建、编辑、删除和应用字体大小预设。

这还包括切换流体排版和设置自定义流体值的功能。

要亲自尝试，请打开“样式”界面并导航至“字体大小”>“字体大小预设”。一个新面板将显示可用字体大小预设的列表。单击您选择的预设并进行编辑。

在 WordPress 6.7 中编辑字体大小预设

所有更改都将应用于整个网站。

用户界面改进和其他编辑功能

WordPress 6.7 引入了更多改进编辑体验的用户界面变化和功能。让我们来看看其中的一些。

发布按钮改变了位置

发布前检查面板中的“取消 ”和“发布 ”按钮的位置互换了，因此您现在无需在页面上移动光标就可以发布文章。

发布按钮已移至右侧

区块检查器中的自定义区块名称

在 WordPress 6.7 中，当您设置自定义区块名称时，它现在也会显示在区块检查器中。在 WordPress 6.6 中，区块检查器显示的是默认区块名称（如 Heading）。

自定义块区名称不显示在区块检查器中

在 WordPress 6.6 中，自定义块区名称不显示在区块检查器中

自定义区块名称显示在区块检查器中

在 WordPress 6.7 中，自定义区块名称显示在区块检查器中

禁用选择样板模块

现在您可以关闭创建新页面时出现的“选择样板”模块。要退出此功能，请从“选项”菜单中打开“首选项”，然后禁用“显示初始模式”选项。

在 WordPress 6.7 中禁用“选择样板”模块

自动链接电话号码

当您添加电话号码时，链接字段会自动添加tel:。

WordPress 6.7 中的链接电话号码

允许在图片区块中放置多张图片

现在，您可以在图像区块上拖放多张图像，并将其转换为画廊区块。

在 WordPress 6.7 中的图像区块上拖动多个图像

通过在画廊区块上拖动多个图像生成画廊区块

面向开发人员的新功能和应用程序接口

WordPress 6.7 为开发人员提供了多个新的应用程序接口，以便为他们的插件添加更多功能。新增了预览选项 API，其他 API 也扩展了新功能，如 HTML API 和交互性 API。让我们一起来探索其中的一些功能。

预览选项 API

新的预览选项 API允许插件开发人员扩展帖子/页面编辑器中的预览下拉菜单。该 API 引入了一个新的 PluginPreviewMenuItem 组件，插件可以使用该组件在预览下拉菜单中添加带有自定义标题和点击处理程序的自定义菜单项。

插件开发人员可以在 WordPress 编辑器中添加自定义预览选项，以实现一系列功能，例如

自定义格式预览（想想社交媒体文章）
针对特定用户角色限制的文章或页面预览
额外的预览模式，如黑暗模式、电子邮件等。

根据所提供的道具，您可以将自定义预览菜单项用作按钮或链接。

以下是开发说明中关于如何使用新 API 的示例：

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';
function onPreviewClick() {
// Handle preview action
}
const CustomPreviewMenuItem = () => (
<PluginPreviewMenuItem
onClick={ onPreviewClick }
>
{ __( 'Your menu item label' ) }
</PluginPreviewMenuItem>
);
registerPlugin( 'custom-preview-menu-item', {
render: CustomPreviewMenuItem,
} );

新插件模板注册 API

在 WordPress 6.7 之前，添加自定义块模板的唯一选择是通过主题。使用插件注册块模板是不可能的，除非使用复杂的变通方法。

有了新的模板注册 API，您现在可以使用插件注册自定义区块模板了。新 API 提供了两个用于注册和取消注册模板的新函数：register_block_template() 和 unregister_block_template()。

它们的使用非常简单。您只需向函数传递几个参数即可：

$template_name: 名称，格式为plugin_uri//template_name（注意// ）$args: 由以下参数组成的数组：

title
description
content
post_types

有关新 API 的详细介绍和使用示例，请参阅开发说明和原始拉取请求。

新的区块类型注册 API

新的 wp_register_block_metadata_collection() 函数可从清单文件（如果存在）中注册区块类型，而不是直接读取和解析 block.json 文件。当插件注册多个区块类型时，这个函数尤其有用，因为它避免了为每个区块类型读取和解析 block.json 文件。

请注意，这个新函数不会取代现有的 register_block_type() 和 register_block_type_from_metadata() 函数。它的使用是可选的，但建议注册多个区块的插件使用，以提高性能。

有关新 API 的全面概述和使用示例，请查看开发说明。

标题级别选项

借助新的 levelOptions 属性，开发人员可以指定 Heading 标题、站点标题、网站副标题、查询标题、文章标题和评论标题块的下拉用户界面中应显示的标题级别。

该属性主要用于区块模板、模板部件和样板。以下示例代码禁用了标题区块中的 H1、H5 和 H6 标题：

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2>
<!-- /wp:heading -->

下图显示了区块工具栏中的可用选项：

WordPress 6.7 中的标题级别

您也可以使用插件或在主题的函数文件中使用 register_block_type_args 过滤器过滤 levelOptions 属性。开发说明提供了以下示例：

function example_modify_heading_levels_globally( $args, $block_type ) {
if ( 'core/heading' !== $block_type ) {
return $args;
}
// Remove H1, H2, and H6.
$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

WordPress 6.7 为开发人员带来的其他变化

现在可以将挂钩区块插入为模板部分区块的第一个或最后一个子区块。(请参阅开发说明）
钩子区块现在尊重 multiple 支持属性。(参见开发说明）
用户界面组件获得大量更新。(参见开发说明）
新函数 getServerState() 和 getServerContext() 提供了一种在客户端导航时订阅交互式 API 状态/上下文变化的方法。
脚本模块通过新的 @wordpress/a11y 脚本模块和新的 script_module_data_{$module_id} 过滤器获得了一些更新。
HTML API 得到了多项增强，包括支持几乎所有 HTML 标记、新的 set_modifiable_text() 方法（允许替换 script、style 或 title 等独立元素的文本内容）、HTML 处理器中的全解析器模式等。
一些国际化 (i18n) 方面的改进已合并到内核中，包括新的 has_translation() 函数，该函数可在不首先加载翻译的情况下确定翻译是否已存在；发送到 admin_email 的邮件将以用户的本地语言发送；如果开发人员在已知当前用户之前在插件或主题中加载翻译，则会发出警告。

小结

在这次对 WordPress 6.7 的深入研究中，我们探索了该版本的许多超棒功能和增强特性，从全新的默认主题、缩放模式到帖子编辑器中的元方框、块绑定 API 添加、媒体管理改进、新设计工具，以及为插件开发人员提供的许多新功能。

现在，轮到您了。您测试过 WordPress 6.7 吗？您最喜欢 6.7 中的哪些功能或变化？请在下面的评论中告诉我们。

WordPress WordPress新功能 WordPress版本

WordPress 6.7 新功能和特性：缩放模式、Meta元框、区块样板 API 以及更多内容

缩放模式

文章编辑器中的Meta元框

改进区块绑定 API

新的块绑定用户界面

新的文章元标签属性

编辑块绑定功能

面向开发人员的新应用程序接口和功能

数据视图新增功能

改进的查询循环区块

媒体管理新增功能

懒加载图像的自动尺寸

字体库增强功能

支持 HEIC 格式

新的增强型设计工具

诗句、引言和文章内容区块的背景图片支持用户界面

更多区块支持

字体大小预设

用户界面改进和其他编辑功能

发布按钮改变了位置

区块检查器中的自定义区块名称

禁用选择样板模块

自动链接电话号码

允许在图片区块中放置多张图片

面向开发人员的新功能和应用程序接口

预览选项 API

新插件模板注册 API

新的区块类型注册 API

标题级别选项

WordPress 6.7 为开发人员带来的其他变化

小结

评论留言

取消回复

文章目录