WordPress 5.3—块编辑器，API，以及管理界面中的新增功能

WordPress 5.3 “Kirk”已于2019年11月12日正式发布，可以下载使用。

那么此次更新具体更新了哪些内容呢，接下来勺子就为大家细数一下：

首先，最重要的是，Gutenberg（古腾堡编辑器）插件的发行版本已从5.4合并到6.6。这意味着为用户和开发人员提供了大量的功能和增强功能，以及对性能的重要提升。

但是WordPress 5.3中的功能远不止Gutenberg。实际上，此次更新了与站点运行状况工具相关的多项改进，全新的默认主题（TwentyTwenty），管理用户界面的增强，对PHP 7.4的更友好的支持，可访问性的改进等。

听起来很棒但是还是不知道到底更新了哪些功能，对不对？没事，让我们开始深入探讨WordPress 5.3吧。

块编辑器的新增功能

自首次发布以来，由于来自世界各地的贡献者的努力，块编辑器得到了定期改进。但是，以往新版本一旦发布不会合并到核心版本中。

在5.3版本中，Gutenberg插件的十三个版本全部合并到核心版本中。因此，如果到目前为止您还没有使用过Gutenberg插件，或者没有定期对其进行更新的站长，那么在WordPress 5.3发行版的Block Editor中，您会发现很多增强功能和新功能。

5.3版本还有针对整体性能的提高。以下比较了使用不同版本的Gutenberg插件编辑的大型文章（36,000字/ 1,000块）的性能。

你可能不会注意到一般短篇幅文章的加载时间的区别，但是对于很长的文章，编辑器的性能明显改进了不少。

很难列出古腾堡编辑器所做的所有改进，因此我们选择了对用户/开发人员影响最大的内容，并将它们分为三个方面：

• 改善编辑体验
• 主题开发人员和设计师的功能
• 面向块开发人员的功能

改善编辑体验

如果您以前从未安装过Gutenberg插件，那么会发现一个全新的块：Group块。是从Gutenberg 5.5添加到编辑器中的，Group块是其他块的容器，使您可以创建高级的块模板，使其包含在WordPress网站的任何页面中。

新的Group块支持更多的对齐方式和背景色，使WordPress用户在创建内容时拥有足够的自由度。

除了Group块外，我们还可以看到“块编辑器”中的十项改进，这些改进将对你使用编辑器的方式产生重大影响。

1.Block添加

Group和Columns块，下面显示的是空的模块添加器。它使UI更加清晰并提高了块的可用性。

WordPress 5.3中的空Group块

2.按组交互的Group块

现在，你可以通过“Group”交互来创建分组块，也就是说你可以选择多个块并将其分组，仅需单击几下即可。你只需要将所有要用到的块添加到选择中，然后在省略号菜单中单击“ Group ”即可！

通过Group交互创建块

3.自定义列的宽度

现在，Column块在“块”设置中支持滑动控件，允许您为每列设置自定义宽度（在将来的版本中，我们有望通过引入可拖动的调整大小的控件来对Column块进行更好的改进）。

WordPress 5.3中的Columns块

4.Columns块的布局选择器

布局选择器是WordPress 5.3中Columns块的另一项改进。此功能随Gutenberg 6.0一起添加到编辑器中，使用户可以从几种预定义的布局（图案）中进行选择，从而加快了编辑过程，并使WordPress小白更容易使用该块。

Columns块布局选择器

布局选择器是Block Patterns API的一种实现，它提供了一种在添加块时从一组预定义选项中进行选择的方法。除了Columns块外，我们还可以在Table和Cover块中找到块模式的示例。你可以在GitHub上阅读有关Block Patterns API的更多信息。

封面图案

5.表格块的改进

表格块增加了几个新功能。现在，它支持列，表的页眉和页脚以及背景颜色中的文本对齐。

新的表格块支持文本对齐，页眉和页脚以及背景颜色

6.块导航模式

Gutenberg 6.3引入了导航模式，使用Tab或方向键在块之间导航，而无需进入块内容。用户只需按Enter或Esc 键即可从导航模式切换到编辑模式 。此功能极大地提高了可用性，尤其是在屏幕阅读器上。

7.添加了移动功能来实现重新排列段落

另外的一项改进是块的变化，创建，删除和重新排序功能。

块的移动

8.画廊块中的嵌入式图像重新排序

画廊块已经增强了嵌入式图像重新排序。现在，我们只需单击“ 向前移动图像”和“ 向后移动图像”按钮即可重新排列图库中的图像，而无需打开媒体模式屏幕。

