古騰堡塊模式完整指南（二）

已發表: 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 上的特色圖片。