WordPress 5.7 新功能一览（延迟加载、HTTPS、UI更新、新API等）

每次发布新版本时，我们习惯于看到很小的变化和不太小的变化，以及向WordPress核心添加的新功能。WordPress 5.7也不例外，很高兴看到每个新版本如何使我们更接近大图。

通过将多个版本的块编辑器合并到核心中，新版本改善了整体编辑体验，并使开发人员能够构建更多高级块，并为块编辑器添加更强大的自定义项。

除了编辑器之外，WordPress 5.7还引入了许多更改和强大功能，包括延迟加载iframe，登录和注册界面更新，重置密码链接，大量错误修复等等。

我们已经在DevKinsta上进行了测试，并准备与您分享WordPress 5.7附带的我们最喜欢的功能和更改-当然，完整的功能包括大量的屏幕截图和代码片段。

因此，尽管我们继续等待完整站点编辑（在WordPress 5.8中处于核心状态），但让我们感到舒适并享受WordPress 5.7的新功能！

文章目录

块编辑器中的新增功能

WordPress 5.7为核心带来了许多版本的Gutenberg插件。这将是不可能在这里提上的许多变化和bug修复添加到编辑器顶部所有这些添加，但你可以访问以下链接深入了解每个版本：9.3，9.4，9.5，9.6，9.7，9.8，9.9。

Gutenberg 10.0和10.1的错误修复和性能改进也是WordPress 5.7的一部分。

也就是说，让我们看一下我们精选的最令人兴奋的功能和WordPress 5.7添加到块编辑器中的更改的列表：

块变体功能，增强功能和API
新的按钮块功能
社交图标增强
字体大小支持
封面块上的全高对齐
从插入器拖放块和模式
半透明空白块
值得一提的块编辑器中的其他改进

块变体功能，增强功能和API

WordPress 5.4引入了块变体，为用户提供了一种选择同一块的不同实例的方法。

此功能与Block Variations API协同工作，后者是一个功能强大的工具，允许开发人员添加，管理或删除区块的变体。

WordPress 5.7引入了一些针对块变化的增强，功能和新API，为开发人员提供了更好的UI和更强大的工具。让我们深入了解一下。

块变体转换

最初随Gutenberg 9.4引入，现在被添加到WordPress 5.7中，“转换为变体切换器”出现在块卡下方，用于支持该功能的块。

注册新的块变体时，块开发人员可以通过将新transform选项添加到块变体scope字段中来将变体切换器添加到块检查器，如以下示例所示（仅JS代码）：

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter', 'transform' ] 
} );

在此示例中，块变体出现在编辑器的UI的两个区域中-块插入器和块检查器。

有关块变体变换的深入概述，另请参见＃26687。

块信息现在与块变体匹配

从WordPress 5.7（和Gutenberg 9.7）开始，UI显示了有关块变化的更多具体信息，而以前仅显示了常规信息。

在WordPress 5.7之前，界面元素显示了有关块变体的通用信息

嵌入块和社交图标是作为块变体而构建的；他们提供了WordPress很好的示例，将WordPress的信息与信息块变体匹配。

现在，界面元素显示了特定于块变体的信息

这些更改会影响块检查器，块导航栏和面包屑。从Gutenberg 9.8开始，此UI增强功能也适用于块切换器。

新的块变体API

WordPress 5.7还引入了新的API，开发人员可以在块变体注册中使用它来显示块变体的正确信息（Gutenberg 9.7）。

新isActive属性是一个接受块属性的函数。您可以使用版本的属性来确定版本是否处于活动状态（另请参见Block API Reference）。

块开发人员可以使用此功能显示变化信息，而不是块信息。一个示例可能是embed块，我们可以在其中更改providerNameSlug属性的值（来自dev note的示例）：

const variations = [
{
	name: 'wordpress',
	title: 'WordPress',
	keywords: [ __( 'post' ), __( 'blog' ) ],
	description: __( 'Embed a WordPress post.' ),
	attributes: { providerNameSlug: 'wordpress' },
	isActive: ( blockAttributes, variationAttributes ) =>
		blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
},
];

