如何在WordPress 6.0中创建块主题模式

WordPress 5.5 引入了区块模式（也常被称为“区块”），允许用户创建和共享预定义的区块布局。这些布局存储在模式目录中，包含由 WordPress 社区设计的各种模式。这些模式采用简单的复制粘贴格式，无需任何编码知识，极大地节省了用户时间。

虽然已有大量关于模式的文章，但缺乏涵盖最新增强功能的全面且最新的模式创建文章。本文旨在填补这一空白，重点介绍最近的增强功能，例如无需注册即可创建模式，并为新手和经验丰富的作者提供最新的创建和使用模式的分步指南，尤其是在区块主题中。

自 WordPress 5.9 和 Twenty Twenty-Two (TT2) 默认主题发布以来，区块主题中区块模式的使用激增。我一直是区块模式的忠实粉丝，并在我的区块主题中创建和使用了它们。

WordPress 6.0 为作者提供了三个主要的模式功能增强：

• 允许通过 /patterns 文件夹注册模式（类似于 /parts、/templates 和 /styles 注册）。
• 使用 theme.json 从公共模式目录注册模式。
• 添加可在创建新页面时提供给用户的模式。

在介绍性视频“探索 WordPress 6.0”中，Automattic 产品联络员 Ann McCathy 强调了一些新增强的模式功能（从 15:00 开始），并讨论了未来的模式增强计划——包括模式作为分节元素、提供在页面创建时选择模式的选项、集成模式目录搜索等等。

先决条件

本文假设读者具备 WordPress 全站编辑 (FSE) 界面和区块主题的基本知识。区块编辑手册和全站编辑网站提供了最新的教程指南，用于学习所有 FSE 功能，包括本文中讨论的区块主题和模式。

第 1 节：创建区块模式的演变方法

最初创建区块模式的方法需要使用区块模式 API，可以作为自定义插件，也可以直接在 functions.php 文件中注册以与区块主题捆绑在一起。新发布的 WordPress 6.0 引入了几种与模式和主题一起使用的新增和增强功能，包括通过 /patterns 文件夹注册模式和页面创建模式模态。

作为背景，让我们首先简要概述模式注册工作流程如何从使用 register 模式 API 演变为直接加载而无需注册。

使用案例示例 1：Twenty Twenty-One

默认的 Twenty Twenty-One 主题 (TT1) 和 TT1 Blocks 主题（TT1 的姊妹主题）展示了如何在主题的 functions.php 中注册区块模式。在 TT1 Blocks 实验主题中，包含 八个 区块模式的单个 block-pattern.php 文件作为包含文件添加到 functions.php 中，如下所示。

需要使用 register_block_pattern 函数注册自定义区块模式，该函数接收两个参数——标题（模式的名称）和属性（描述模式属性的数组）。

以下是根据 Theme Shaper 文章注册简单的“Hello World”段落模式的示例：

register_block_pattern(
    'my-plugin/hello-world',
    array(
        'title'   => __( 'Hello World', 'my-plugin' ),
        'content' => "\n<p>Hello World</p>\n",
    )
);

注册后，应从附加到 init 挂钩的处理程序调用 register_block_pattern() 函数，如下所述。

function my_plugin_register_my_patterns() {
    register_block_pattern( ... );
}

add_action( 'init', 'my_plugin_register_my_patterns' );

注册区块模式后，它们会在区块编辑器中可见。更详细的文档可在区块模式注册中找到。

区块模式属性

除了必需的标题和内容属性外，区块编辑器手册还列出了以下可选模式属性：

• title (必需)：模式的人类可读标题。
• content (必需)：模式的区块 HTML 标记。
• description (可选)：用于在插入器中描述模式的可视隐藏文本。描述是可选的，但强烈建议在标题未完全描述模式的功能时使用。描述将帮助用户在搜索时发现模式。
• categories (可选)：用于对区块模式进行分组的已注册模式类别的数组。区块模式可以显示在多个类别中。必须单独注册类别才能在此处使用。
• keywords (可选)：帮助用户在搜索时发现模式的别名或关键字数组。
• viewportWidth (可选)：指定模式预期宽度的整数，以便在插入器中按比例预览模式。
• blockTypes (可选)：模式预期使用的区块类型的数组。每个值都需要是已声明区块的名称。
• inserter (可选)：默认情况下，所有模式都会出现在插入器中。要隐藏模式以便只能通过编程方式插入，请将 inserter 设置为 false。

以下是从 WordPress 博客中获取的引用模式插件代码片段示例。

/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
    'my-plugin/my-quote-pattern',
     array(
      'title'       => __( 'Quote with Avatar', 'my-plugin' ),
      'categories'  => array( 'text' ),
      'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
      'content'     => '<div><div>
<hr>
<div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></div>
<blockquote>
<p>"Contributing makes me feel like I\'m being useful to the planet."</p>
<cite>— Anna Wong, <em>Volunteer</em></cite>
</blockquote>
<hr>
</div></div>',
      )
);

