模式简介

块模式(简称“模式”)是主题作者可以使用的最强大的功能之一。WordPress 5.4中引入的模式让用户更容易从块编辑器中插入更复杂的布局,同时为设计者打开了一个充满可能性的世界。

本文提供了什么是模式及其工作方式的总体定义。这将作为您阅读本章其他文章的基础。

什么是模式?

从本质上讲,模式只不过是一个或多个预先配置并呈现给最终用户的块。将它们视为可重用的块组。

就这样。真正地。模式只是一组块。

它们非常适合作为用户插入其帖子和页面内容的起点,但在模板内部使用时也很有用。

用户可以从站点编辑器将其直接插入到模板中,或从Post Editor将其插入到其内容中:

打开模式插入器面板的WordPress编辑器。页面子面板打开并显示页面模式列表。

与模板部件(这是可重用块组的类似功能)相比,当您将它们绑定到主题中时,模式还允许您访问PHP。这意味着您可以国际化其中的文本,动态添加URL以包含图像等。在本章中,您将了解更多关于这些事情的信息。

请注意,用户可以从外观>编辑器>图案在admin中显示。您还可以使用此屏幕在开发安装中管理自己的模式:

WordPress站点编辑器中的模式库,显示所有可用模式的4列网格。

如果您正在构建经典主题,则此屏幕不可用。但是,从WordPress 6.5开始,您可以通过外观>图案屏幕。

图案类型

基本上,有两种类型的模式:

  • 已同步:无论在网站上使用多少次或在何处使用,模式都保持不变。这些以前在旧版本的WordPress中称为“可重用块”。注意:这些只能通过WordPress管理员创建和管理。
  • 未同步:当通过块编辑器插入时,将创建图案块的新实例的图案。对插入的块所做的任何更改都不会影响阵列的其他用途。未来对模式的更改也不会影响以前的使用。

根据模式系统工作的性质,主题注册的所有模式都是未同步类型。有一个用于同步主题注册模式的开放票据,但目前不可能。

在WordPress管理员中管理模式

即使在构建主题时,您通常也会直接从管理员那里构建模式,然后从主题本身中绑定和注册它们。这也是一种在本地存储和管理模式的好方法,直到您满意它们已准备好包含在主题中。

了解用户如何与模式交互也是一种很好的实践。

您可以通过访问外观>编辑器在WordPress管理员的屏幕上单击模式工具条中的项。

创建自定义图案

模式屏幕上,必须单击创建图案按钮(+图标),您可以选择创建多个选项:

  • 创建图案
  • 创建模板部件
  • 从JSON导入模式

选择创建图案选项,它将触发如下所示的覆盖模式:

WordPress模式库,“创建模式”模式覆盖屏幕。它有名称、类别和同步字段。

您需要填写三个字段:

  • 姓名:确定要创建的图案的名称。
  • 类别:添加一个或多个适合您的图案的类别。
  • 已同步:决定是否应该同步您的模式。如果您计划将其与主题一起发布,则应关闭此选项,以便其行为与来自主题的行为相同。

单击后创建按钮,它将带您进入模式编辑器。从那里,它就像WordPress中的其他编辑器一样工作。在图案中添加想要的块,并调整其设置和样式以满足您的需要。

以下是一个基本的“欢迎英雄”模式示例:

WordPress模式编辑器,在内容区显示一个基本的封面块,背景为黑色,演示文本为白色。

只要确保点击保存按钮。从那里,你可以像在网站上使用任何其他模式一样使用你的模式。

您还可以通过模式>我的模式侧栏中的部分:

选中“我的模式”子面板的WordPress模式库。它显示了用户创建的单个模式。

这个我的模式部分始终是任何用户创建的模式将出现在WordPress管理员中的位置。它们也将出现在所有图案部分和分配给他们的任何其他类别。

将图案复制到主题

编辑器界面是一种创建模式的好方法。但这是主题手册,所以您可能想知道如何将您创建的模式与主题捆绑在一起。

为此,您需要复制模式代码本身。您将在中学习如何处理模式代码注册模式本章中的文章。

复制模式代码有几种不同的方法。但最简单的方法是单击选项按钮(图标),然后选择复制所有块下拉菜单中的选项:

WordPress模式编辑器,带有一个简单的Cover块模式,内容区显示黑色背景和白色文本。编辑器选项下拉菜单显示,“复制所有块”菜单项高亮显示。

对于屏幕截图中显示的特定模式,它将为您提供以下块标记:

<!--wp:cover{“overlayColor”:“对比度”,“对齐”:“完整”}--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-has-contrast-background-color has-backgroud-dim-100 has-background-dim”></span><div class=“wp-block-cover__inner-container”><!--wp:group{“style”:{“space”:}“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:标题--><!--wp:段落{“align”:“center”}--><p class=“has-text-align-center”>这是我远离家乡的小家。在这里,你会了解我的。我会分享我的喜好、爱好等等。有时,我甚至会在博客上发表一些有趣的文章</p>(第页)<!-- /wp:段落--><!--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> </div><!-- /wp:按钮--></div><!-- /wp:按钮--><!-- /wp:组--><!-- /wp:封面-->

注册模式文档中,您将学习如何使用块标记,并将其绑定为主题的模式。

管理主题绑定模式

目前,主题作者没有标准来管理他们的模式或直接将其移植到他们的主题,而无需经历上述过程。

目前,您完全可以决定如何将模式管理集成到您的工作流中。需要考虑的一些事项:

  • 您需要手动将模式的块标记从管理UI复制并粘贴到主题中。
  • 如果需要对模式的块标记进行更改,则无法使主题中的模式与在管理员中构建的版本保持同步。

这些无疑是您在决定使用最佳方法时会遇到的挑战。有一个公开讨论对于探索模式管理的官方Create Block Theme插件,这是与其他主题作者讨论最佳前进道路的最佳位置。