WordPress 5.7核心新功能详解：延迟加载HTTPSUI更新API等亮点解析

每次发布新版本时，我们都会期待看到细微的改进和显著的变革，尤其是向WordPress核心添加的新功能。WordPress 5.7延续了这一趋势，让我们更接近理想的用户体验。通过将多个版本的块编辑器合并到核心中，新版本不仅提升了整体编辑体验，还使开发人员能够构建更高级的块，并为块编辑器添加更强大的自定义项。除了编辑器之外，WordPress 5.7还引入了许多重要更新和强大功能，包括延迟加载iframe、登录和注册界面更新、重置密码链接优化以及大量错误修复等。我们已在DevKinsta上进行了全面测试，并准备与您分享WordPress 5.7中最值得关注的特性和改进——当然，完整的功能还包括大量屏幕截图和代码片段。尽管我们仍在等待完整站点编辑（在WordPress 5.8中已进入核心阶段），但WordPress 5.7的新功能已让我们感到满意并乐于体验！

### 文章目录

– 块编辑器中的新增功能
– 块变体功能、增强功能和API
– 新的按钮块功能
– 社交图标增强
– 字体大小支持
– 封面块的全高对齐
– 从插入器拖放块和模式
– 半透明空白块
– 值得关注的块编辑器其他改进
– 延迟加载iframe
– 开发者的延迟加载iframe
– 一键式站点从HTTP迁移到HTTPS
– 开发者的从HTTP到HTTPS迁移
– 新的父级文章相关函数
– 登录和注册界面更新
– 重置密码屏幕
– 新的过滤器检查文章是否可以公开查看
– 新的动态挂钩，用于过滤特定块类型的内容
– 新的Robots API
– 重置密码链接
– 开发者的其他增强功能
– 将属性传递给脚本标签的新功能
– 标准化的WP-Admin颜色
– 网站运行状况常量
– WP_MEMORY_LIMIT

### 块编辑器中的新增功能

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

WordPress 5.4引入了块变体功能，允许用户选择同一块的不同实例。这一功能与Block Variations API协同工作，后者为开发人员提供了强大的工具来添加、管理或删除区块的变体。WordPress 5.7进一步增强了块变体功能，提供了更好的UI和更强大的工具。

#### 块变体转换

最初随Gutenberg 9.4引入的“转换为变体切换器”现在被添加到WordPress 5.7中，支持该功能的块会在块卡下方显示此切换器。按钮块等注册新变体时，开发人员可以通过添加transform选项到块变体scope字段中来启用此切换器。例如：

“`javascript
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’ ] } );
“`

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

#### 块信息与块变体匹配

从WordPress 5.7（和Gutenberg 9.7）开始，UI显示了更多关于块变体的具体信息，而以前仅显示通用信息。例如，嵌入块和社交图标等块变体提供了很好的示例，展示了如何将WordPress的信息与信息块变体匹配。

#### UI增强功能

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

#### 新的块变体API

WordPress 5.7引入了新的API，开发人员可以在块变体注册中使用它来显示块变体的正确信息（Gutenberg 9.7）。新isActive属性是一个接受块属性的函数，用于确定版本是否处于活动状态。例如：

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

#### 新的useBlockDisplayInformation挂钩

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

### 新的按钮块功能

WordPress 5.7为按钮块带来了几个新功能，提升了其功能和界面。

#### 按钮尺寸

“设置”边栏中新增了一个控件，允许为按钮块中的按钮设置百分比宽度（Gutenberg 9.4）。用户可以选择25%、50%、75%或100%的宽度。

#### 垂直布局

新功能允许按钮块在垂直方向上变化。用户可以使用块设置面板中的Transformations切换器，从水平布局切换为垂直布局。

#### 社交图标增强

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

##### 社会图标大小

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

##### 社交图标的自定义颜色

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

### 字体大小支持

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

#### 列表块中的字体大小

带有字体大小控件的排版卡已添加到“列表”块设置中（Gutenberg 9.4）。用户可以选择预设大小之一，或设置自定义值。

#### 代码块中的字体大小支持

选择“代码”块后，“块设置”侧边栏将显示一个新的“字体大小”控件。用户可以选择预设大小之一，或设置自定义值（Gutenberg 9.5）。

### 封面块的全高对齐

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

#### 全高对齐的实现

切换块工具栏按钮，同时注意最小高度控件，会发现全高对齐只是100vh的简写形式。您可以将“全高对齐”与其他控件设置结合使用，创建令人印象深刻的效果。

### 从插入器拖放块和模式

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

### 半透明空白块

空白块现在具有半透明的背景，而不是以前的不透明灰色（古腾堡9.8）。这一功能使空白块在任何背景色之上更容易识别。

### 值得关注的块编辑器其他改进

除了上述功能外，WordPress 5.7还带来了许多其他改进，包括：

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

### 延迟加载iframe

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

#### 本机延迟加载

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

##### Safari支持延迟加载图像

作为实验功能，Safari支持延迟加载图像（WordPress 5.5）。

#### 延迟加载iframe

WordPress 5.7将延迟加载扩展到iframe标签。和图像一样，loading=”lazy”将仅添加到具有width和height属性指定的那些iframe标签。

##### 延迟加载嵌入式YouTube视频

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

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

### 开发者的延迟加载iframe

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

– wp_filter_content_tags()函数的行为已经扩展到了添加loading属性到iframe标签。
– wp_lazy_loading_enabled()功能现在默认返回true的iframe标签（启用时）。
– 新的wp_iframe_tag_add_loading_attr功能允许将loading属性添加到iframe标签。
– wp_iframe_tag_add_loading_attr过滤器允许延迟加载特定的iframe的定制。

例如，您可以使用以下代码针对嵌入YouTube视频的iframe禁用延迟加载：

“`javascript
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 );
“`

### 一键式站点从HTTP迁移到HTTPS

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

### 开发者的从HTTP到HTTPS迁移

WordPress 5.7引入了新功能，使开发人员能够测试和自定义HTTPS检测和迁移的不同方面。

### 新的父级文章相关函数

WordPress 5.7引入了两个新的父级文章相关函数，帮助减少插件和主题中的逻辑。

#### has_parent_post()

条件标记，用于检查给定帖子是否具有父项，然后返回true或false。

“`php
// your code here
“`

#### get_parent_post()

模板标签，用于检索给定帖子的父对象。

“`php
// your code here
“`

### 登录和注册界面更新

WordPress 5.7对登录和注册界面进行了更新，包括重置密码链接的优化。

### 重置密码屏幕

新的过滤器检查文章是否可以公开查看。

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

新的Robots API。

### 重置密码链接

开发者的其他增强功能。

### 将属性传递给脚本标签的新功能

标准化的WP-Admin颜色。

### 网站运行状况常量

WP_MEMORY_LIMIT。

总结来说，WordPress 5.7带来了许多重要的改进和功能，特别是在块编辑器方面。这些更新不仅提升了用户体验，还为开发人员提供了更强大的工具和更灵活的选项。尽管我们仍在期待完整站点编辑的推出，但WordPress 5.7的新功能已让我们感到满意并乐于体验！