古腾堡 10.2 向导航列表添加间隔符，让用户对模板部件进行分类，并引入范围模式

昨天，Gutenberg WordPress 插件的 10.2 版发布了.用户现在可以在导航项之间添加一个 Spacer 块，对自定义模板部分进行分类，并在插入 Query 块时在模式之间进行选择.

用户体验在某些方面不断改进.媒体与文本块是为数不多的保留之一，现在可以转换为列.转换结果是媒体和文本分开的两列.然而，这是一种单向变换.对于写出他们的文本列的用户来说，这是一项必要的改进，以意识到他们只能添加上传的媒体，而不是像 YouTube 嵌入到 Media & 之类的东西.文本块.快速切换到列可以解决问题.

"开始书写或键入/以选择块"当有后续段落时，提示仅出现在第一个空段落中.这是一个微不足道的变化，但它消除了一个小烦恼.

开发团队为 Gutenberg 10.2 解决了 30 个错误.他们还继续致力于改进实验性功能，例如站点编辑器、全局样式和基于块的导航菜单.Full Site Editing 正在形成，但我们还需要一段时间才能知道它是否准备好包含在 WordPress 5.8 中.

当我写这篇文章时，我也在一个损坏的编辑器中这样做.Gutenberg 10.2 再次更改了它的标记或 CSS，这意味着我将不得不进行一些挖掘以找出为什么我们所有的段落在编辑器中都未对齐.但是，这是明天的工作.这应该是一个特定于主题的修复程序和一个孤立的问题.

在导航列表中嵌套间隔块

古腾堡项目带给我们的最糟糕的想法之一是，用户现在可以在水平导航块项目之间插入间隔块.他们可以以像素为单位增加或减少空间.间距的想法本身并不坏，但使用的解决方案是.

据我所知，<div> 标签不允许作为 <ul> 的直接子代.这就是 <li> 元素去的地方.也许这是我的老派 HTML 教养，但在混合中加入其他东西感觉不对.列表项是列表的子项.

幸运的是，对于这种水平间距，网页设计师已经有几十年可用的解决方案:边距和填充.

自从将 Spacer 块引入 Gutenberg 以来，它就一直感觉不对.在我们获得适当的边距和填充块选项之前，我一直认为这是垂直间距的一个不幸的权宜之计.我从没想过我们会找到新的和创造性的方法来使用它来破坏网站的标记.

模板部件类别

用户现在可以将模板部件保存到特定类别或"区域".因为它们在站点编辑器 UI 中被调用.在 Gutenberg 10.1 中，开发团队为主题作者引入了一个新的分类系统，该系统会自动将模板部件放入页眉、页脚、侧边栏或常规类别中.现在对用户创建的模板部件开放相同的系统.

通过站点编辑器保存模板部件时，用户必须打开"高级"；块选项卡.有一个新的"区域"选项.此版本中缺少侧边栏类别.尽管如此，这是朝着模板部件管理迈出的可喜的一步.

查询块模式

查询块是完整站点编辑的核心.它最终将成为开发者和用户在构建网站时与之交互的主要组件之一.

开发团队在首次插入 Query 块时为最终用户引入了一个新概念.过去，用户会看到几个块变体.现在，他们可以在特定于块的模式之间进行选择.

开箱即用，有大号、中号和小号图案.用户还可以选择从空白开始.

对于开发人员，此更改引入了范围模式.它是 Block Patterns API 的一个新层，从长远来看应该提供大量的灵活性.虽然该功能目前仅适用于 Query 块，但主题和插件作者可以为用户将来可以选择的块创建预定义的布局.

想象一下，您希望向用户提供多种不同风格的帖子循环.只需几行代码，您就可以将其中的每一个都注册为可选的查询模式.

API 的新部分添加了一个 scope 参数，如下所示:

'scope' => [
        'inserter' => false,//Whether to show in the main block inserter.
        'block'    => [ 'core/query' ]//The container block for the pattern.
]

这仍处于实验阶段，因此随着功能的进一步开发，情况可能会发生变化.

按照核心示例，我使用以下代码创建了一个快速查询模式:

add_action( 'init', function() {

	register_block_pattern(
		'tavern-query',
		[
			'title'  => 'Tavern Query',
			'scope'  => [
				'inserter' => false,
				'block'    => [ 'core/query' ],
			],
			'content' =>
                '<!--wp:post-title {"isLink":true}/-->
				<!--wp:post-featured-image {"isLink":true,"align":"wide"}/-->
				<!--wp:post-excerpt/-->
				<!--wp:separator-->
				<hr class="wp-block-separator"/>
				<!--/wp:separator-->
				<!--wp:post-date/-->'
		]
	);
} );