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块)的性能。

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

版本加载时间KeyPress事件(输入)
古腾堡6.6.04.7秒38.96毫秒
古腾堡6.5.04.68秒42.96毫秒
WordPress 5.25.69秒57.65毫秒

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

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

改善编辑体验

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

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

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

1.Block添加

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

WordPress 5.3中的分组阻止

WordPress 5.3中的空Group块

2.按组交互的Group块

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

小组互动

通过Group交互创建块

3.自定义列的宽度

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

WordPress 5.3中的Columns块

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或方向键在块之间导航,而无需进入块内容。用户只需按EnterEsc 键即可从导航模式切换到编辑模式 。此功能极大地提高了可用性,尤其是在屏幕阅读器上。

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

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

方块运动

块的移动

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

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

画廊街区

改进的画廊块

9.最新帖子块的改进

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

最新帖子小部件

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

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

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

10.列表块功能的增强

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

清单区块

列表块中的有序列表设置

块编辑器的其他改进

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

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

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块的新标记:

LeftCenterRight

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

面向块开发人员的功能

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

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

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

随着WordPress 5.3的发布,我们现在可以利用两个新的帮助器功能,允许通过PHP注册和取消注册块样式:register_block_styleunregister_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

块示例API

站点健康组件的改进

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

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

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

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

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

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

  • Should be improved
  • Good
WordPress 5.3中的“站点健康状态”页面

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.2中的帖子屏幕

WordPress 5.3中的帖子屏幕

WordPress 5.3中的帖子屏幕

2.管理员电子邮件验证

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

管理员电子邮件验证

管理员电子邮件验证

3.恢复上传

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

4.图像旋转

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

全新的默认主题: Twenty Twenty

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

20个20个WordPress主题

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引入了两个新功能,允许开发人员向链接中的属性添加值nofollowugcrel

  • 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()nofollowugc值都添加到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 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的发展中树立了重要的里程碑。

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

《WordPress 5.3—块编辑器,API,以及管理界面中的新增功能》有1条留言

留下评论