如何在 WordPress 6.0 PlatoBlockchain 数据智能中创建块主题模式。 垂直搜索。 哎。

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

时间戳记：1年2022月11日30:XNUMX AM

方块图案, 也经常被称为 部分, 被引入 WordPress的5.5 允许用户在 模式目录. 该目录是 WordPress 社区设计的各种精选模式的所在地。 这些模式以简单的复制和粘贴格式提供，不需要编码知识，因此为用户节省了大量时间。

尽管有很多关于模式的文章，但缺乏涵盖最新增强功能的模式创建的全面且最新的文章。 本文旨在填补空白，重点关注最近的增强功能，例如无需注册即可创建模式，并提供最新的分步指南，为新手和有经验的作者在块主题中创建和使用它们。

自启动 WordPress的5.9 和 二十二 (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：二十二十一

默认值 二十一主题 (TT1) 和 TT1 块主题 （TT1 的兄弟）展示了如何在主题的 functions.php. 在 TT1 Blocks 实验主题中，这首单曲 块模式.php 文件包含 八 块模式被添加到 functions.php 作为 include 如图所示.

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

这是一个注册一个简单的“Hello World”段落模式的例子 主题塑造者文章:

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' );

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

块模式属性

除了需要 title 和 content 属性， 块编辑器手册 列出以下可选 图案属性:

  • title （必填）：模式的可读标题。
  • content （必填）：阻止该模式的 HTML 标记。
  • description （可选）：用于描述插入器中的模式的视觉隐藏文本。 描述是可选的，但是当标题没有完全描述模式的作用时，强烈建议这样做。 描述将帮助用户在搜索时发现模式。
  • categories （可选）: 一组注册的模式类别，用于对块模式进行分组。 块模式可以显示在多个类别中。 类别必须单独注册才能在此处使用。
  • keywords （可选）：一组别名或关键字，可帮助用户在搜索时发现模式。
  • viewportWidth （可选）：一个整数，指定图案的预期宽度，以允许在插入器中缩放预览图案。
  • blockTypes （可选）：模式打算使用的块类型数组。 每个值都需要是声明块的 name.
  • 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' => '<!-- 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"} /-->

一个例子来自 这个GitHub仓库 显示使用“footer-with-background” 模式蛞蝓与“tt2gopher” TT2 Gopher 块主题中的前缀。

块主题和古腾堡插件的早期采用者也利用了经典主题中的模式。 默认 二十二十 和我最喜欢的 Eksell 主题（一个 演示网站 这里）是很好的例子，展示了如何将模式特征添加到经典主题中。

用例示例 2：二十二十二

如果一个主题只包含几个模式，那么开发和维护是相当易于管理的。 但是，如果一个块主题包含许多模式，例如在 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() 功能 require一个 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 应该可供我们使用：

带背景的页脚模式的屏幕截图。
如何在 WordPress 6.0 中创建块主题模式

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

页脚背景在网站上呈现时的屏幕截图。
如何在 WordPress 6.0 中创建块主题模式

现在模式已经成为块主题不可或缺的一部分，许多模式都捆绑在块主题中——比如 方, 小苗, 美林, 动物学家, 地质学家 — 遵循上述工作流程。 这是 Quadrat 主题的示例 /inc/patterns 文件夹 块模式注册 文件和 文件清单 带有内容源和所需的模式标题 中 return array() 功能.

第 2 部分：无需注册即可创建和加载模式

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

本篇 新的 WordPress 6.0 功能 允许通过标准文件和文件夹进行模式注册 - /patterns，带来类似的约定，如 /parts, /templates及 /styles.

该过程也如中所述 这个 WP 酒馆 文章，涉及以下三个步骤：

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

一个典型的模式标题标记，取自文章如下所示：

<?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 块 演示主题，准备 上一篇关于 CSS-Tricks 的文章.

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

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

第一步是创建一个 /patterns TT2 Gopher 主题根目录下的文件夹并移动 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: 引用模板中的模式 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 中创建块主题模式

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

没有模式注册的主题示例

早期采用者已经开始在他们的块主题中使用此功能。 一些主题示例，可从 主题目录，未注册的加载模式如下所示：

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

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

来自不断增长的目录的任何模式也可以通过简单的“复制和粘贴”添加到阻止主题或包含在 theme.json 文件通过引用他们的目录 模式蛞蝓. 接下来，我将简要介绍一下使用非常有限的编码可以轻松实现这一点。

从模式目录添加和自定义模式

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

在这里，我正在使用 此页脚部分模式 由 Pattern 目录中的 FirstWebGeek 提供。 通过选择“复制图案”按钮复制图案并直接将其粘贴到新页面中。

3.2：进行所需的定制s

我只对字体和按钮背景的颜色做了一些更改。 然后从 代码编辑器 到剪贴板。

屏幕截图显示修改后的模式（左面板）和代码编辑器中的相应代码（右面板）
如何在 WordPress 6.0 中创建块主题模式

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

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 - 页脚”类别。 新添加的图案显示在左侧面板上，其他页脚图案及其预览显示在右侧（如果选中）：

显示新页脚模式（左面板）及其预览（右面板）的屏幕截图。
如何在 WordPress 6.0 中创建块主题模式

直接注册模式 theme.json 文件

在 WordPress 6.0 中，可以从模式目录中注册任何所需的模式 theme.json 具有以下语法的文件。 这 6.0 开发说明状态, “patterns 字段是一个 [模式蛞蝓]来自模式目录。 模式 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" ]
}

在此示例中，模式段塞 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' => '<!-- 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 的讨论。

使用模式目录构建页面

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

In 这个短片，Jamie Marsland 演示（在 1:30）如何使用该应用程序创建一个类似于页面构建器的整个页面布局，使用目录的所需页面部分。

结束了

模式允许用户在任何页面中重新创建他们常用的内容布局（例如，主页面、标注等），并降低以样式呈现内容的障碍，这在以前没有编码技能是不可能实现的。 就像 插件 和 主题 目录，新 模式 目录为用户提供了使用他们从模式目录中选择的各种模式的选项，并以风格编写和显示内容。

事实上， 块模式将改变一切 当然这是一个 游戏转换器 WordPress主题景观中的功能。 当充分发挥潜力 有图案的建筑 努力变得可用，这将改变我们设计块主题的方式，即使使用低代码知识也能创建漂亮的内容。 对于许多创意设计师来说，patterns 目录也可以提供一个合适的途径来展示他们的 创造力.

资源

WordPress的6.0

创建模式

模式增强 (GitHub)

博客文章

如何在 WordPress 6.0 中创建块主题模式 最初发表于 CSS技巧。 你应该 获取时事通讯.

时间戳记：

更多来自 CSS技巧