Builder 基礎：如何創建塊模式

在上個月的 Builder Basics 文章中，我們探討了塊模式：它們是什麼以及如何使用它們。 我們了解到，塊模式只是形成特定佈局的預定義塊集合。 我們展示了模式的力量，並討論了它們如何成為現代 WordPress 主題開發的基石。 今天我們將學習如何設計、分享和註冊我們自己的模式！

請注意，本文在其所有示例中都使用了二十二十二主題。 這個基於塊的主題與 WordPress 5.9 一起發布，是一個具有 60 多個塊模式的絕佳資源。

模式設計

創建塊模式最困難的部分是決定它的外觀。 讓我們從相對簡單的事情開始：一個項目網格，兩行三行。 我們可以使用這種設計來展示不同的業務服務或產品功能。

快速提示：模式可以由任何塊構建，包括第三方塊。 但是，如果您打算將您的模式分發給廣泛的受眾，請嘗試僅使用核心 WordPress 塊——這樣，用戶無需安裝額外的插件即可使用您的設計。

對我來說，圖案設計始於編輯器。 雖然可以手動編碼模式，但直觀地做事情要容易得多。 我將首先為網格的第一行添加一個包含三列的 Columns 塊。 接下來，將 Heading、Paragraph 和 Buttons 塊添加到每一列。 複製 Columns 塊以創建第二個網格行。 最後，我將應用一些樣式配置並將兩個 Columns 塊包裝在具有背景顏色的 Group 塊中。 結果如下所示：

您可以在上面的屏幕截圖中看到構成此設計的 33 個塊！

如果我想創建一個替代的“深色”網格版本，我只需要復制原始設計並調整樣式即可。

雖然這兩種設計都相對簡單，但從頭開始創建它們可能很乏味。 能夠共享和/或保存這些塊模式將節省大量時間。

共享設計

分享圖案設計很容易！ 假設您想將設計移動到您​​網站上的另一個頁面，或者可能完全移動到另一個網站。 就像複製和粘貼塊標記一樣簡單。 有多種方法可以實現這一點。

如果圖案設計包含在“容器”塊中，例如 Group、Cover 或 Columns 塊，請選擇最外面的容器並使用工具菜單選擇“複製”。 塊標記被複製到剪貼板，你可以粘貼到任何你喜歡的地方。

第二個選項是使用代碼編輯器，您可以從選項面板訪問它。

代碼編輯器提供當前頁面或帖子上所有塊標記的可視化表示。 我更喜歡這種方法，因為它很容易準確地看到正在復制的代碼。

註冊模式

複製和粘貼塊標記可能很容易，但我們通常想要更永久的圖案設計版本。 為此，我們將使用 Patterns API 來“註冊”自定義塊模式。 這使得我們的設計在 WordPress 的插入器和模式資源管理器中都可用。

要註冊一個模式，我們使用 PHP 函數 register_block_pattern()。 這個函數接受兩個參數，一個標題和一個屬性數組。 在逐個介紹之前，讓我們看一個例子。

註冊塊模式（

'示例/功能網格燈'，

大批（

'title' => __('Feature Grid - Light', 'textdomain' ),

'description' => __('在淺色背景的網格中展示六個特色項目。', 'textdomain' ),

'categories' => array('featured', 'columns'),

'關鍵字' => 數組（'特徵'，'網格'），

'viewportWidth' => 1400,

'blockTypes' => 數組（'core/columns' ），

'內容' => '模式內容'

)

);

在這裡，我們正在註冊我們之前設計的 Feature Grid 模式。 標題遵循命名空間/標題命名約定。 在同一個項目中註冊多個模式時，最佳做法是保持命名空間一致。

只有屬性數組中的標題和內容參數在技術上是必需的。 為簡潔起見，上述示例中排除了模式內容。 但是，這與我們在上一節中復制和粘貼的代碼相同。 類別是使用類別字段設置的，一個模式可以有多個。 在編輯器中，模式是按類別組織的。 對於其餘屬性，塊編輯器手冊中提供了出色的細分。

要使用深色背景註冊特徵網格圖案，只需複制註冊碼並相應更新即可。 最後，我們像這樣包裝這兩個函數，並將所有內容放在我們主題的 functions.php 文件中。

功能 my_pattern_library_register_block_patterns() {

註冊塊模式（

'示例/功能網格燈'，

大批（ … ）

);

註冊塊模式（

'示例/功能網格暗，

大批（ … ）

);

}

add_action('init', 'example_register_block_patterns');

完整代碼可在 GitHub 上的 Gist 中找到。

添加代碼後，我們新註冊的模式現在將顯示在插入器和模式資源管理器中。

註冊模式類別

使用自定義模式時，將它們放在自定義類別中通常很有幫助。 WordPress 使用 register_block_pattern_category() 使其變得簡單。 這個函數類似於我們用來註冊模式的函數。 您需要做的就是提供一個類別標題和一組屬性。 從 WordPress 5.9 開始，標籤是唯一受支持的屬性，但我們期待未來更多。

