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

這是塊模式完整指南的第三部分，也是最後一部分，包括以下主題：

1. 塊模式簡介
2. 在頁面上插入圖案
3. 目錄中可用的預定義模式和其他模式
4. 將目錄中可用的模式添加到您的站點
5. 如何從頭開始創建圖案
6. 如果您不是開發人員，如何創建模式
7. 如何將可重用的塊變成塊模式
8. 使用塊模式的主題
9. 官方文檔。

在第一部分中，我們看到了指南中涵蓋的所有主題的前 4 點：什麼是塊模式、如何在頁面中插入預定義的模式以及在哪裡找到以及如何復制某些目錄中可用的模式. 在第二部分中，我們詳細了解了第 5 點：我們如何使用代碼從頭開始創建模式。 在最後一篇文章中，我們將看看最後 4 點：我們如何在不成為開發人員的情況下創建模式，如何將可重用的塊轉換為塊模式，哪些主題使用塊模式，最後，你可以在哪裡找到關於模式的官方文檔。

6. 如果您不是開發人員，如何創建模式

儘管我們已經在上一篇文章中看到了使用代碼創建模式所必須遵循的步驟，但在這一點上，我們將看到您無需成為開發人員就可以創建模式。 是的，我們將使用插件來完成。 事實上，創建模式的插件不止一個：

• 賈斯汀·塔德洛克（Justin Tadlock）的塊模式生成器，
• BlockMeister – BlockMeister 的塊模式生成器，
• 頁面生成器 Gutenberg Blocks – GoDaddy 的 CoBlocks

這三者的工作方式相似，但有一些細微差別。 安裝其中任何一個後，WordPress 管理菜單中會出現新選項，以便您可以創建新模式並管理創建的模式列表。

對於 Block Patterns Builder 插件（即左側的圖像），出現的 Block Patterns 菜單有兩個選項：一個是創建新模式，另一個是列出和編輯現有模式。 對於 BlockMeister 插件（如中圖所示），它還添加了第三個選項來管理模式的類別。 在 CoBlock 的情況下（如上圖所示），它的菜單出現在Appearance下。

在所有三個插件中，創建新模式會打開您用於編輯任何頁面或帖子的同一編輯器。 只需為模式命名並定義您希望它擁有的塊。 當你的圖案準備好時，只需保存它。

前面的屏幕截圖顯示了 BlockMeister 插件提供的塊模式編輯器。 如您所見，它在右側欄中提供了許多附加屬性：名稱、slug、描述、模式的寬度和類別。 另一方面，Justin Tadlock 插件不允許您添加類別。 並且 CoBlocks 還允許您添加模式的附加屬性。

使用這三個插件中的任何一個，在保存您的模式後，單擊帖子和頁面編輯器中的+按鈕即可使用它，以便您可以在需要時插入它。

如您所見，只要您使用正確的插件，就可以很容易地創建您希望在頁面設計中可用的模式。

7. 如何將可重用的塊變成塊模式

如果您已經使用 Gutenberg 一段時間並且一直在使用它設計頁面，我敢打賭您還創建了一些可重用的塊來在多個頁面上複製某個設計。 至少我做到了！ 我記得我第一次聽說模式時，我認為它們與可重複使用的塊幾乎相同……但事實並非如此：這兩個概念之間存在一些相關的差異。

可重用塊是可以插入不同頁面的塊（或一組塊），其內容在所有頁面上都相同。 也就是說，如果您稍後對其進行修改，則應更新其所有實例。 因此，如果您希望可重用塊與其他塊不同，則必須先將其轉換為普通塊。

另一方面，塊狀圖案是為定製而設計的——它是一種基本設計，您應該在插入它後對其進行調整。 當然，選項是無限的。 該模式的想法是為如何組合塊以使其看起來更有吸引力提供一個起點。

如果您創建可重用塊的想法是將它們轉換為普通塊然後方便地自定義它們，那麼將這些塊轉換為塊模式更有意義。 我們應該怎麼做？

JB Audras 的 Reusable Block Extended 插件為我們提供了這個功能。 讓我們看看我們是如何做到的。

安裝插件後，將出現一個菜單選項來管理可重用塊。 如果您單擊All Reusable Blocks ，您將看到已定義的塊列表。

正如您在上圖中看到的，可重用塊列表顯示了兩個塊，對於每個塊，它會告訴您它們的使用位置、簡碼和 PHP 函數，以便您可以使用它們，以及一個按鈕您可以將其轉換為塊模式。

單擊“轉換為塊模式”按鈕後，將為您創建模式，並且將在您的編輯器中的“從可重用塊轉換”類別中可用。

8. 使用塊模式的主題

在撰寫本文時，WordPress.org 主題目錄中已經有 14 個具有自定義塊模式的主題，並且該列表正在快速增長。

• WordPress.org 的 2221 版本 1.0
• C9 Starter 版本 2.4.4，作者：covertnine
• C9 工作版本 2.3.1，作者：covertnine
• Automattic 的 Seedlet 版本 1.1.2
• ExS 版本 0.9.0 由 exstheme
• uxl 的 Cordero 版本 1.2.2
• Diev Dmitry 的 Bigwigs 版本 0.7.1
• 大雄的乳液版本 1.6.9
• WordPress.org 的二十二十版本 1.6
• VW THEMES 的 VW Health Coaching 版本 0.6.5
• WordPress.org 的 29 版 4.9.6
• Diev Dmitry 著作 1.3.0 版
• WordPress.org 的 27 版 2.5
• WordPress.org 的 26 版 2.3

我藉此機會提一下，如果您是主題開發人員，並且想要消除 WordPress 5.5 中的預定義塊（核心塊模式），您可以使用以下代碼來實現：

 remove_theme_support( 'core-block-patterns' );

9. 官方文檔

最後，這裡有一些關於塊模式的有用鏈接：

• 面向最終用戶 - 阻止模式的介紹性視頻，以了解什麼是模式、如何訪問它們、如何將它們添加到帖子和頁面中，並了解如何為您的內容定制它們。 該視頻是由 WordPress 培訓團隊發布的研討會。
• 對於最終用戶——文檔團隊創建的塊模式文檔。
• For Developers – Block API 文檔中的 Block Patterns 頁面，由 Gutenberg 團隊發布，我在上一篇文章中已經告訴過你。

就是這樣！ 我希望您發現本指南有用。 如果您認為缺少任何信息，請隨時在下面的評論部分告訴我。

帕特里克·亨德利 (Patrick Hendry) 在 Unsplash 上的特色圖片。