在以下示例中，该isActive属性用于更改color属性：

variations: [
{
	name: 'blue',
	title: __( 'Blue Quote' ),
	isDefault: true,
	attributes: { color: 'blue', className: 'is-style-blue-quote' },
	icon: 'format-quote',
	isActive: ( blockAttributes, variationAttributes ) =>
		blockAttributes.color === variationAttributes.color
},
],

新的useBlockDisplayInformation挂钩返回有关给定块的信息。新挂钩考虑了块变化的isActive性质，并返回块的title，icon和description。

这些更改会影响“块卡片”（检查器工具），“导航列表视图”（顶部栏）和“面包屑”（另请参见PR ＃27469）。

新的按钮块功能

几个新功能改进了按钮块的功能和界面。

按钮尺寸

现在，“设置”边栏中提供了一个新控件，使我们可以为按钮块中容纳的按钮设置百分比宽度（Gutenberg 9.4）。

只需选择一个按钮，然后选择25％，50％，75％或100％。百分比是指父容器。下图显示了按钮尺寸的不同组合。

有关更多技术见解，请查看拉取请求＃25999和＃26781。

垂直布局

这项新功能为按钮块增加了垂直方向的变化。用户可以使用块设置面板（Gutenberg 9.6）中提供的Transformations切换器，从水平布局切换为垂直布局。

社交图标增强

WordPress 5.7在“社交图标”中添加了新的自定义选项：自定义大小支持和自定义颜色。

社会图标大小

选中“社交图标”块后，块工具栏现在提供具有可用大小的“大小”选项菜单（Gutenberg 9.4）。

社会图标中的自定义颜色

现在，同一块支持颜色设置，使我们可以为图标和背景设置不同的自定义颜色（Gutenberg 9.9）。

现在，您可以将主题的调色板用于“社交图标”，以防止图标颜色与您网站的配色方案冲突（另请参见PR ＃28084）。

字体大小支持

WordPress 5.7增加了对列表和代码块的字体大小支持。

列表块中的字体大小

带有字体大小控件的排版卡已添加到“列表”块设置中（Gutenberg 9.4）。

用户可以为列表项选择可用的字体大小之一，也可以设置以像素为单位的自定义字体大小。“重置”按钮可恢复默认值。

代码块中的字体大小支持

WordPress 5.7还增加了对代码块中字体大小管理的支持。选择“代码”块后，“块设置”侧边栏将显示一个新的“字体大小”控件。使用此控件，您可以选择主题中可用的预设大小之一，或以像素为单位设置自定义值（Gutenberg 9.5）。

此功能的实现还允许在核心块的CSS中使用全局样式变量（另请参见PR ＃27294）。下图显示了在前端安装了2021主题的代码块。

封面块的全高对齐

WordPress 5.7引入了新的“全高工具栏对齐”组件。它首先是使用Gutenberg 9.5添加到块编辑器中的。现在，它已合并到核心中并在封面块中实现。

如果切换块工具栏按钮，同时注意最小高度控件，您会发现全高对齐只是其中的简写形式100vh（有关视口百分比长度的更多信息）。

您可以将“全高对齐”与其他控件设置（例如固定背景、内容位置等）结合使用。您可能会对在页面上创建的令人印象深刻的效果感到惊讶。

从插入器拖放块和模式

块插入器现在支持拖放块和模式（Patterns）。用户可以从插入器中抓取任何块或图案，并将其放置在发布画布上的任何位置（Gutenberg 9.6和9.7）。

请注意，仅当您的主题支持块模式时，拖放操作才有效。

半透明空白块

空白块现在具有半透明的背景，而不是以前的不透明灰色（古腾堡9.8）。

此功能应使在任何背景色之上更容易识别空白块。

值得一提的块编辑器中的其他改进

我们的列表不会涵盖合并到核心中的所有功能和增强功能，因此请务必查看官方文档和开发说明，以更全面地了解WordPress 5.7块编辑器中的新增功能。