以下示例使用標題自定義註冊“自定義”類別。 將此代碼與模式註冊示例一起放在主題的 functions.php 文件中。

函數 example_register_block_pattern_categories() {

register_block_pattern_category(

'風俗'，

數組（“標籤”=> __（“自定義”，“文本域”））

);

}

add_action('init', 'example_register_block_pattern_categories');

模式類別只有在具有與之關聯的模式時才會顯示在編輯器中。 因此，如果我們在之前註冊的兩個特徵網格模式中添加自定義，“自定義”類別將如下所示：

創建模式庫插件

在前面的部分中，我們通過將代碼放在主題的 functions.php 文件中來註冊模式和模式類別。 雖然這有效，但從長遠來看並不理想。 假設我們需要更新我們的主題？ 也許我們想在另一個網站上使用這些模式？

WordPress 尚未為自定義模式管理提供原生解決方案，因此我們必須尋找替代解決方案。 此外，具有更便攜格式的模式通常是可取的。

我發現最好的方法是創建一個簡單的 WordPress 插件來存儲我的自定義模式集合。 插件提供最大的多功能性並且與主題無關。 我將在以下步驟中向您展示如何創建您自己的模式庫插件。

快速提示：如果您想跳過以下步驟，我準備了一個完整的“我的模式庫”插件，它應該為您自己的庫提供一個很好的起點。 該代碼在 GitHub 上作為 Gist 提供。

第 1 步：獲取設置

在開始構建插件之前，您需要一個工作版本的 WordPress 和一個不同種類的文本編輯器。 我強烈推薦 Local 用於創建本地 WordPress 安裝，並且多年來一直專門使用它。 我使用 Atom 進行文本編輯，但有很多不錯的選擇。 即使是操作系統附帶的基本文本編輯器也可以。

使用 Local 或類似應用程序設置本地 WordPress 站點。 確保 WordPress 已更新至 5.9 或更高版本。 模式適用於 5.5+，但最好盡可能使用最新版本的 WordPress。

第 2 步：創建插件

您需要做的下一件事是創建插件的“基礎”。 如果您是插件開發的新手，請不要害怕。 這聽起來比實際更令人生畏。

導航到本地 WordPress 安裝中的wp-content → plugins目錄並創建一個名為 my-pattern-library 的新目錄。 您可以為該目錄命名任何您喜歡的名稱。 只需在所有後續步驟中將“my-pattern-library”替換為您的自定義名稱即可。

在新的wp-content → plugins → my-pattern-library目錄中，創建一個名為 my-pattern-library.php 的 PHP 文件。 在文本編輯器中打開文件並將以下插件標題註釋添加到文件頂部。 不要忘記前導 <?php. 請注意，我簡化了本教程的標題。

<?php

/**

* 插件名稱：我的模式庫

* 描述：一個簡單的塊模式庫。

* 版本：0.1.0

* 至少需要：5.8

* 需要 PHP：7.0

* 作者：你的名字

* 許可證：GPL v2 或更高版本

* 文本域：my-pattern-library

*/

隨意更改您認為合適的標題信息。 然後保存文件。 您現在擁有一個功能齊全的 WordPress 插件。 確認它在管理插件頁面上可見，然後單擊“激活”。 它應該看起來像這樣。

雖然您現在有一個正常工作的插件，但它實際上並沒有做任何事情。 讓我們改變它。

第 3 步：註冊模式和類別

在這最後一步中，您需要做的就是將本文前面的模式和模式類別註冊代碼複製到新插件中。 我們之前將此代碼放在主題的functions.php 文件中。 現在，只需將其粘貼到 my-pattern-library.php 文件中的標題註釋下方。

保存文件，然後導航到 WordPress 中的編輯器。 打開插入器，單擊模式選項卡並選擇自定義類別。 您應該看到插件註冊的兩種模式。

您的模式庫現在可以運行了！ 當需要新的自定義模式或類別時，只需將它們添加到插件中即可。 GitHub 上的 Gist 提供了完整的代碼示例。

在我們結束之前，重要的是要提到這個例子是供個人使用的。 如果要公開分發插件，您可能希望包含更多功能。 本地化浮現在腦海中。 也就是說，本教程演示了創建一個存儲自定義塊模式的簡單插件是多麼容易。

包起來

在本文中，您學習瞭如何設計、共享和註冊塊模式。 您甚至已經學會瞭如何構建一個簡單的 WordPress 插件來容納您自己的模式庫。 我堅信塊模式是現代主題開發不可或缺的一部分，我很高興看到未來會發生什麼。 如果您還沒有開始探索模式，我希望本文能鼓勵您這樣做。 學習 WordPress 是額外學習的絕佳資源，如果您有任何問題，請在評論中告訴我。