块状模式，也经常被称为部分，在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 文件夹注册模式和创建模式的页面。
作为背景，让我们首先简要地回顾一下模式注册的工作流程是如何从使用注册模式API发展到无需注册直接加载的。
用例1：Twenty Twenty-One
include 默认的 Twenty Twenty-One主题（TT1）和TT1 Blocks主题（TT1的兄弟姐妹）展示了如何在主题的functions.php 。在TT1 Blocks实验性主题中，这个单一的block-pattern.php文件包含了八个block模式，被添加到functions.php ，如图所示。
一个自定义的块模式需要使用register_block_pattern 函数来注册，该函数接收两个参数--title （模式的名称）和properties （一个描述模式属性的数组）。
下面是一个注册简单的 "Hello World "段落模式的例子，来自Theme Shaper这篇文章。
register_block_pattern(
'my-plugin/hello-world',
array(
'title' => __( 'Hello World', 'my-plugin' ),
'content' => "<!-- wp:paragraph -->\n<p>Hello World</p>\n<!-- /wp:paragraph -->",
)
);
注册后，register_block_pattern() 函数应从附加到init 钩子的处理程序中调用，如这里所述。
function my_plugin_register_my_patterns() {
register_block_pattern( ... );
}
add_action( 'init', 'my_plugin_register_my_patterns' );
一旦块状图案被注册，它们在块状编辑器中是可见的。更详细的文档可以在这篇Block Pattern Registration中找到。
区块模式属性
除了必需的title 和content 属性外，块编辑器手册还列出了以下可选的模式属性。
title(必需)。一个人类可读的模式标题。content(必填)。该模式的块状HTML标记。description(可选)。一个视觉上隐藏的文本，用于描述插入器中的模式。描述是可选的，但当标题不能完全描述该模式的作用时，强烈鼓励使用描述。描述将帮助用户在搜索时发现该模式。categories(可选)。一个用于分组块状图案的注册图案类别阵列。块状图案可以显示在多个类别上。一个类别必须单独注册，以便在这里使用。keywords*(可选):*一组别名或关键词，帮助用户在搜索时发现该模式。viewportWidth(可选)。一个整数，指定图案的预期宽度，以便在插入器中按比例预览该图案。blockTypes(可选)。块类型的数组，该模式打算与之一起使用。每个值都必须是声明的块的 。nameinserter(可选)。默认情况下，所有模式都会出现在插入器中。要隐藏一个模式，使其只能以编程方式插入，请将 设置为 。inserterfalse
下面是一个从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' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
)
);
在模板文件中使用模式
一旦模式被创建，它们就可以在主题模板文件中使用，并使用以下块状标记。
<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->
tt2gopher来自GitHub仓库的一个例子显示，在TT2 Gopher区块主题中使用了带有 "footer-with-background"前缀的模式lug。
块主题和Gutenberg插件的早期采用者也利用了经典主题中的模式。默认的TwentyTwenty和我最喜欢的Eksell主题（这里有一个演示网站）是很好的例子，展示了如何将模式功能添加到经典主题中。
用例2：Twenty Twenty-Two
如果一个主题只包括几个图案，那么开发和维护就相当容易管理。然而，如果一个块状主题包括许多图案，就像TT2主题那样，那么pattern.php 文件就会变得非常大，而且难以阅读。默认的TT2主题，捆绑了60多个模式，展示了一个重构的模式注册工作流程结构，更容易阅读和维护。
以TT2主题为例，让我们简单讨论一下这个简化的工作流程是如何工作的。
2.1:注册模式类别
为了演示，我创建了一个TT2子主题，并在我的本地测试站点上设置了一些假的内容。按照TT2，我注册了footer-with-background ，并在其block-patterns.php 文件中加入了以下模式类别数组列表。
/**
* 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() 函数调用，该函数requires一个patterns 目录文件，其中列出的模式名称在数组中，我们将在下一步添加。
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' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">' .
sprintf(
/* Translators: WordPress link. */
esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
'<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.'
) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->',
);
让我们在footer.html 模板部分引用该模式。
<!-- wp:template-part {"slug":"footer"} /-->
这类似于在模板文件中添加标题或页脚部分。
模式也可以类似地添加到parts/footer.html 模板中，通过修改它来引用主题模式文件的slug (footer-with-background)。
<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->
现在，如果我们访问块编辑器的模式插入器，Footer with background 应该可以供我们使用。
下面的截图显示了在前端新创建的带背景图案的页脚。
现在，图案已经成为块状主题不可分割的一部分，许多图案被捆绑在块状主题中--像Quadrat、Seedlet、Mayland、Zoologist、Geologist--遵循上面讨论的工作流程。下面是一个Quadrat主题的例子 [/inc/patterns](https://github.com/Automattic/themes/tree/trunk/quadrat/inc)文件夹里有一个块状图案的注册文件，以及带有内容源和所需图案头的文件列表，在return array() 功能中。
第2节：创建和加载模式，无需注册
请注意，这个功能需要在你的网站中安装WordPress 6.0或Gutenberg插件13.0或以上。
这个新的WordPress 6.0功能允许通过标准文件和文件夹注册模式--/patterns ，带来类似于/parts 、/templates 、/styles 的约定。
这个过程，在WP Tavern这篇文章中也有描述，包括以下三个步骤。
- 在主题的根部创建一个模式文件夹
- 添加插件风格的图案标题
- 图案源内容
一个典型的模式头标记，取自该文章，如下所示。
<?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
*/
?>
如上节所述，只有Title 和Slug 字段是必须的，其他字段是可选的。
参考最近发布的主题的例子，我在这个TT2 Gopher Blocks演示主题中重构了模式注册，这是为CSS-Tricks上的一篇文章准备的。
在下面的步骤中，让我们探讨如何重构一个用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
*/
?>
<!-- some-block-content /-->
一个模式文件有一个顶部的标题字段，写成PHP注释。后面是以HTML格式编写的块状内容。
2.3:在文件中添加模式内容
对于内容部分，让我们把单引号内的代码片段（例如：'...' ）从footer-with-background 的内容部分复制过来，并替换为<!-- some-block-content /--> 。
<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
patterns/footer-with-background.php 文件的整个代码片段可以在GitHub上查看。
请注意，/inc/patterns 和block-patterns.php 是额外的，在WordPress 6.0中不需要，而且只为演示目的而包括。
2.4:在模板中引用模式lug
将上述重构的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插件。
没有图案注册的主题的例子
早期采用者已经开始在他们的块状主题中使用这一功能。下面列举了一些主题的例子，这些主题可以从主题目录中获得，它们无需注册就可以加载图案。
第3节：用低代码创建和使用图案
官方图案目录包含了社区贡献的创意设计，可以根据需要进行复制和定制，以创建内容。使用块状编辑器的模式从来没有如此简单!
从不断增长的目录中的任何图案也可以被添加到块状主题中，只需简单地 "复制和粘贴"，或通过参考其目录中的图案lug而包含在theme.json 文件中。接下来，我将简要介绍一下如何通过非常有限的编码轻松实现这一目的。
从模式目录中添加和定制模式
3.1:从目录中复制图案到一个页面
在这里，我使用的是FirstWebGeek公司的这个来自patterns目录的页脚部分模式。通过选择 "复制模式 "按钮复制了这个模式，并直接将其粘贴到一个新的页面中。
3.2:进行所需的定制s
我只对字体的颜色和按钮的背景做了一些改动。然后把整个代码从代码编辑器中复制到剪贴板上。
如果你不熟悉使用代码编辑器，请进入选项（有三个点，右上方），点击代码编辑器按钮，然后从这里复制整个代码。
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
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" 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>
<!-- /wp:paragraph -->
<!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
<!-- wp:social-link {"url":"#","service":"twitter"} /-->
<!-- wp:social-link {"url":"#","service":"instagram"} /-->
<!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph -->
<!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
3.4:在插入器中查看新的模式
要查看新添加的Footer pattern from patterns library 模式，去任何一个帖子或页面，选择插入器图标（蓝色加号，左上方），然后选择 "TT2 Gopher - Footer "类别。新添加的图案会显示在左边的面板上，同时还有其他的页脚图案，其预览在右边（如果选择的话）。
直接在theme.json 文件中注册模式
在WordPress 6.0中，可以用下面的语法从模式目录中注册任何需要的模式，theme.json 文件。6.0的开发说明指出，"模式字段是一个来自模式目录的*[模式塞子*]的数组。模式蛞蝓可以在模式目录的单一模式视图中通过[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" ]
}
在这个例子中，前面例子中的模式lugfooter-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' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
<p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p>
<!-- /wp:paragraph -->',
)
);
这个功能目前只限于页面帖子类型，还不能用于 "帖子帖子类型"。
也可以通过删除所有模式的帖子内容块类型来完全禁用页面创建模式模态。这里有一个示例代码。
你可以从下面资源部分列出的链接中关注并参与GitHub的讨论。
使用模式目录来构建页面
目录中的模式也可以用来创建所需的帖子或页面布局，类似于页面构建器。GutenbergHub团队已经创建了一个实验性的在线页面生成器应用，直接使用目录中的模式（介绍性视频）。然后，可以将应用中的代码复制并粘贴到网站中，这大大简化了构建复杂页面布局的过程，而无需编码。
在这个简短的视频中，Jamie Marsland演示了（在1:30）如何使用目录中的所需页面部分来创建一个类似于page builder的整个页面布局。
收尾工作
模式允许用户在任何页面中重新创建他们常用的内容布局（如英雄页面、呼出等），并降低了以风格呈现内容的障碍，这在以前没有编码技能是不可能的。就像插件和主题目录一样，新的模式目录为用户提供了选择，可以使用模式目录中自己选择的各种模式，并以风格编写和显示内容。
的确，块状图案将改变一切，肯定这是WordPress主题景观中的一个改变游戏规则的功能。当用模式努力构建的全部潜力变得可用时，这将改变我们设计块状主题的方式，甚至用低代码知识创造出美丽的内容。对于许多有创造力的设计师来说，模式目录也可以提供一个适当的渠道来展示他们的创造力。
