古腾堡块模式完整指南（二）

已发表: 2020-12-25

这篇文章是古腾堡块模式完整指南的第二部分，其中包括以下几点：

  1. 块模式简介
  2. 在页面上插入图案
  3. 目录中可用的预定义模式和其他模式
  4. 将目录中可用的模式添加到您的站点
  5. 如何从头开始创建图案
  6. 如果您不是开发人员，如何创建模式
  7. 如何将可重用块转换为块模式
  8. 使用块模式的主题
  9. 官方文档。

在第一部分中，我们看到了指南中涵盖的所有主题的前 4 点：什么是块模式，如何在页面中插入预定义的模式，以及在哪里可以找到以及如何复制某些模式中可用的模式目录。 在那里我们看到我们可以在我们正在编辑的页面上粘贴一个模式，但它不会存储在我们的模式库中以供将来使用。

如果我们想在 Gutenberg 模式库中添加一个新模式，我们必须创建并注册该模式。 尽管您确实需要一些基本的编码技能，但它非常简单。 如果这不是您的情况，请不要担心，因为我们稍后将学习如何在不需要任何编码的情况下获得相同的结果。

5.创建一个新模式

要创建块模式，您必须使用块模式 API。 具体来说，PHP 函数register_block_pattern() 。 让我们通过一个简单的示例简要了解我们必须遵循的不同步骤。

但在我们开始之前，让我补充一点。 使用代码片段自定义 WordPress 时，您应该始终问自己应该在哪里编写所述片段。 大多数教程推荐你的活动主题的functions.php文件，因为它是完成工作的最简单的解决方案，但大卫写了这篇关于如何创建一个插件来跟踪你所有的定制的帖子，并认为这是一个更好的解决方案.

现在，块模式呢？ 您可以在主题中添加新块模式的定义（某些主题，如二十一二十一，已经包含自己的），或者您可以将其添加到自定义插件中。 我相信您会发现这两种解决方案的拥护者和批评者，因此请选择更适合您需求的那个。

#1 设计将形成你的模式的块

正如我在上一篇文章中已经提到的，模式是一组按你喜欢分组的块。 假设我想创建一个块模式，我可以使用它来创建一个描述产品基本特征的部分。

为此，在标题为“创建模式”的页面上，我首先创建一个标题栏“6 个功能部分”，然后插入一个 3 列块。

创建将形成我的模式的一组块。
创建将形成我的模式的一组块。

在第一个块中，我添加了一张图片，并在其下添加了功能的标题和描述。

创建将形成我的模式的一组块。
创建将形成我的模式的一组块。

我在接下来的两个块中复制图像、标题和描述。 最后，我复制了这一行，这样我就有了一个包含六个功能描述的部分。

将形成我的新模式的一组块。
我已经创建了一组将形成我的新模式的块。

当然，如果您认为您将多次使用它，那么创建一个块模式才有意义。

#2 复制块的内容

一旦我们定义了一组块，我们只需要用鼠标选择它们并在工具栏中单击Copy 。

选择并单击复制。
选择将构成图案的一组块，然后单击复制。

#3 转义复制的 HTML 内容

为了避免出现问题，我们需要对刚刚复制的文本进行转义，以便计算机可以理解换行符、制表符等特殊字符。 您可以使用 onlinestringtools.com 或 JSON Escape/Unescape 等在线工具轻松转义文本：只需粘贴您之前复制的代码，您将获得正确转义的文本。

#4 注册模式

此时，唯一剩下的就是使用register_block_pattern()函数。 此函数接收两个参数：模式名称和属性数组。 在这篇文章的最后，我会为您提供有关可以在模式中定义的属性的更多详细信息，但首先让我们看看创建一个模式所需的步骤。

这是我们的例子：

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

正如您在前面的代码片段中看到的那样，我们首先指定一个唯一名称来标识我们的模式（ ruth-gutenberg-blocks-patterns/section-with-six-features ），然后我们指定一个具有几个属性的数组： title （“具有 6 个特征的部分”）模式的用户将看到和content本身。 content是我们在上一步中转义的文本。

#5 使用注册模式创建插件

要在我们的编辑器中注册模式，我们可以创建一个插件，或者我们可以将它放在我们的活动主题中。 如果您创建一个插件，这就是您所需要的：

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

瞧！ 如果我们现在刷新我们的编辑器（当然，假设你已经激活了插件），你会看到新的模式：

块编辑器中可用的模式。
块编辑器中可用的模式。

但不幸的是，它列在Uncathegorized下。 这是因为我们没有指出我们的块是属于任何现有类别还是属于新类别。

#6 添加新的模式类别

您可以将新的块模式添加到现有类别中，或者使用register_block_pattern_category函数创建一个全新的类别。 此函数还接受两个参数：类别名称和选项数组。 听起来很熟悉？

这是一个例子：

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

一旦新类别准备就绪，不要忘记更新您的块模式，以便明确指定它应该列在这个新类别下：

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

你有它：

使用指定类别创建的块模式。
块模式已创建并具有指示的类别。

我们现在可以将它添加到我们创建的任何新页面，然后进行我们认为合适的修改，正如您在为推出我们的新产品而在新页面上创建的部分中所见：

使用创建的模式创建的截面。
使用创建的模式创建的截面。

块模式属性

在我们的示例中，我们定义了块模式的title 、 content和categories属性，但还有更多。 您将在描述register_block_pattern函数的文档中找到详细信息，但这里是一个摘要：

  • title （必需）：模式的标题。
  • content （必需）：模式的内容。
  • description ：用于描述插入器中的模式的视觉隐藏文本。 描述是可选的，但当标题没有完全描述模式的作用时强烈建议使用。
  • categories ：一系列模式类别，用于对块模式进行分组。 块模式可以显示在多个类别中。
  • keywords ：一组别名或关键字，可帮助用户在搜索时发现模式。
  • viewportWidth ：一个整数，指定插入器中图案的宽度。

在类别注册的情况下，我们只需要定义一个label属性，因为没有更多的道具。

今天我们已经看到，创建块模式以便您始终可以在您的网站上使用它是非常容易的。 在下一篇文章中，我们将了解如何在不了解代码的情况下创建模式。 别错过！

约翰卡梅隆在 Unsplash 上的特色图片。