在模板文件中使用模式

创建模式后，可以使用以下区块标记在主题模板文件中使用它们：

来自此 GitHub 存储库的示例显示了在 TT2 Gopher 区块主题中使用带有“tt2gopher”前缀的“footer-with-background”模式 slug。

区块主题和 Gutenberg 插件的早期采用者也利用了经典主题中的模式。默认的 Twenty Twenty 和我最喜欢的 Eksell 主题（此处为演示站点）是展示如何将模式功能添加到经典主题的良好示例。

使用案例示例 2：Twenty Twenty-Two

如果主题只包含少量模式，则开发和维护相当容易管理。但是，如果区块主题包含许多模式，例如 TT2 主题，则 pattern.php 文件会变得非常大且难以阅读。默认的 TT2 主题捆绑了 60 多个模式，展示了重构的模式注册工作流程结构，该结构更易于阅读和维护。

以 TT2 主题为例，让我们简要讨论此简化工作流程的工作原理。

2.1：注册模式类别

出于演示目的，我创建了一个 TT2 子主题，并使用一些虚拟内容在我的本地测试站点上设置了它。按照 TT2 的方法，我在其 block-patterns.php 文件中注册了 footer-with-background 并添加到以下模式类别数组列表中。

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() {
    $block_pattern_categories = array(
        'footer'   => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ),
        'header'   => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ),
        'pages'    => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ),
                // ...
    );

    /**
     * Filters the theme block pattern categories.
     */
    $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories );

    foreach ( $block_pattern_categories as $name => $properties ) {
        if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
            register_block_pattern_category( $name, $properties );
        }
    }

    $block_patterns = array(
        'footer-default',
        'footer-dark',
        'footer-with-background',
        //...
        'header-default',
        'header-large-dark',
        'header-small-dark',
        'hidden-404',
        'hidden-bird',
        //...
    );

    /**
     * Filters the theme block patterns.
     */
    $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns );

    foreach ( $block_patterns as $block_pattern ) {
        $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' );

        register_block_pattern(
            'twentytwentytwo/' . $block_pattern,
            require $pattern_file
        );
    }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

在此代码示例中，$block_patterns = array() 中列出的每个模式都由 foreach() 函数调用，该函数需要一个模式目录文件，其中包含数组中列出的模式名称，我们将在下一步中添加该文件。

2.2：向 /inc/patterns 文件夹添加模式文件

接下来，我们应该在 $block_patterns = array() 中拥有所有列出的模式文件。以下是一个模式文件 footer-with-background.php 的示例：

/**
 * Dark footer wtih title and citation
 */
return array(
    'title'      => __( 'Footer with background', 'twentytwentytwo' ),
    'categories' => array( 'footer' ),
    'blockTypes' => array( 'core/template-part/footer' ),
  'content'    => '
      <div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
      <p>' .
      sprintf(
        /* Translators: WordPress link. */
        esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
        '<a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> | a modified TT2 theme.'
      ) . '</p>
      </div>
          ',
);

让我们在 footer.html 模板部件中引用该模式：

这类似于在模板文件中添加标题或页脚部件。

可以通过修改它以引用主题模式文件（footer-with-background）的 slug 来类似地将模式添加到 parts/footer.html 模板中：

现在，如果我们访问区块编辑器的模式插入器，则可以使用“Footer with background”。

以下屏幕截图显示前端新创建的带有背景的页脚模式。

现在模式已成为区块主题的组成部分，许多模式都捆绑在区块主题中——例如 Quadrat、Seedlet、Mayland、Zoologist、Geologist——遵循上述工作流程。这是一个 Quadrat 主题 /inc/patterns 文件夹的示例，其中包含一个区块模式注册文件和一系列文件，其中包含内容源和 return array() 函数中所需的模式标题。

第 2 节：创建和加载模式而无需注册

请注意，此功能需要在您的站点中安装 WordPress 6.0 或 Gutenberg 插件 13.0 或更高版本。

此新的 WordPress 6.0 功能允许通过标准文件和文件夹（/patterns）注册模式，带来了类似于 /parts、/templates 和 /styles 的约定。

此过程，如本文所述，涉及以下三个步骤：

• 在主题的根目录下创建一个 patterns 文件夹
• 添加插件样式模式标题
• 模式源内容

从文章中获取的典型模式标题标记如下所示：