但是，仅举几例，在5.7中，您还会发现：

启用深色背景时自动打开深色模式（PR ＃28233）
Patreon，Telegram和TikTok图标已添加到“社交图标”中（PR ＃26118）
字体大小设置中支持的所有单位（PR ＃26475）
块转换预览（PR ＃27861）
块插入器中改进的块模式预览（PR ＃27204）
改进了“选项”模式，并将名称更改为“惯用选项”
@wordpress/data API的更改
内部块API更改
导入/导出功能增强
更改块编辑器组件和块

延迟加载iframe

延迟加载是一种优化技术，可以延迟非关键资源的加载，直到它们进入用户的视口中为止。延迟加载图像和嵌入式资源直到需要时才下载和呈现。它可以显着提高网站性能，特别是对于具有高分辨率图像和视频的网站。

在本机延迟加载之前，开发人员只能通过JavaScript延迟加载资产。WordPress用户被迫使用插件来达到相同的效果。不过，由于延迟加载已成为一种标准，因此只需将loading="lazy"属性添加到img和iframe标记就可以延迟加载图像和iframe 。

WordPress 5.5 在WordPress 核心中引入了本机图像延迟加载，自动将loading="lazy"属性添加到具有width和height指定属性的img标签中。

现在，由于WordPress 5.7，延迟加载扩展到iframe标签。和图像一样，为防止布局偏移，loading="lazy"将仅添加到具有width和height属性指定的那些iframe标签。

在WordPress中，本机延迟加载可在以下情况下与iframe一起使用：

文章内容中的iframe（the_content）
文章摘要的iframe（the_excerpt）
文本小工具中的iframe（widget_text_content）

在WordPress中，大多数iframe依赖于oEmbed集成，该集成会自动将URL转换为相应的iframe标签。不幸的是，并非每一个网络服务都会为iframe提供width和height属性; 这可以防止WordPress将loading属性添加到这些iframe。

下图显示了iframe具有loading="lazy"属性的标签：

用费利克斯·阿恩茨（Felix Arntz）的话来说：

这些iframe标签的标记由相应的Web服务控制，并且仅其中一些Web服务遵循提供width和height属性的最佳做法。由于WordPress无法猜测嵌入式资源的尺寸，因此loading="lazy"仅当oEmbed的iframe标记同时包含两个尺寸属性时，才会添加该属性。

下图显示了iframe没有loading="lazy"属性的标签：

开发人员的延迟加载iframe

从开发人员的角度来看，新功能需要进行一些更改，包括：

该wp_filter_content_tags()函数的行为已经扩展到了添加loading属性iframe标签。该loading属性以前仅添加到img标签中。
默认情况下，该wp_lazy_loading_enabled() 功能现在返回true的iframe标签（启用时）。
新wp_iframe_tag_add_loading_attr()功能允许将loading属性添加到iframe标签（类似于wp_img_tag_add_loading_attr()—参见代码参考）。
该wp_iframe_tag_add_loading_attr过滤器允许延迟加载特定的I帧的定制。返回false或为空字符串将不会添加该属性。

您可以使用现有的覆盖默认行为wp_lazy_loading_enabled 过滤器，现在返回true的iframe标签。

add_filter(
	'wp_lazy_loading_enabled',
	function( $default, $tag_name, $context ){
		if ( 'iframe' === $tag_name && 'the_content' === $context ){
			return false;
		}
		return $default;
	},
	10,
	3
);

您还可以使用新的wp_iframe_tag_add_loading_attr过滤器，该过滤器允许自定义特定iframe标签的行为。例如，您可以在特定情况下禁用YouTube视频的延迟加载。

以下代码基于开发者注释中的示例，并显示了如何针对嵌入YouTube视频的iframe禁用延迟加载：

