模式最有用功能之一是能够将其直接绑定到一个或多个块类型。例如,您可以将图库模式分配给图库 (core/gallery) 块类型,并在每次插入新的图库时使用该特定模式。
但该提供的功能甚至更多。在本文中,您将学习如何添加块类型和模式之间的基本连接,并利用 WordPress 中的一些特殊情况。
除了下面描述的技术外,创建起始页面模式还需要块类型模式,您可以在 起始模式 文档中了解更多相关信息。
特定块的图案
重要的是要注意,与块类型连接的模式的行为与其他模式一样。您所做的只是让 WordPress 知道该模式是用于一个或多个块类型的。
在许多情况下,您可能只想创建一个作为插入特定块时的起点模式,这就是块类型模式通常有用的地方。
注册块类型图案
正如在 注册模式 中所述,您必须在模式文件中的 Block Types 标题字段分配一个值。该字段可以接受一个或多个逗号分隔的块类型,必须包括块的命名空间和斜杠(例如,namespace/slug)。
以下是与封面块绑定的模式的文件标题可能看起来:
<?php
/**
* Title: Cover With Contrast Background
* Slug: themeslug/cover-contrast
* Categories: banner
* Block Types: core/cover
* Viewport Width: 1376
*/
?>构建块类型图案
让我们利用到目前为止所学到的知识,为特定块创建一个模式。在本示例中,您将使用 contrast 颜色预设 创建一个简单的封面块,其中包含一个嵌套的标题和一个背景。
在主题的 /patterns 文件夹中创建一个名为 cover-contrast.php 的新文件,并将此代码粘贴到其中:
<?php
/**
* Title: Cover With Contrast Background
* Slug: themeslug/cover-contrast
* Categories: banner
* Block Types: core/cover
* Viewport Width: 1376
*/
?>
<!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull has-base-color has-text-color has-link-color">
<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:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'A simple heading', 'themeslug' ); ?></h2>
<!-- /wp:heading -->
</div>
</div>
<!-- /wp:cover -->保存模式文件后,它应该像往常一样出现在插入器和模式库中。但最重要的是检查它是否作为块类型模式正常工作。
在 WordPress 管理后台打开一个新的帖子或页面并插入一个封面块,但不要对其进行任何更改。然后,单击工具栏中的封面块图标。您应该会看到一个 模式 菜单项,如果点击该菜单项,您的新模式将显示:

从那里,如果您选择已注册的模式,它将转换内容区域中插入的封面块:

这就是块类型模式的工作原理的基础。但是 WordPress 对某些块有一些特殊处理,您将在下面了解。
查询循环图案
查询循环块是创建自定义模式的最独特和最有用的块之一。它为您提供和主题用户快速插入或替换现有查询块的替代帖子布局的能力。
该技术与其他块类型模式相同。您必须将 core/query 块类型添加到模式的 Block Types 文件标题字段中。
让我们创建一个基本的两列网格,显示每个帖子的缩略图、标题、摘要和日期。当然,您可以使用任何布局和设计的布局。
现在,在主题的 /patterns 文件夹中创建一个名为 query-two-columns.php 的新文件,并将此代码粘贴到其中:
<?php
/**
* Title: Query: Two Columns
* Slug: themeslug/query-two-columns
* Categories: posts
* Block Types: core/query
* Viewport Width: 1376
*/
?>
<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"align":"wide"} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"grid","columnCount":2}} -->
<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"4/3","align":"wide"} /-->
<!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":26} /-->
<!-- wp:post-date /-->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->有两种方法可以利用查询循环模式,例如您刚刚创建的模式。第一种是将新的查询循环块插入到页面或模板中:

您应该看到几个按钮用于从此点添加查询循环。点击 选择 按钮。
这将打开 选择一个模式 模态框。在此模态框中,您的模式将显示并可被选择:

选择后,您的模式将插入到您正在编辑的页面或模板的画布中:

使用查询循环模式的第二种方法几乎相同。您可以通过单击工具栏中的 替换 按钮来替换现有模式(即使是您刚刚插入的模式)。它将打开相同的 选择一个模式 模态框,选择模式的过程是相同的。
模板部分图案
由于 模板部分 在技术上本身就是块,因此您也可以将它们用作模式的块类型。有一个限制:仅支持使用标题和页脚 模板部分区域 的部分。但这些是最常见的类型。
当针对特定模板部分时,其块类型名称将具有第三个组件:模板部分区域。因此,如果您要针对标题部分,您将传递一个 core/template-part/header 块类型。对于页脚部分,使用 core/template-part/footer。
让我们创建一个基本的标题模板部分,其中包含居中的徽标、标题和导航菜单。您将使用它来替换站点的现有标题。
在主题的 /patterns 文件夹中创建一个名为 header-centered.php 的新文件。然后复制并粘贴此代码到其中:
<?php
/**
* Title: Header: Centered
* Slug: themeslug/header-centered
* Categories: header
* Block Types: core/template-part/header
* Viewport Width: 1376
*/
?>
<!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignwide">
<!-- wp:site-logo {"width":60} /-->
<!-- wp:site-title {"level":0} /-->
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->
</div>
<!-- /wp:group -->保存此文件后,在 WordPress 管理后台转到 外观 > 编辑器 并选择标题块。
现在单击工具栏中的 选项 按钮 (⋮ 图标)。您应该在下拉菜单中看到一个 替换 选项:

单击 替换 下拉菜单项后,将出现一个名为 选择一个标题 的新模态框,您应该在可用模式网格中看到您的 标题:居中 模式:

通过选择此模式或其他模式,您可以替换整个标题模板部分。此过程对页脚模板部分也适用。