<?php /**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
??>

如上一节所述，只有标题和 Slug 字段是必需的，其他字段是可选的。

参考最近发布的主题中的示例，我在之前的关于 CSS-Tricks 的文章中准备的 TT2 Gopher Blocks 演示主题中重构了模式注册。

在以下步骤中，让我们探讨如何重构使用 PHP 注册并在 footer.html 模板中使用的 footer-with-background.php 模式。

2.1：在主题的根目录下创建一个 /patterns 文件夹

第一步是在 TT2 Gopher 主题的根目录下创建一个 /patterns 文件夹，并将 footer-with-background.php 模式文件移动到 /patterns 文件夹并重构。

2.2：将模式数据添加到文件标题

接下来，创建以下模式标题注册字段。

<?php /**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
??>

模式文件有一个作为 PHP 注释编写的顶部标题字段。后跟以 HTML 格式编写的 block-content。

2.3：将模式内容添加到文件中

对于内容部分，让我们复制单引号（例如，'...'）中的代码片段，从 footer-with-background 的内容部分开始，并替换：

<div style="padding-top:35px;padding-bottom:30px">
<p>Powered by WordPress | TT2 Gopher, a modified TT2 theme</p>
</div>

patterns/footer-with-background.php 文件的完整代码片段可以在 GitHub 上查看。

请注意，/inc/patterns 和 block-patterns.php 是 额外的，在 WordPress 6.0 中不需要，仅出于演示目的而包含。

2.4：在模板中引用模式 slug

将上述重构的 footer-with-background.php 模式添加到 footer.html 模板与上一节（第 1 节，2.2）中描述的完全相同。

现在，如果我们在区块编辑器或浏览器中站点的页脚部分查看站点，则会显示页脚部分。

模式类别和类型注册（可选）

要对区块模式进行分类，应在主题的 functions.php 文件中注册模式类别和类型。

让我们考虑一个从 TT2 Gopher 主题注册区块模式类别的示例。

注册后，模式会与核心默认模式一起显示在模式插入器中。要在模式插入器中添加主题特定的类别标签，我们应该通过添加主题命名空间来修改之前的代码片段：

/**
* Registers block categories, and type.
*/

