构建古腾堡块模式库

古腾堡代表了向基于模式的网页设计的巨大转变。 在本文中，我将讨论我们在创建我们自己的自定义古腾堡块的灵活库时所采用的方法。

背景

2018 年 12 月发布的 Gutenberg 代表了 WordPress 自成立以来的最大变化。 新的基于块的“拖放”界面改变了开发人员创建主题的方式、设计人员考虑将站点分解为组件的方式以及内容编辑器管理和计划内容创建的方式。

这是向基于模式的网站设计的根本转变； 一个可重复使用的元素系统，可以在整个网站上一致应用，以创建最佳的用户体验并简化工作流程。 虽然我们中的许多人已经在研究模式，但古腾堡以更快的速度推动着这种变化。 由于 WordPress 为全球三分之一的网站提供支持，因此这种变化的影响不容小觑。

本文重点介绍了我们作为开发人员在开始规划和构建模式库时面临的一些问题，我们如何克服 Gutenberg 固有的限制以及我们创建灵活的自定义块系统所采用的方法。

我们的目标

作为定制 WordPress 网站的专业构建者，Gutenberg 为我们提供了创建统一模式库的绝佳机会； 一组可定制的块，用于我们的许多自定义网站构建。

我们不仅希望接受这种新的编辑体验，还希望能够使用我们自己的系统提供解决方案，而无需依赖有限的核心 Gutenberg 块集或现成的 3rd 方解决方案的拼凑。

一组触手可及的全面块也意味着我们不必为新的古腾堡网站构建从头开始创建每个块。 这将使我们能够花更多时间改进网站的美感，并添加有助于将网站与竞争对手区分开来的最后润色和优化。

挑战

设计灵活性

我们需要一个具有多种模式的多功能设计系​​统，这将使我们能够灵活地创建各种定制主题。

在能够保持有限和现实数量的模式之间取得良好平衡，同时又不影响主题设计，这将是一个挑战。

主题发展的转变

在古腾堡之前，我们采用了多种不同的方法来开发主题。 最常见的是为站点的不同部分创建单独的页面模板。 模板将非常规范，并包括每个设计部分的自定义字段。 例如，“案例研究”模板可能包括用于文本编辑器、图片库、推荐等的字段。但是，一旦包含在模板中，它们就不能轻易更改。

这种方法不仅在页面布局方面受到限制，而且通常意味着每个新的基于模板的站点都需要重复努力； 需要创建字段、设置模板和单独的组件编码以在前端显示。

为了适应古腾堡，我们需要改变我们的开发方法，了解我们如何创建可重用的组件并拥抱古腾堡现在为我们提供的新网站构建的灵活性。

古腾堡没那么灵活

开箱即用，古腾堡有 30 多个核心块可用。 从基本内容组件（如段落、标题和列表元素）到更复杂的小部件和嵌入，应有尽有。

对于我们的许多网站构建，很多这些核心块要么不相关，要么不具备我们的主题要求的功能级别。 我们需要一种方法来创建我们自己的一组模式，以执行适合主题设计的非常具体的功能。

我们很快在 Gutenberg 中发现的另一个问题是，使用核心块创建更复杂的布局既不简单也不直观。

例如，“内容和图像”块的模式可能需要标题、段落、列表和按钮出现在图像旁边，并且可以选择在该内容的左侧或右侧显示图像，并且这些元素以一致的布局显示。

古腾堡并不容易实现这种程度的自由。 虽然有几个块可以添加文本、图像和按钮，但它们本质上是非常原子的，当单独添加时，它们会显示为单独的堆叠块。 很早就很明显古腾堡不够灵活，我们需要能够构建自己的自定义块。

我们的解决方案

多功能设计系​​统

在 Gutenberg 发布之前，我们已经为我们的模式库在模式的研究和可视化方面投入了大量时间。

这涉及审核我们现有的几个网站和原型，以编译常用元素的线框库。

我们的设计师和开发人员继续合作以了解如何将这些元素组合到古腾堡积木中，以及如何创建特定积木类型，以便在有限的自定义选项下，可以使单个积木看起来因主题而异。

一旦我们将我们的模式分类成块，我们就可以开始构建了。

具有高级自定义字段的构建块

每个主题开发人员几乎肯定都会在某个时候遇到高级自定义字段 (ACF)。 通过直观的界面，可以创建多种不同的字段类型； 从基本文本字段和内容编辑器到日期选择器、地图嵌入和图库字段。 这些可以轻松分配到站点的不同区域，例如帖子类型、页面模板、类别和用户页面。

ACF 的最新版本 ACF 块将所有这些熟悉的功能扩展到 Gutenberg。 可以按照与站点其他区域相同的方式创建字段组并将其分配给不同的基于 ACF 的块。

通过注册块和输出字段所需的几行代码，可以在几分钟内创建一个基本的自定义块。 使用这种方法可以轻松创建块，这使我们能够专注于块配置、输出和样式。

我们现在能够创建一套自定义块，这些块提供了古腾堡的所有灵活性，但仅限于有助于保持布局一致的主题设计。

模式库插件

在创建了几个示例块之后，我们决定在工程团队的帮助下将我们的块打包在一个自定义插件中。

这个基于块的插件允许为新网站构建快速部署自定义模式。 然后在主题级别进一步定制这些。

我们的模式库插件包括一些有用的功能：

1. 基本块模板文件，允许我们快速添加新块；
2. 允许初始化核心块和自定义块并包含在自定义类别下的功能；
3. 一个管理设置屏幕，其中每个块都可以启用或禁用；
4. 能够覆盖主题内块的布局和结构；
5. 在主题级别覆盖块样式的能力；
6. 在 Gutenberg 中加载主题级别的样式表，以便块管理预览看起来与前端块相同。 CSS 网格的使用帮助我们最大限度地提高了美学和布局的灵活性，同时最大限度地减少了结构变化；
7. 可以将特定块限制为某些帖子类型以保持一致性。

Pattern Library 插件的开发将是一个持续的发展，但我们现在有超过 15 个块可用于构建我们灵活主题设计的很大一部分。

我们的块套件包括内容和图像模式、推荐、相关文章和团队块以及更多“展示”样式模式，包括画廊、统计数据和滑块。

概括

我们对古腾堡和我们的自定义模式库开放的机会感到非常兴奋。

我们不仅可以使用最新的编辑体验继续推动我们的定制网站产品，我们还能够使用统一的开发方法制作高度灵活的网站，帮助我们为最终用户创造丰富的体验。

自从我们第一次开始使用我们的古腾堡块模式库以来，已经将近 2 个月了，我们现在正在许多新站点构建中使用它。 客户一直渴望使用古腾堡，到目前为止，客户的反馈非常积极。

“Matt 和 Pammy 提供了有关您创建的站点元素的教程，它们非常棒！！ 灵活性和专业性太棒了，我非常感谢你迄今为止在这方面所做的所有出色的工作......现在对这个网站感到非常兴奋。 谢谢”

– 雷切尔·史密斯，基督教青年会诺丁汉

随着我们在 Gutenberg 上花费更多时间，我们将继续扩展我们的自定义块模式库并进一步改进。 我们目前正在开发我们的第 5 个基于古腾堡的网站，因此请尽快寻找案例研究！

如果您在 WordPress 开发方面需要帮助，请随时与我们联系。