古腾堡块模式的完整指南(III)
已发表: 2020-12-30这是块模式完整指南的第三部分,也是最后一部分,包括以下主题:
- 块模式简介
- 在页面上插入图案
- 目录中可用的预定义模式和其他模式
- 将目录中可用的模式添加到您的站点
- 如何从头开始创建图案
- 如果您不是开发人员,如何创建模式
- 如何将可重用的块变成块模式
- 使用块模式的主题
- 官方文档。
在第一部分中,我们看到了指南中涵盖的所有主题的前 4 点:什么是块模式、如何在页面中插入预定义的模式以及在哪里找到以及如何复制某些目录中可用的模式. 在第二部分中,我们详细了解了第 5 点:我们如何使用代码从头开始创建模式。 在最后一篇文章中,我们将看看最后 4 点:我们如何在不成为开发人员的情况下创建模式,如何将可重用的块转换为块模式,哪些主题使用块模式,最后,你可以在哪里找到关于模式的官方文档。
6. 如果您不是开发人员,如何创建模式
尽管我们已经在上一篇文章中看到了使用代码创建模式所必须遵循的步骤,但在这一点上,我们将看到您无需成为开发人员也可以创建模式。 是的,我们将使用插件来完成。 事实上,创建模式的插件不止一个:
- 贾斯汀·塔德洛克(Justin Tadlock)的块模式生成器,
- BlockMeister – BlockMeister 的块模式生成器,
- 页面生成器 Gutenberg Blocks – GoDaddy 的 CoBlocks
这三者的工作方式相似,但有一些细微差别。 安装其中任何一个后,WordPress 管理菜单中会出现新选项,以便您可以创建新模式并管理创建的模式列表。
对于 Block Patterns Builder 插件(即左侧的图像),出现的 Block Patterns 菜单有两个选项:一个是创建新模式,另一个是列出和编辑现有模式。 对于 BlockMeister 插件(如中图所示),它还添加了第三个选项来管理模式的类别。 在 CoBlock 的情况下(如上图所示),它的菜单出现在Appearance下。
在所有三个插件中,创建新模式会打开您用于编辑任何页面或帖子的同一编辑器。 只需为模式命名并定义您希望它拥有的块。 当你的图案准备好时,只需保存它。

前面的屏幕截图显示了 BlockMeister 插件提供的块模式编辑器。 如您所见,它在右侧栏中提供了许多附加属性:名称、slug、描述、模式的宽度和类别。 另一方面,Justin Tadlock 插件不允许您添加类别。 并且 CoBlocks 还允许您添加模式的附加属性。
使用这三个插件中的任何一个,在保存您的模式后,单击帖子和页面编辑器中的+按钮即可使用它,以便您可以在需要时插入它。

如您所见,只要您使用正确的插件,就可以很容易地创建您希望在页面设计中可用的模式。

7. 如何将可重用的块变成块模式
如果您已经使用 Gutenberg 一段时间并且一直在使用它设计页面,我敢打赌您还创建了一些可重用的块来在多个页面上复制某个设计。 至少我做到了! 我记得我第一次听说模式时,我认为它们与可重复使用的块几乎相同……但事实并非如此:这两个概念之间存在一些相关的差异。
可重用块是可以插入不同页面的块(或一组块),其内容在所有页面上都相同。 也就是说,如果您稍后对其进行修改,则应更新其所有实例。 因此,如果您希望可重用块与其他块不同,则必须先将其转换为普通块。
另一方面,块状图案是为定制而设计的——它是一种基本设计,您应该在插入它后对其进行调整。 当然,选项是无限的。 该模式的想法是为如何组合块以使其看起来更有吸引力提供一个起点。
如果您创建可重用块的想法是将它们转换为普通块然后方便地自定义它们,那么将这些块转换为块模式更有意义。 我们应该怎么做?
JB Audras 的 Reusable Block Extended 插件为我们提供了这个功能。 让我们看看我们是如何做到的。
安装插件后,将出现一个菜单选项来管理可重用块。 如果您单击All Reusable Blocks ,您将看到已定义的块列表。

正如您在上图中所见,可重用块列表显示了两个块,对于每个块,它会告诉您它们的使用位置、简码和 PHP 函数,以便您可以使用它们,以及一个按钮您可以将其转换为块模式。
单击“转换为块模式”按钮后,将为您创建模式,并且将在您的编辑器中的“从可重用块转换”类别中可用。

8. 使用块模式的主题
在撰写本文时,WordPress.org 主题目录中已经有 14 个具有自定义块模式的主题,并且该列表正在快速增长。

- WordPress.org 的 2221 版本 1.0
- C9 Starter 版本 2.4.4,作者:covertnine
- C9 工作版本 2.3.1,作者:covertnine
- Automattic 的 Seedlet 版本 1.1.2
- ExS 版本 0.9.0 由 exstheme
- uxl 的 Cordero 版本 1.2.2
- Diev Dmitry 的 Bigwigs 版本 0.7.1
- 大雄的乳液版本 1.6.9
- WordPress.org 的二十二十版本 1.6
- VW THEMES 的 VW Health Coaching 版本 0.6.5
- WordPress.org 的 29 版 4.9.6
- Diev Dmitry 着作 1.3.0 版
- WordPress.org 的 27 版 2.5
- WordPress.org 的 26 版 2.3
我借此机会提一下,如果您是主题开发人员,并且想要消除 WordPress 5.5 中的预定义块(核心块模式),您可以使用以下代码来实现:
remove_theme_support( 'core-block-patterns' );9. 官方文档
最后,这里有一些关于块模式的有用链接:
- 面向最终用户 - 阻止模式的介绍性视频,以了解什么是模式、如何访问它们、如何将它们添加到帖子和页面中,并了解如何为您的内容定制它们。 该视频是由 WordPress 培训团队发布的研讨会。
- 对于最终用户——文档团队创建的块模式文档。
- For Developers – Block API 文档中的 Block Patterns 页面,由 Gutenberg 团队发布,我在上一篇文章中已经告诉过你。
就是这样! 我希望您发现本指南有用。 如果您认为缺少任何信息,请随时在下面的评论部分告诉我。
帕特里克·亨德利 (Patrick Hendry) 在 Unsplash 上的特色图片。