function tt2gopher_register_block_pattern_categories() {

$block_pattern_categories = array(
  'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ),
  'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ),
  'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ),
  // ...
);

/**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories );

foreach ( $block_pattern_categories as $name => $properties ) {
  if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
    register_block_pattern_category( $name, $properties );
  }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

footer-with-background 模式在其预览中（如果已选择）与模式插入器一起显示：

此过程极大地简化了在区块主题中创建和显示区块模式的过程。它可在 WordPress 6.0 中使用，无需使用 Gutenberg 插件。

没有模式注册的主题示例

早期采用者已经开始在其区块主题中使用此功能。主题目录中提供的一些无需注册即可加载模式的主题示例如下所示：

• Archeo – 12 个模式
• Pendant – 13 个模式
• Remote – 11 个模式
• Skatepark – 10 个模式
• Stewart – 17 个模式
• Livro – 16 个模式
• Avant-Garde – 14 个模式

第 3 节：使用低代码创建和使用模式

官方模式目录包含社区贡献的创意设计，可以根据需要复制和自定义以创建内容。使用区块编辑器中的模式从未如此简单！

任何来自不断增长的目录的模式也可以通过简单的“复制和粘贴”或在 theme.json 文件中包含它们来添加到区块主题中，方法是引用其目录 模式 slug。接下来，我将简要介绍如何轻松地用非常有限的代码实现这一点。

添加和自定义来自模式目录的模式

3.1：将模式从目录复制到页面

在这里，我使用的是 FirstWebGeek 来自模式目录的页脚部分模式。通过选择“复制模式”按钮复制模式，并直接将其粘贴到新页面中。

3.2：进行所需的自定义

我只对字体和按钮背景的颜色进行了一些更改。然后将整个代码从 代码编辑器 复制到剪贴板。

如果您不熟悉使用代码编辑器，请转到选项（带有三个点，右上角），单击代码编辑器按钮，然后从此处复制整个代码。

3.3：在 /patterns 文件夹中创建一个新文件

首先，让我们创建一个新的 /patterns/footer-pattern-test.php 文件并添加所需的模式标题部分。然后粘贴整个代码（步骤 3，上面）。模式在页脚区域（第 5 行）中分类，我们可以在模式插入器中查看新添加的模式。

<?php /**
 * Title: Footer pattern from patterns library
 * Slug: tt2gopher/footer-pattern-test
 * Categories: tt2gopher-footer
 * Viewport Width: 1280
 * Block Types: core/template-part/footer
 * Inserter: yes
 */
??><div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px">
<div>
<div>
<h2 id="lorem">lorem</h2>



<p style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>



<ul></ul>
</div>



<div>
<h4 id="Contact-Us">Contact Us</h4>



<p style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br> 123-456-7890</p>



<p style="font-size:16px;line-height:1">[email protected]</p>



<p style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
</div>



<div>
<h4 id="Newsletter">Newsletter</h4>



<p style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>


</div>
</div>
</div>

3.4：在插入器中查看新模式

要查看新添加的“来自模式库的页脚模式”，请转到任何帖子或页面并选择插入器图标（左上角的蓝色加号符号），然后选择“TT2 Gopher – 页脚”类别。新添加的模式显示在左侧面板上，以及其他页脚模式及其右侧的预览（如果已选择）：

直接在 theme.json 文件中注册模式

在 WordPress 6.0 中，可以使用以下语法在 theme.json 文件中从模式目录注册任何所需的模式。6.0 开发说明指出，“patterns 字段是模式目录中 [模式 slug] 的数组。模式 slug 可以通过模式目录中单个模式视图中的 [URL] 提取。”

{
    "version": 2,
    "patterns": ["short-text", "patterns-slug"]
}

这段简短的 WordPress 6.0 功能视频演示了如何在 /patterns 文件夹中注册模式（在 3:53 处）以及如何在 theme.json 文件中注册模式目录中所需的模式（在 3:13 处）。

然后，注册的模式可在模式插入器搜索框中使用，然后可以像主题捆绑的模式库一样使用。

{
  "version": 2,
  "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

在此示例中，来自前面示例的模式 slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter 通过 theme.json 注册。

页面创建模式模型

作为“使用模式构建”计划的一部分，WordPress 6.0 为主题作者提供了一个模式模态选项，用于将页面布局模式添加到区块主题中，允许站点用户在创建页面时选择页面布局模式（例如，关于页面、联系页面、团队页面等）。以下是从开发说明中获取的一个示例：

register_block_pattern(
    'my-plugin/about-page',
    array(
        'title'      => __( 'About page', 'my-plugin' ),
        'blockTypes' => array( 'core/post-content' ),
        'content'    => '
        <p>Write you about page here, feel free to use any block</p>
        ',
    )
);

此功能目前仅限于页面帖子类型，而不适用于“帖子帖子类型”。

也可以通过删除所有模式的 post-content 区块类型来完全禁用 页面创建模式模态。此处提供了一个示例样本代码。

您可以关注并参与 GitHub 中的讨论，讨论链接列在下面的资源部分。

使用模式目录构建页面

与页面构建器类似，也可以使用目录中的模式来创建所需的帖子或页面布局。GutenbergHub 团队使用模式目录中的模式创建了一个实验性的在线页面构建器应用程序（介绍性视频）。然后可以将应用程序中的代码复制并粘贴到站点中，这极大地简化了无需编码即可构建复杂页面布局的过程。

在这个简短的视频中，Jamie Marsland 演示了（在 1:30 处）如何使用应用程序使用目录中所需的页面部分来创建类似于页面构建器的整个页面布局。

总结

模式允许用户在任何页面中重新创建他们常用的内容布局（例如，英雄页面、号召性用语等），并降低了以前没有编码技能就无法呈现样式内容的障碍。就像插件和主题目录一样，新的模式目录为用户提供了从模式目录中选择各种模式的选项，并以样式编写和显示内容。

事实上，区块模式将改变一切，这无疑是 WordPress 主题领域中具有变革意义的功能。当“使用模式构建”工作的全部潜力可用时，这将改变我们设计区块主题以及即使只有低代码知识也能创建精美内容的方式。对于许多创意设计师来说，模式目录也可能提供了一个展示其创造力的合适途径。

资源

WordPress 6.0

• WordPress 6.0 领域指南（WordPress Core）
• 探索 WordPress 6.0：样式变体、区块锁定 UI、写作改进——22 分钟视频（Anne McCarthy）
• WordPress 6.0 功能在 4 分钟内（Dave Smith）
• WordPress 6.0 中的新增功能：新的区块、样式切换、模板编辑、Webfonts API 等等（Kinsta）

创建模式

• 区块模式简介（全站编辑）
• 区块模式简介视频，14 分钟（学习 WordPress）
• 区块模式（区块编辑器手册）
• 因此您想创建区块模式？（WordPress 博客）
• 如何在 WordPress 中创建和共享低代码区块模式（GoDaddy）

模式增强（GitHub）

• 使用模式构建 #38529
• 模式作为分节元素 #39281
• 添加：在页面创建时选择模式的选项。#40034
• 用于页面创建的区块模式。#38787
• 添加：页面开始选项（模板和模式）#39147

博客文章

• Gutenberg 模式：WordPress 中页面构建的未来（Rich Tabor）
• 使用区块模式加快 WordPress 站点构建速度（GoDaddy）
• 区块模式将改变一切（WP Tavern）

以上是如何在WordPress 6.0中创建块主题模式的详细内容。更多信息请关注PHP中文网其他相关文章！