add_filter(
	'wp_iframe_tag_add_loading_attr',
	function( $value, $iframe, $context ){
		if ( 'the_content' === $context && false !== strpos( $iframe, 'youtube.com' ) {
		return false;
	},
	10,
	3
);

请注意，在撰写本文时，所有Web浏览器通常都不支持本机延迟加载。您可以在下面看到Firefox和Safari仅支持图像的延迟加载。

一键式站点从HTTP迁移到HTTPS

从5.7开始，WordPress将检测网站的环境是否支持HTTPS。如果是这样，则“站点运行状况”工具中的“ HTTPS状态”部分提供了一个号召性用语按钮，允许站点管理员单击一次即可将其网站从HTTP切换到HTTPS。网站内容是即时迁移的，从而避免了我们遇到任何混合内容警告。

更新您的网站以在WordPress 5.7中使用HTTPS（图片来源：WordPress.org）

如果不支持HTTPS，WordPress将显示一条通知。

开发人员的从HTTP到HTTPS迁移

WordPress 5.7加上可从“站点运行状况”工具访问的新自动功能，引入了新功能，使开发人员能够测试和自定义HTTPS检测和迁移的不同方面。

更多介绍，请看 WordPress 5.7 改进了HTTPS检测和迁移

新的父级文章相关函数

WordPress 5.7引入了两个新的父级文章相关函数。它们易于使用，可帮助您减少插件和主题中的逻辑。

has_parent_post()

该has_parent_post()函数是一个条件标记，用于检查给定帖子是否具有父项，然后相应地返回true或false。它接受帖子ID或WP_Post对象作为参数，并使用$post全局变量（如果有）。请参见以下示例：

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	// your code here
<?php endif; ?>

get_parent_post()

该get_parent_post()函数是一个模板标签，用于检索WP_Post给定帖子的父对象。像以前的功能一样，它接受帖子ID或WP_Post对象作为参数。请参见以下用法示例：

<a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>"><?php echo get_the_title( get_parent_post( get_the_ID() ) ); ?></a>

在现实世界中，我们会结合使用这些功能。您可以通过将开发说明中的以下代码添加到主题的single.php模板文件中来自己运行测试：

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	<p><a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>">
	<?php
		echo sprintf(
			esc_html__( 'Parent page: %s', 'text-domain' ),
			get_the_title( get_parent_post( get_the_ID() ) )
		);
	?>
	</a></p>
<?php endif; ?>

更多详情，请看 WordPress 5.7 引入新的父级文章相关功能

登录和注册界面更新

WordPress 5.7对登录和注册功能进行了多项改进，其中包括改进的“重置密码”界面，新的挂钩以及其他小的更改。

重置密码屏幕

现在，“重置密码”屏幕提供了两个按钮：“生成密码”和“保存密码”。第一个按钮在每次单击时都会生成一个新的强密码，而第二个按钮将保存您的密码。此更改应为新的WordPress用户带来更好的密码重置体验。

下图比较了WordPress 5.6和5.7中的重置密码屏幕：

新的过滤器

新的lostpassword_user_data挂钩使我们可以$user_data在重置密码时过滤变量。开发人员现在可以使用自定义数据而不是用户名或电子邮件地址来执行用户验证。有关真实示例，请查看Marcelo VillelaGusmão的评论。

新的login_site_html_link过滤器挂钩使我们可以用自定义代码/链接完全替换生成“ 返回{site_name}”链接的HTML。现在，开发人员可以为链接设置自定义文本，以及更改链接本身。您可以按照以下示例中的说明使用过滤器：

function custom_login_site_html_link( $link ) {
	return '<a href="' . esc_url( home_url( '/blog/' ) ) . '">' . __( 'Back to my awesome blog', 'textdomain' ) . '</a>';
}
add_filter( 'login_site_html_link', 'custom_login_site_html_link', 10, 1 );

下图显示了屏幕上的输出：

对于其他更改，请查看 WordPress 5.7 对登录和注册界面的更改

检查文章是否可以公开查看的新功能

WordPress 5.7引入了两个新功能，使开发人员可以检查帖子是否可以公开查看。

is_post_status_viewable()

新is_post_status_viewable()功能使开发人员可以根据文章状态确定帖子是否可以公开查看。

与现有is_post_type_viewable()功能相比，此新功能提供了一种更好的方法来检查文章是否可见，该功能可以检查匿名用户是否可以看到文章类型，但无助于确定特定文章是否可见。

对于内置文章类型，请is_post_status_viewable()检查public属性。对于自定义文章类型，它将改为检查publicly_queryable属性。

我们基于开发说明中的示例在本地安装中测试了以下代码：

$current_post_status = get_post_status( $post );
if ( is_post_status_viewable( $current_post_status ) ) {
	echo '<p>This post uses a public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>';
} else {
	echo '<p>This post uses a non public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>';
}

is_post_status_viewable() 接受一个必需的参数：

$post_status（string | stdClass）文章状态名称或对象。

在公共博客文章中，上面的代码将产生以下结果：

在一个私密文章中，结果如下：

开发说明的作者Jean-Baptiste Audras警告：

请注意，受密码保护的文章被认为是公开可见的，而私密文章则不可见。

is_post_publicly_viewable()

如果is_post_status_viewable()和is_post_type_viewable()都返回true，那么新is_post_publicly_viewable()函数将返回true。它还使我们能够确定特定文章是否可以公开查看（即，登出的用户是否可以看到该文章）。

is_post_publicly_viewable() 接受一个可选参数：

$post（string | stdClass）文章ID或对象。默认情况下，将传递全局$post对象。

更多介绍，请看 WordPress 5.7 引入函数来检查文章是否可以公开查看

一个新的动态挂钩，用于过滤特定块类型的内容

WordPress 5.7引入了一个新的动态挂钩，使开发人员能够过滤特定块类型的内容。

这个新的render_block_{$this->name}过滤器与现有render_block 过滤器相似，但有一个主要区别：render_block过滤单个块的内容，而新的动态钩子过滤块类型{$this->name}的内容。

要使用此过滤器，应提供以下参数：

$block_content（字符串）：要附加的块内容。
$block（数组）：完整的块，包括名称和属性。

回调返回修改后的块内容。

下面的示例显示此过滤器在段落块上的用例：

add_filter( 
	'render_block_core/paragraph', 
	function( $block_content, $block ) {
		$content  = '<div class="my-custom-wrapper">' . $block_content . '</div>';
		return $content;
	}, 
	10, 
	2 
);

在此示例中，core/paragraph后缀是核心段落块类型的子句。对于自定义块，该块应该类似于my-custom-plugin/my-custom-block。

有关更深入的概述和其他使用示例，请参见开发说明。

新的Robots API

使用robots meta标签，网站所有者可以控制如何在搜索引擎结果中为网页建立索引并向用户提供服务。

WordPress 5.7引入了新的Robots API，允许开发人员控制此robots元标记。新的API wp_robots为主题开发人员提供了将其自定义指令添加到robots meta标签的过滤器。

此外，默认情况下，该指令 max-image-preview:large现在已添加到配置为可被搜索引擎看到的网站。它指示搜索引擎在搜索结果中显示大图像预览。

WordPress 5.7中的 `max-image-preview:large` 指令

开发人员可以使用以下代码删除max-image-preview:large指令：

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

定制robots指令非常简单。开发说明中的以下示例显示了如何向meta标签添加自定义指令：

add_filter( 
	'wp_robots', 
	function( $robots ) {
		$robots['follow'] = true;
		return $robots;
	}
);

上面的代码将产生以下输出：

<meta name="robots" content="max-image-preview:large, follow">

也可以仅通过取消设置值来删除现有指令。以下代码禁用了该max-image-preview伪指令：

function my_wp_robots_directives( $robots ) {
	unset( $robots['max-image-preview'] );
	$robots['follow'] = true;
	return $robots;
}
add_filter( 'wp_robots', 'my_wp_robots_directives' );

要了解更多细节，请看 WordPress 5.7 的 Robots API 和 max-image-preview 指令