Gutenberg 7.8 添加模式 API 并继续清理接口

Gutenberg 插件的 7.8 版昨天登陆了.该团队通过从 7.7 版开始的刷新界面工作继续改进编辑器.此插件更新最有用的功能是为插件和主题开发人员包含了 Patterns API.

此版本不是我们在某些早期版本中经历的大量功能发布.它是许多较小改进的结晶，特别是改进了用户界面和体验.此更新包括 20 多个错误修复、一些对站点编辑器等实验性功能的持续工作，以及对代码质量的多项改进.

在不需要保存的情况下编辑帖子永久链接应该可以正常工作，这是一年多以来的一个突出问题.用户现在可以为最新帖子块选择多个类别，而不是单个类别.而且，实验性的全站点编辑功能现在支持全屏模式.

用户界面不断改进

团队开始对 Gutenberg 7.7 中的用户界面进行大规模更新.在此版本中，他们继续以最初的工作为基础.设计人员对编辑器工具栏的多个图标进行了微调，其中包括粗体、斜体、删除线、缩进、缩进和间隔图标.

最显着的差异之一是更新了帖子预览按钮的面向用户的文本.在以前的版本中，有一个按钮，简单地阅读"桌面".单击后，它将打开一个下拉列表，以在桌面、平板电脑或移动模式下预览帖子.我最初以为团队已经删除了帖子预览选项，直到我点击它.在 7.8 版中，该按钮的文本现在显示为"预览".这是一个不再令人困惑的急需改变.

总的来说，在编辑器上做的打磨工作看起来不错.在这一点上，我已经习惯了它，以至于我不想回到没有安装 Gutenberg 插件的常规 WordPress 安装.

构建自定义块模式

我之前说过，但还是要重复一遍:我对块模式很感兴趣.我对插件和主题作者能够通过构建自己的自定义模式开始测试此功能的能力感到更加兴奋.我预见在接下来的几个月甚至更长时间里，创造力会大增.

模式是一个或多个块的 HTML 注册.插件和主题作者可以进一步定义这些块的设置.Gutenberg 团队包含一个简单的 PHP 函数，供开发人员注册名为 register_pattern() 的自定义模式.

自从我昨天晚上更新以来，我已经修改了许多模式想法.构建模式的最简单方法是在视觉上进行.打开编辑器并创建一组您喜欢的独特块.然后，切换到代码编辑器并复制代码.从那时起，您可以通过 PHP 注册模式并粘贴复制的代码.在这个过程中并没有真正涉及到多少实际的编码.即使是具有足够 DIY 勇气的高级用户也可以在他们主题的 functions.php 文件中注册它们.

下面是一个简单的"英雄"如上图所示，使用封面块、标题、段落和按钮组的模式(为了便于阅读，我在复制和粘贴后稍微格式化了代码):

add_action( 'init', function() {

	register_pattern( 'tavern/hero-1', [
		'title'   => __( 'Hero 1' ),
		'content' =>
			'<!--wp:cover {"customOverlayColor":"#273f60","align":"full"}-->
			<div class="wp-block-cover alignfull has-background-dim" style="background-color:#273f60">
				<div class="wp-block-cover__inner-container">
					<!--wp:heading {"align":"center"}-->
					<h2 class="has-text-align-center">Heading Title Here</h2>
					<!--/wp:heading-->

					<!--wp:paragraph {"align":"center"}-->
					<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<!--/wp:paragraph-->

					<!--wp:buttons {"align":"center"}-->
					<div class="wp-block-buttons aligncenter">
						<!--wp:button {"className":"is-style-outline"}-->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button A</a></div>
						<!--/wp:button-->
						<!--wp:button {"className":"is-style-outline"}-->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button B</a></div>
						<!--/wp:button-->
					</div>
					<!--/wp:buttons-->
				</div>
			</div>
			<!--/wp:cover-->'
	] );
} );

免责声明:上述代码用于实验性功能，可能会在古腾堡的更高版本中更改插件或 API 正式添加到核心 WordPress 之前.