改进的画廊块

9.最新帖子块的改进

最新的帖子块现在支持摘录和帖子内容迭代。

最新帖子小部件支持摘录和帖子内容

块设置面板现在包含了一个功能：用户可以在其中切换开/关帖子内容。如果帖子内容处于活动状态，则可以在摘录和完整帖子选项之间进行选择。最后，如果选中了摘录，则可以使用滑块控制摘录的长度。

最后一项更改侧重于总体UI的增强。

10.列表块功能的增强

列表块现在支持缩进功能，起始值和对有序列表的逆序支持。

列表块中的有序列表设置

块编辑器的其他改进

由于将大量的Gutenberg插件版本合并到Core中，因此有很多更改，改进和错误修复，勺子在这里都没有提及。一些其他增强功能和新功能包括：

• Columns块现在支持垂直对齐（Gutenberg 5.4）。
• Media＆Text块现在支持垂直对齐（Gutenberg 5.5）。
• 现在，“按钮”块支持链接目标选项（Gutenberg 6.2）。
• 分隔块现在支持边框颜色（Gutenberg 6.3）。
• 封面现在可以调整大小了（古腾堡6.4）。
• 改进的打字机体验，在移动设备上特别有用（Gutenberg 6.4）。
• 图像块现在具有圆形剪切变体（Gutenberg 6.4）。
• 添加了一个全新的Social Links块（Gutenberg 6.5）。
• Gallery块现在提供对Gallery字幕的支持（Gutenberg 6.5）。

主题开发人员和设计师的有趣功能

WordPress 5.3还为主题开发人员和设计人员在块编辑器中添加了许多功能和改进。

三个主要更改涉及主题设计器，并且与几个模块的CSS和HTML有关。

1.组块内部容器

现在，Group块包含一个内部容器（wp-block-group__inner-container），如果没有仔细设计，它可以延伸到main块容器之外。这可能会对页面的外观产生意想不到的影响。

在块编辑器中将块内部容器分组

因此，在主题支持全宽和完全对齐样式的情况下，“块”容器可能需要一些其他CSS才能使其按预期显示。

在前台将分组内部容器分组

这是WordPress博客中的一个示例，显示了如何设置样式块以防止此类问题：

// Apply entry-content styles to the group block’s inner container as well. 
.entry-content,
.wp-block-group__inner-container {
	width: 60vw;
	margin: 0 auto;
}
 
// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.alignwide,
.wp-block-group.alignwide .alignfull {
	margin-left: -10vw;
	width: 80vw;
}
 
.alignfull {
	margin-left: -20vw;
	width: 100vw;
}
 
// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
	max-width: 100%;
	margin-left: 0;
}

2.文本对齐的新类名称

在WordPress 5.3之前，内联样式用于更改文本块的对齐方式（标题，段落，引号和文本）。

内联样式的高度特异性可能使自定义块的外观很困难。但是，主题设计师现在可以利用三个新的CSS类来替换嵌入式样式：

• has-text-align-right
• has-text-align-center
• has-text-align-left

帖子一旦打开并保存在“块编辑器”中，现有的块将自动转换并应用类。

3. Gallery 和 Table 块标记更新

Gallery和Table块现在包装在figure元素中。元素样式会相应更改，主题可能会受到影响，并且可能需要更新。这是Table块的新标记：

在Make WordPress Core博客上查看有关类名和与主题相关的其他更改的更多详细信息。

面向块开发人员的功能

WordPress 5.3对Block API进行了更改和改进。

1.注册和取消注册块样式

在5.3之前，开发人员和设计人员必须编写一些JavaScript来注册/取消注册样式。

随着WordPress 5.3的发布，我们现在可以利用两个新的帮助器功能，允许通过PHP注册和取消注册块样式：register_block_style和unregister_block_style。

该register_block_style函数为指定的块注册新样式。该函数保留两个参数：

• 块的名称。
• 样式属性数组。

该数组可以包含以下参数：

• name：（必需）样式的唯一标识符。
• label：（必填）可读的标签。
• inline_style：（可选）注册该样式的CSS类的CSS代码。
• style_handle：（可选）已注册样式的句柄（样式句柄将样式排入需要的位置）。

我们可以使用以下代码注册内联样式：

