Builder 基础：如何创建块模式
已发表: 2022-02-24在上个月的 Builder Basics 文章中，我们探讨了块模式：它们是什么以及如何使用它们。 我们了解到，块模式只是形成特定布局的预定义块集合。 我们展示了模式的力量，并讨论了它们如何成为现代 WordPress 主题开发的基石。 今天我们将学习如何设计、分享和注册我们自己的模式！
请注意，本文在其所有示例中都使用了二十二十二主题。 这个基于块的主题与 WordPress 5.9 一起发布，是一个具有 60 多个块模式的绝佳资源。
模式设计
创建块模式最困难的部分是决定它的外观。 让我们从相对简单的事情开始：一个项目网格，两行三行。 我们可以使用这种设计来展示不同的业务服务或产品功能。
快速提示：模式可以由任何块构建，包括第三方块。 但是，如果您打算将您的模式分发给广泛的受众，请尝试仅使用核心 WordPress 块——这样，用户无需安装额外的插件即可使用您的设计。
对我来说，图案设计始于编辑器。 虽然可以手动编码模式，但直观地做事情要容易得多。 我将首先为网格的第一行添加一个包含三列的 Columns 块。 接下来，将 Heading、Paragraph 和 Buttons 块添加到每一列。 复制 Columns 块以创建第二个网格行。 最后，我将应用一些样式配置并将两个 Columns 块包装在具有背景颜色的 Group 块中。 结果如下所示：
您可以在上面的屏幕截图中看到构成此设计的 33 个块！
如果我想创建一个替代的“深色”网格版本，我只需要复制原始设计并调整样式即可。
虽然这两种设计都相对简单，但从头开始创建它们可能很乏味。 能够共享和/或保存这些块模式将节省大量时间。
共享设计
分享图案设计很容易！ 假设您想将设计移动到您网站上的另一个页面，或者可能完全移动到另一个网站。 就像复制和粘贴块标记一样简单。 有多种方法可以实现这一点。
如果图案设计包含在“容器”块中，例如 Group、Cover 或 Columns 块，请选择最外面的容器并使用工具菜单选择“复制”。 块标记被复制到剪贴板，你可以粘贴到任何你喜欢的地方。
第二个选项是使用代码编辑器，您可以从选项面板访问它。
代码编辑器提供当前页面或帖子上所有块标记的可视化表示。 我更喜欢这种方法，因为它很容易准确地看到正在复制的代码。
注册模式
复制和粘贴块标记可能很容易，但我们通常想要更永久的图案设计版本。 为此，我们将使用 Patterns API 来“注册”自定义块模式。 这使得我们的设计在 WordPress 的插入器和模式资源管理器中都可用。
要注册一个模式，我们使用 PHP 函数 register_block_pattern()。 这个函数接受两个参数，一个标题和一个属性数组。 在逐个介绍之前，让我们看一个例子。
注册块模式（
'示例/功能网格灯'，
大批（
'title' => __('Feature Grid - Light', 'textdomain' ),
'description' => __('在浅色背景的网格中展示六个特色项目。', 'textdomain' ),
'categories' => array('featured', 'columns'),
'关键字' => 数组（'特征'，'网格'），
'viewportWidth' => 1400,
'blockTypes' => 数组（'core/columns' ），
'内容' => '模式内容'
)
);
在这里，我们正在注册我们之前设计的 Feature Grid 模式。 标题遵循命名空间/标题命名约定。 在同一个项目中注册多个模式时，最佳做法是保持命名空间一致。
只有属性数组中的标题和内容参数在技术上是必需的。 为简洁起见，上述示例中排除了模式内容。 但是，这与我们在上一节中复制和粘贴的代码相同。 类别是使用类别字段设置的，一个模式可以有多个。 在编辑器中，模式是按类别组织的。 对于其余属性，块编辑器手册中提供了出色的细分。
要使用深色背景注册特征网格图案，只需复制注册码并相应更新即可。 最后，我们像这样包装这两个函数，并将所有内容放在我们主题的 functions.php 文件中。
功能 my_pattern_library_register_block_patterns() {
注册块模式（
'示例/功能网格灯'，
大批（ … ）
);
注册块模式（
'示例/功能网格暗，
大批（ … ）
);
}
add_action('init', 'example_register_block_patterns');
完整代码可在 GitHub 上的 Gist 中找到。
添加代码后，我们新注册的模式现在将显示在插入器和模式资源管理器中。
注册模式类别
使用自定义模式时，将它们放在自定义类别中通常很有帮助。 WordPress 使用 register_block_pattern_category() 使其变得简单。 这个函数类似于我们用来注册模式的函数。 您需要做的就是提供一个类别标题和一组属性。 从 WordPress 5.9 开始，标签是唯一受支持的属性，但我们期待未来更多。
以下示例使用标题自定义注册“自定义”类别。 将此代码与模式注册示例一起放在主题的 functions.php 文件中。
函数 example_register_block_pattern_categories() {
register_block_pattern_category(
'风俗'，
数组（“标签”=> __（“自定义”，“文本域”））
);
}
add_action('init', 'example_register_block_pattern_categories');
模式类别只有在具有与之关联的模式时才会显示在编辑器中。 因此，如果我们在之前注册的两个特征网格模式中添加自定义，“自定义”类别将如下所示：
创建模式库插件
在前面的部分中，我们通过将代码放在主题的 functions.php 文件中来注册模式和模式类别。 虽然这有效，但从长远来看并不理想。 假设我们需要更新我们的主题？ 也许我们想在另一个网站上使用这些模式？
WordPress 尚未为自定义模式管理提供原生解决方案，因此我们必须寻找替代解决方案。 此外，具有更便携格式的模式通常是可取的。
我发现最好的方法是创建一个简单的 WordPress 插件来存储我的自定义模式集合。 插件提供最大的多功能性并且与主题无关。 我将在以下步骤中向您展示如何创建您自己的模式库插件。
快速提示：如果您想跳过以下步骤，我准备了一个完整的“我的模式库”插件，它应该为您自己的库提供一个很好的起点。 该代码在 GitHub 上作为 Gist 提供。
第 1 步：获取设置
在开始构建插件之前，您需要一个工作版本的 WordPress 和一个不同种类的文本编辑器。 我强烈推荐 Local 用于创建本地 WordPress 安装，并且多年来一直专门使用它。 我使用 Atom 进行文本编辑，但有很多不错的选择。 即使是操作系统附带的基本文本编辑器也可以。
使用 Local 或类似应用程序设置本地 WordPress 站点。 确保 WordPress 已更新至 5.9 或更高版本。 模式适用于 5.5+，但最好尽可能使用最新版本的 WordPress。
第 2 步：创建插件
您需要做的下一件事是创建插件的“基础”。 如果您是插件开发的新手，请不要害怕。 这听起来比实际更令人生畏。
导航到本地 WordPress 安装中的wp-content → plugins目录并创建一个名为 my-pattern-library 的新目录。 您可以为该目录命名任何您喜欢的名称。 只需在所有后续步骤中将“my-pattern-library”替换为您的自定义名称即可。
在新的wp-content → plugins → my-pattern-library目录中，创建一个名为 my-pattern-library.php 的 PHP 文件。 在文本编辑器中打开文件并将以下插件标题注释添加到文件顶部。 不要忘记前导 <?php. 请注意，我简化了本教程的标题。
<?php
/**
* 插件名称：我的模式库
* 描述：一个简单的块模式库。
* 版本：0.1.0
* 至少需要：5.8
* 需要 PHP：7.0
* 作者：你的名字
* 许可证：GPL v2 或更高版本
* 文本域：my-pattern-library
*/
随意更改您认为合适的标题信息。 然后保存文件。 您现在拥有一个功能齐全的 WordPress 插件。 确认它在管理插件页面上可见，然后单击“激活”。 它应该看起来像这样。
虽然您现在有一个正常工作的插件，但它实际上并没有做任何事情。 让我们改变它。
第 3 步：注册模式和类别
在这最后一步中，您需要做的就是将本文前面的模式和模式类别注册代码复制到新插件中。 我们之前将此代码放在主题的functions.php 文件中。 现在，只需将其粘贴到 my-pattern-library.php 文件中的标题注释下方。
保存文件，然后导航到 WordPress 中的编辑器。 打开插入器，单击模式选项卡并选择自定义类别。 您应该看到插件注册的两种模式。
您的模式库现在可以运行了！ 当需要新的自定义模式或类别时，只需将它们添加到插件中即可。 GitHub 上的 Gist 提供了完整的代码示例。
在我们结束之前，重要的是要提到这个例子是供个人使用的。 如果要公开分发插件，您可能希望包含更多功能。 本地化浮现在脑海中。 也就是说，本教程演示了创建一个存储自定义块模式的简单插件是多么容易。
包起来
在本文中，您学习了如何设计、共享和注册块模式。 您甚至已经学会了如何构建一个简单的 WordPress 插件来容纳您自己的模式库。 我坚信块模式是现代主题开发不可或缺的一部分，我很高兴看到未来会发生什么。 如果您还没有开始探索模式，我希望本文能鼓励您这样做。 学习 WordPress 是额外学习的绝佳资源，如果您有任何问题，请在评论中告诉我。