区块模式(简称“模式”)是主题作者手中最强大的功能之一。自 WordPress 5.4 引入以来,模式使用户能够从区块编辑器中插入更复杂的布局变得更加容易,同时也为设计师打开了无限可能。
本文提供了关于什么是模式以及它们如何工作的总体定义。这将作为您阅读本章其他文章的基础。
什么是模式?
本质上,模式无非是一个或多个经过预配置并呈现给最终用户的区块。您可以将它们视为可重复使用的区块组。
仅此而已。真的。模式只是区块组。
它们适合作为用户插入到文章和页面内容的起点,但在模板内使用时也非常有用。
用户可以直接从站点编辑器将模式插入到模板中,或者从文章编辑器将其插入到自己的内容中:

与用于可重复使用的区块组的类似功能“模板部分”相比,当您将模式打包在主题内时,模式还为您提供了对 PHP 的访问权限。这意味着您可以在其中国际化文本,动态添加包含图像的 URL,等等。您将在本章中了解更多关于这些内容。
请注意,用户可以从管理后台的外观 > 编辑器 > 模式屏幕创建和管理自定义模式。您也可以使用此屏幕在开发安装中管理自己的模式:

如果您正在构建经典主题,则无法访问此屏幕。但是,从 WordPress 6.5 开始,您可以通过外观 > 模式屏幕访问模式。
模式类型
本质上,有两种类型的模式:
- 同步(Synced):无论模式在网站上使用多少次或在何处使用,这些模式都保持不变。这些模式以前在旧版 WordPress 中被称为“可重用区块”。注意:这些只能从 WordPress 管理后台创建和管理。
- 不同步(Not synced):通过区块编辑器插入的模式会创建模式区块的新实例。对插入的区块所做的任何更改都不会影响模式的其他使用方式。将来对模式的更改也不会影响其先前的使用方式。
由于模式系统的工作性质,主题注册的所有模式均为不同步类型。有一个关于同步主题注册模式的开放工单,但目前尚不可行。
在 WordPress 管理后台中管理模式
即使是在构建主题时,您通常也会直接从管理后台构建模式,然后再从主题本身打包和注册它们。这也是一种很好的方式来存储和管理您的本地模式,直到您对将它们包含在主题中感到满意为止。
了解用户如何与模式交互也是一种良好的做法。
您可以通过访问 WordPress 管理后台中的外观 > 编辑器屏幕并点击侧边栏中的模式项目来管理模式。
创建自定义模式
在模式屏幕上,您必须点击创建模式按钮(+ 图标),这将为您提供几个选项供选择:
- 创建模式
- 创建模板部分
- 从 JSON 导入模式
选择创建模式选项,这将触发一个看起来像这样的覆盖模态框:

您需要填写三个字段:
- 名称:为您要创建的模式决定一个名称。
- 类别:添加您的模式将适合的一个或多个类别。
- 同步:决定是否应该同步您的模式。如果您计划将此模式随主题一起发布,您应该关闭此选项,以便其行为与来自主题的行为相同。
点击创建按钮后,它将带您进入模式编辑器。从那里,它就像 WordPress 中的任何其他编辑器一样工作。添加您想要在模式中使用的区块,并调整它们的设置和样式以满足您的需求。
这是一个基本的“欢迎英雄”模式的示例:

只需确保点击保存按钮。从那里,您可以像使用站点上的任何其他模式一样使用您的模式。
您还可以通过侧边栏中的模式 > 我的模式部分查看和编辑任何您创建的自定义模式:

我的模式部分始终是任何用户创建的模式在 WordPress 管理后台中出现的位置。它们还将出现在所有模式部分以及它们被分配的任何其他类别下。
将模式复制到您的主题
编辑器界面是一种简单而轻松的方法来创建模式。但这是主题手册,所以您可能想知道如何将您创建的模式与主题打包。
为此,您需要复制模式代码本身。您将在本章的注册模式文章中了解如何处理模式代码。
有几种不同的方法来复制模式代码。但最简单的方法是点击编辑器顶部的选项按钮(⋮ 图标)并在下拉菜单中选择复制所有区块选项:

对于截图中显示的特定模式,它将为您提供此区块标记:
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">欢迎来到我的网站</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">这是我的小小家园。在这里,您将了解我。我将分享我的喜好、爱好等。每隔一段时间,我甚至会在博客文章中发表一些有趣的内容。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">查看我的热门文章 →︎</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->在注册模式文档中,您将学习如何将该区块标记打包为与主题一起使用的模式。
管理主题捆绑的模式
目前,没有标准供主题作者管理他们的模式或将它们直接移植到主题中,而无需经过上述过程。
目前,完全由您决定如何将模式管理集成到您的工作流程中。需要考虑的一些事项:
- 您需要手动从管理 UI 复制并粘贴模式的区块标记到您的主题中。
- 如果您需要更改模式的区块标记,则无法保持主题中的模式和您在管理后台构建的版本同步。
这些是您在决定使用最佳方法时肯定会遇到的挑战。有一个关于官方创建块主题插件的开放讨论将探讨模式管理,这也是与其他主题作者讨论最佳前进方向的最佳场所。