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

Avatar of Ganesh Dahal
Ganesh Dahal 于

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分！

区块模式，也常被称为区块，是在 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

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

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

以下是如何从 Theme Shaper 文章 中注册简单的“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 -->",
    )
);

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

 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 存储库 的示例显示了在 TT2 Gopher 块主题中使用带有“tt2gopher”前缀的“footer-with-background”模式片段。

区块主题和 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() 函数调用，该函数需要一个 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"} /-->

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

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

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

现在，如果我们访问块编辑器的模式插入器，带背景的页脚应该可以供我们使用。

Screenshot of the pattern for Footer with background.

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

Screenshot of the footer background as it appears rendered on the site.

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

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

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

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

此过程，如这篇 WP Tavern文章中所述，涉及以下三个步骤

  • 在主题的根目录下创建一个 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字段是必需的，其他字段是可选的。

参考最近发布的主题中的示例，我在这个 TT2 Gopher Blocks演示主题中重构了模式注册，该主题是为之前在 CSS-Tricks 上的一篇文章准备的。

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

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：在模板中引用模式 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模式在模式插入器中可见，并带有其预览（如果已选择）。

Screenshot showing pattern category displayed in patterns inserter (left panel) and corresponding default footer pattern displayed in the editor (right panel).

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

无需模式注册的主题示例

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

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

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

任何来自不断增长的目录的模式也可以通过简单的“复制粘贴”添加到块主题中，或者通过引用其目录模式 slug包含在theme.json文件中。接下来，我将简要介绍如何轻松地使用极少的代码来完成此操作。

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

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

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

3.2：进行所需的自定义

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

Screenshot showing modified pattern (left panel) and corresponding code in code editor (right panel)

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

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">[email protected]</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：在插入器中查看新模式

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

Screenshot showing new footer pattern (left panel) and its preview (right panel).

在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" ]
}

在这个示例中，来自前面示例的模式片段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 -->',
    )
);

此功能目前仅限于页面文章类型，尚未用于“文章文章类型”。

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

您可以关注并参与 GitHub 上列出的资源部分中的讨论。

使用模式目录构建页面

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

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

总结

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

确实，区块模式将改变一切，这肯定是在 WordPress 主题领域中的一个改变游戏规则的功能。当使用模式构建的全部潜力可用时，这将改变我们设计区块主题和创建精美内容的方式，即使只有很少的代码知识。对于许多创意设计师来说，模式目录也可能提供一个合适的途径来展示他们的创造力。

资源

WordPress 6.0

创建模式

模式增强（GitHub）

博客文章

嘘！创建一个 DigitalOcean 帐户，并获得200 美元的免费积分，用于基于云的托管和服务。

评论

  1. Erika
    评论永久链接#

    当我以这种方式注册区块模式时，我的区块模式类别没有显示！如果我通过 register_block_pattern() 函数注册模式，它可以工作，但如果我通过 /patterns 文件夹注册，则不行。不过，模式会显示为“未分类”。

    回复
  2. Ganesh
    评论永久链接#

    你好，Erika，
    你是否按照模式类别和类型注册步骤操作？

    回复
  3. Sarah Hall
    评论永久链接#

    我甚至没有意识到这是可能的，非常感谢！

    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.