古腾堡块模式完整指南（一）

已发表: 2020-12-23

上周，按照每年的传统，Matt Mullenweg 发表了他的演讲（在这种情况下是虚拟的）， “The Word ”，他在演讲中简要总结了 WordPress 的当前状态和新功能。

Matt 比以往任何时候都更专注于让我们爱上 Gutenberg 块编辑器提供的体验。 Matt 强调的 WordPress 5.5 版附带的新功能之一是块模式。我认为制作这个完整的指南会很有趣。

该指南分为三篇文章，我们将关注以下主题：

块模式简介
在页面上插入图案
目录中可用的预定义模式和其他模式
将目录中可用的模式添加到您的站点
如何从头开始创建图案
如果您不是开发人员，如何创建模式
如何将可重用块转换为块模式
使用块模式的主题
官方文档。

所以，事不宜迟，让我们开始吧！

1. 块模式介绍

当古腾堡到来时，与我们过去在 WordPress 中使用的经典编辑器相比，最大的变化是引入了“块”概念。一切都应该是一个块：帖子标题、它的段落、列表、图像……每个都是一个块，具有自己的自定义属性来设置其字体大小、标题、对齐方式等。

这些块很快变得更加复杂，现在我们有了图片库、媒体/文本块甚至包含其他块的块。

古腾堡海湾街区的屏幕截图 — 在封面块中，对齐选项已更改，现在它包括全高和指示块内内容对齐的选项。

同时，许多开发人员还提供了大量具有独特功能的块，以便您可以改进页面的设计。例如，在 Nelio，我们开发了 Nelio 比较图像，用一个简单的滑块比较两个图像：

不仅在插件和主题中可以找到大量的块，它们的功能也随着 WordPress 的不同版本而发展。因此，您当前可以创建可重用的块，甚至可以使用它们创建页面或帖子模板。

继续使用可以快速轻松地重复使用的预定义设计的想法，使用 WordPress 5.5 版块模式已经到来。块模式的想法非常简单：它们是由一组块组成的预定义部分或片段，您可以在创建页面和帖子时使用它们。这些模式可以是简单的显示两个按钮的部分，也可以是具有醒目和复杂设计的价格部分。

2. 在页面上插入图案

让我们从基础开始，如何在页面上插入新模式？很容易！与块一样，要插入模式，您只需单击编辑器左上角的+按钮，而不是添加块，而是选择模式选项卡。在那里，您会看到一个小的下拉列表，其中包含您可以选择的模式类型、WordPress 的预定义模式、您已安装的主题以及您使用插件安装的任何其他模式。

选择你最喜欢的模式，看看组成它的一组块是如何插入到你的页面中的：

插入模式后，您可以像之前所做的那样修改每个块。此外，如果对该模式的块进行了分组，您还可以将组的属性作为一个整体进行修改。很简单，对吧？

3. 第三方目录中的默认模式和更多模式

WordPress 5.5 版本附带了一组预定义的块模式，您现在可以使用它们来创建页面。您只需单击我上面提到的+按钮即可查看您网站上可用的模式。

此外，您的活动主题也可能定义自己的块模式。例如，二十一十七或二十一二十一 WordPress 主题包括一些块模式，GoDaddy 和 Genesis Blocks 也是如此，举几个例子。

在 WordPress 5.0 发布后，我们遇到了块爆炸式的增长，现在我们看到块模式的结果相同：您可以非常轻松地在您的网站上下载和安装块和模式，我稍后会解释。在这里，您可以使用两个块和图案网，尽管我相信很快会有更多：

Jeffrey Carandang 的 Shareablock Patterns – 一个很棒的网站，您可以在其中共享和获取大量块、模板和模式，以下载并安装在您的网站上。

Munir Kamal 的 Gutenberg Hub – 您还可以在其中找到一堆块、模板和模式。

还有Redux Framework 插件，它提供了一个库，其中包含 1000 多个第三方块、模板和模式（包括上面目录中可用的那些）以插入到您的页面中。该插件允许您下载多达 5 个免费模式，然后您可以升级到付费版本。

Redux-Framework 插件截图 — Redux-Framework 插件的屏幕截图。

4. 将目录中可用的模式添加到您的站点

正如我已经提到的，您可以使用 Redux Framework 插件轻松地添加来自 Shareablock 和 GutenbergHub 的模式。如果您是专业的 WordPress 网站设计师，那么始终快速找到尽可能多的模式肯定是一个不错的选择。但是您也可以使用新的块模式而无需高级插件。让我们看看如何。