add_action( \'init\', \'register_custom_block_style\' ); 

function register_custom_block_style() {
	if( ! function_exists( \'register_block_style\' ) ) return;

	register_block_style(
		\'core/quote\',
		array(
			\'name\'			=> \'blue-quote\',
			\'label\'			=> __( \'Blue Quote\' ),
			\'inline_style\'	=> \'.wp-block-quote.is-style-blue-quote { color: blue; }\',
		)
	);
};

现在，“ 样式设置”部分中提供了新样式。

块编辑器中具有自定义样式的地方

除了注册内联样式，我们还可以将句柄传递给先前注册的样式：

wp_register_style( \'custom-style\', get_template_directory_uri() . \'/custom-style.css\' );
 
register_block_style(
	\'core/quote\',
	array(
		\'name\'			=> \'custom-quote\',
		\'label\'			=> \'Custom Quote\',
		\'style_handle\'	=> \'custom-style\',
	)
);

下图显示了在上面的示例中注册的蓝色引号。

前端带有自定义样式的地方

要注销以前在服务器上注册过的样式register_block_style，可以使用函数unregister_block_style。

此功能不适用于使用客户端代码注册的样式。

我们可以这样使用unregister_block_style：

unregister_block_style( \'core/quote\', \'custom-quote\' );

2.块示例API

WordPress 5.3添加了一个新的JS属性，允许在将选定的块添加到内容之前对其进行预览。

我们可以通过example在块设置中定义属性来添加对此功能的支持，如下所示：

const blockSettings = {
	// ... 
 
	example: {
		attributes: { 
			content: __( \'Content of the block\' )
		},
		innerBlocks: []
	} 
}
registerBlockType( name, settings );

块示例API

站点健康组件的改进

WordPress 5.2引入了“ 网站健康”工具，以提供有关网站健康的信息，并在遇到技术难题时帮助网站管理员恢复其网站。随着WordPress 5.3的发布，站点运行状况工具进行了一些改进和更改。

1.删​​除了站点运行状况分级

在WordPress 5.2中，“网站运行状况”状态页面的顶部显示了百分比得分等级。但是，有些人认为分数等级含糊不清，令人困惑，因为用户可能希望他们网站的分数达到100％。

WordPress 5.2中的“站点健康状态”页面

该指标显示站点已通过多少测试，但不显示其“运行状况”级别。出于这个原因，该百分比已被删除，并且“站点运行状况”工具现在仅显示两个状态，可以将其视为提醒，而不是网站性能和安全性的精确指标：

• Should be improved
• Good

WordPress 5.3中的“站点健康状态”页面

2.增强的电子邮件回复功能

发生故障时，WordPress尝试向网站管理员发送电子邮件。不幸的是，这些电子邮件没有提供有用的调试信息，我们只是被告知我们的网站出了点问题。

为了提供更多有用的信息来恢复WordPress网站，WordPress 5.3引入了recovery_email_debug_info过滤器，该过滤器是一组与调试信息相关的数组。现在，恢复电子邮件中包含基本信息，这些信息应可帮助您对网站进行故障排除，或者至少可以从他人那里获得帮助。

失败电子邮件将包含一个附加部分，以下字符串开头：

在寻求有关此问题的帮助时，可能会要求您提供以下一些信息：

然后，提供以下信息：

• WordPress版本。
• PHP版本。
• 当前主题和版本。
• 引起问题的插件的名称和版本。

有意地将信息减少到最低限度，以避免用户感到困惑，但是开发人员可以在需要时使用过滤器 recovery_email_debug_info 添加更多详细信息。

3.用于完成站点健康状态测试的过滤器

新的site_status_test_result筛选器使开发人员可以筛选完成的状态测试的输出，以扩展测试结果。

开发人员还可以使用此过滤器提供其他操作。此过滤器在PHP（直接测试）和JavaScript实现（对于异步测试）中均可用。

管理员体验增强

除了Site Health Tool之外，WordPress 5.3还带来了一些Admin UI增强功能，这些功能应该可以大大改善整个WordPress仪表板的整体体验。

1.改进的色彩对比度

颜色对比度得到了改善，并且许多可访问性问题已得到解决。

WordPress 5.2中的帖子屏幕

WordPress 5.3中的帖子屏幕

2.管理员电子邮件验证

管理员电子邮件验证。默认情况下，此间隔设置为六个月，但开发人员可以使用admin_email_check_interval过滤器设置不同的间隔。

管理员电子邮件验证

3.恢复上传

从智能手机上传大图像不会在过程中间中断，因为WordPress现在支持断点续传。

4.图像旋转

现在可以根据EXIF方向元数据在上传时正确旋转图像。

全新的默认主题： Twenty Twenty

WordPress 5.3带有一个全新的默认主题：Twenty Twenty。这是一个最小的主题，旨在提高灵活性，清晰度和可读性，并特别适配“块编辑器”。

20个20个WordPress主题

Twenty Twenty以社区现有的免费主题为基础，并采用具有强烈个性的自由开源字体：Inter。

对于WordPress开发人员的改进

WordPress 5.3为WordPress开发人员带来了一些更改和改进。在许多更改中，我们认为这些值得一提：

• 日期/时间核心组件的改进
• 新的aria-current属性
• 新的aria标签属性
• 将UGC值添加到链接中相关属性的函数
• WordPress 5.3中的REST API

日期/时间核心组件的改进

日期/时间核心组件处理与WordPress中的日期，时间和时区相关的所有内容。

尽管不可能完全删除WordPress时间戳而没有向后兼容性问题，但组件代码已通过一些错误修复得到了改进，并且内联文档已更新并在需要时进行了更正。

此外，随着WordPress 5.3的发布，我们可以使用几个新的API日期/时间函数：

• wp_timezone_string()–此函数以字符串形式检索站点时区。它可能返回PHP时区字符串或±HH：MM偏移量。
• wp_timezone()–此函数将站点时区作为DateTimeZone对象检索。
• wp_date()–这是日期本地化的新功能。它打算替换date_i18n()。
• current_datetime()–该功能DateTimeImmutable从设置中检索当前时间作为带有时区的对象。
• get_post_datetime()–检索发布时间DateTimeImmutable对象。
• get_post_timestamp() –将发布时间检索为Unix时间戳。

所有这些功能均在wp-includes/functions.php中定义。

另请参阅WordPress 5.3中的日期/时间组件改进和在GitHub上添加到API的新功能。

新的aria-current属性

发布新页面或帖子时，其名称将出现在几个菜单和小部件中。在WordPress 5.3之前，许多用户都不会意识到该链接，而这尤其会对残障用户和屏幕阅读器用户造成混淆。

随着WordPress 5.3的发布，以aria-current="page"编程方式添加了新属性，以指出指向同一页面的链接，并且鼓励主题开发人员向这些链接添加特定的样式。此更改影响以下核心窗口小部件：

• 最近的帖子。
• 导航菜单。
• 页面。
• 类别。
• 档案。

这是用法示例：

a[aria-current] {
	/* CSS styles for current link */
}

导航菜单中的新aria标签属性

“  Landmarks 提供了一种强大的方法来识别网页的组织和结构”，并允许主题开发人员使用地标角色来添加对网页中键盘导航的支持。

ARIA地标提供了Web内容的上下文，对于辅助技术用户特别有用。

由于ARIA Landmarks 对于可访问性的重要性，WordPress 5.3现在增加了对aria-label帖子和评论导航中的属性的支持。

主题开发人员和设计人员可以将ARIA Landmarks添加到帖子和评论导航菜单中，aria_label从而为以下功能添加新参数：

• _navigation_markup()
• get_the_post_navigation()
• get_the_posts_navigation()
• get_the_posts_pagination()
• get_the_comments_navigation()
• get_the_comments_pagination()
• the_post_navigation()
• the_posts_navigation()
• the_posts_pagination()
• the_comments_navigation()
• the_comments_pagination()

将UGC值添加到链接中相关属性的函数

早在2019年9月，谷歌宣布了两个新的属性提供一种方法来确定的联系的性质：rel="sponsored"和rel="ugc":

rel =” ugc”：UGC代表用户生成的内容，建议将ugc属性值用于用户生成的内容内的链接，例如评论和论坛帖子。

WordPress 5.3添加了对rel="ugc"注释中属性的支持。这项更改已在几个小时内实施，很有趣的是，开发团队对Google的公告做出了快速反应。

此外，WordPress 5.3引入了两个新功能，允许开发人员向链接中的属性添加值nofollow和ugc值rel：

• wp_rel_callback()用于将值添加rel到指定链接的属性，并替换现在不建议使用的wp_rel_nofollow_callback()函数。
  该函数定义在wp-includes/formatting.php：

/**
	 * Callback to add a rel attribute to HTML A element.
	 *
	 * Will remove already existing string before adding to prevent invalidating (X)HTML.
	 *
	 * @since 5.3.0
	 *
	 * @param array  $matches Single match.
	 * @param string $rel     The rel attribute to add.
	 * @return string HTML A element with the added rel attribute.
	 */
	function wp_rel_callback( $matches, $rel ) {}

• wp_rel_ugc()将nofollow和ugc值都添加到rel链接的属性中。
  该函数定义在wp-includes/formatting.php：

/**
		 * Adds `rel="nofollow ugc"` string to all HTML A elements in content.
		 *
		 * @since 5.3.0
		 *
		 * @param string $text Content that may contain HTML A elements.
		 * @return string Converted content.
		 */
		function wp_rel_ugc( $text ) {
			// This is a pre-save filter, so text is already escaped.
			$text = stripslashes( $text );
			$text = preg_replace_callback(
				'|<a>|i',
				function( $matches ) {
					return wp_rel_callback( $matches, 'nofollow ugc' );
				},
				$text
			);
			return wp_slash( $text );
		}

因此，从现在开始，开发人员可以将rel="nofollow ugc"属性添加到链接，如下所示：

$link = \'User generated link example\';
$ugc_link = wp_rel_ugc( $link );
echo $ugc_link;
// output: User generated link example

WordPress 5.3中的REST API

WordPress 5.3 对REST API进行了一些更改和改进。

最相关的更改之一是对功能的支持\'object\'和\'array\'数据类型。register_meta

通过此增强功能，REST API现在原生支持复杂的元数据类型。这使我们能够使用API​​来执行基于架构的验证，并可以简化具有复杂值的客户端代码交互，并最终允许开发人员通过REST API创建基于元的复杂块。

有关此主题的更深入的信息，请参阅REST API中的WP 5.3支持对象和数组元类型。

第二个重大改进影响了该_fields参数，该参数允许限制从REST API返回的JSON对象中包含的字段。请参见以下示例：

/wp/v2/posts?_fields=id,title,author

从WordPress 5.3开始，该_fields参数可用于通过嵌套字段过滤REST API响应对象，以便我们可以meta在复杂对象中要求特定的字段或属性。我们可以使用_fields如下参数：

?_fields=meta.meta-key-1,meta.meta-key-2,meta.meta-key-3.nested-prop

有关WordPress 5.3随附的REST API改进的更全面概述，请参阅WordPress 5.3中的REST API。

如何更新到WordPress 5.3

WordPress 5.3于2019年11月12日发布。 您可以按照以下说明更新网站。

由于每个客户的站点都不相同，因此我们始终建议您使用一键式登台环境。您可以在几秒钟内克隆活动站点，然后使用现有主题和插件测试WordPress 5.3，以检查兼容性。 为了安全起见，您当然也可以在更新实时站点之前进行手动备份。

要将WordPress更新到5.3，只需在WordPress管理控制台中单击更新图标。然后点击“立即更新”按钮。在更新您的站点时，它将处于维护模式。更新完成后，您的网站将恢复正常。

只要更新顺利进行，您就应该会看到“ Welcome to WordPress 5.3”屏幕。就是这样！快捷方便。

WordPress 5.3欢迎屏幕

在仪表板中单击后，您还将收到一条消息，将数据库更新为最新版本。只需单击“更新WordPress数据库”按钮，一切就好了。

数据库更新

排查WordPress更新问题

每当人们更新WordPress的主要版本时，总会有一些遇到问题，这是由于目前市场上共存着成千上万种不同的插件和主题。这是解决常见问题的几种方法。

• 您的网站可能仍被部分缓存。您可以通过清除 WordPress网站上的整个页面缓存来解决此问题。
• 尝试停用所有插件，看看是否能解决您的问题。然后一个接一个地激活它们，直到找到哪个插件可能需要开发人员进行更新。
• 尝试切换到默认的WordPress主题，例如  Twenty Twenty。如果这解决了您的问题，则可能需要与主题开发人员联系。
• 对 浏览器中的JavaScript问题进行故障排除和 诊断。

WordPress 5.3为CMS的发展树立了重要的里程碑。

总结

我精选了WordPress 5.3中最令人兴奋的功能和改进。

将13个版本的Gutenberg插件合并为核心，对Site Health Tool进行了一些改进，全新的默认主题，管理界面方面的改进，面向开发人员和主题设计人员的新功能和特性，对PHP 7.4的更好支持以及令人难以置信的少量更改，错误修复和不推荐使用，WordPress 5.3在CMS的发展中树立了重要的里程碑。

您最喜欢的功能/改进是什么？勺子错过了重要的功能了吗？在评论部分与我们分享您的想法。

相关文章:

WordPress5.3中Group块的使用方法 Semantic Ui学习笔记：自定义 WordPress 菜单栏 WordPress 5.3 子主题使用详细教程 WordPress 的 robots.txt 设置方法 WordPress免插件实现网站外链go跳转效果