構建古騰堡塊模式庫

古騰堡代表了向基於模式的網頁設計的巨大轉變。 在本文中，我將討論我們在創建我們自己的自定義古騰堡塊的靈活庫時所採用的方法。

背景

2018 年 12 月發布的 Gutenberg 代表了 WordPress 自成立以來的最大變化。 新的基於塊的“拖放”界面改變了開發人員創建主題的方式、設計人員考慮將站點分解為組件的方式以及內容編輯器管理和計劃內容創建的方式。

這是向基於模式的網站設計的根本轉變； 一個可重複使用的元素系統，可以在整個網站上一致應用，以創建最佳的用戶體驗並簡化工作流程。 雖然我們中的許多人已經在研究模式，但古騰堡以更快的速度推動著這種變化。 由於 WordPress 為全球三分之一的網站提供支持，因此這種變化的影響不容小覷。

本文重點介紹了我們作為開發人員在開始規劃和構建模式庫時面臨的一些問題，我們如何克服 Gutenberg 固有的限制以及我們創建靈活的自定義塊系統所採用的方法。

我們的目標

作為定制 WordPress 網站的專業構建者，Gutenberg 為我們提供了創建統一模式庫的絕佳機會； 一組可定制的塊，用於我們的許多自定義網站構建。

我們不僅希望接受這種新的編輯體驗，還希望能夠使用我們自己的系統提供解決方案，而無需依賴有限的核心 Gutenberg 塊集或現成的 3rd 方解決方案的拼湊。

一組觸手可及的全面塊也意味著我們不必為新的古騰堡網站構建從頭開始創建每個塊。 這將使我們能夠花更多時間改進網站的美感，並添加有助於將網站與競爭對手區分開來的最後潤色和優化。

挑戰

設計靈活性

我們需要一個具有多種模式的多功能設計系統，這將使我們能夠靈活地創建各種定制主題。

在能夠保持有限和現實數量的模式之間取得良好的平衡，同時又不影響主題設計，這將是一個挑戰。

主題發展的轉變

在古騰堡之前，我們採用了多種不同的方法來開發主題。 最常見的是為站點的不同部分創建單獨的頁面模板。 模板將非常規範，並包括每個設計部分的自定義字段。 例如，“案例研究”模板可能包括用於文本編輯器、圖片庫、推薦等的字段。但是，一旦包含在模板中，它們就不能輕易更改。

這種方法不僅在頁面佈局方面受到限制，而且通常意味著每個新的基於模板的站點都需要重複努力； 需要創建字段、設置模板和單獨的組件編碼以在前端顯示。

為了適應古騰堡，我們需要改變我們的開發方法，了解我們如何創建可重用的組件並擁抱古騰堡現在為我們提供的新網站構建的靈活性。

古騰堡沒那麼靈活

開箱即用，古騰堡有 30 多個核心塊可用。 從基本內容組件（如段落、標題和列表元素）到更複雜的小部件和嵌入，應有盡有。

對於我們的許多網站構建，很多這些核心塊要么不相關，要么不具備我們的主題要求它們提供的功能級別。 我們需要一種方法來創建我們自己的一組模式，以執行適合主題設計的非常具體的功能。

我們很快在 Gutenberg 中發現的另一個問題是，使用核心塊創建更複雜的佈局既不簡單也不直觀。

例如，“內容和圖像”塊的模式可能需要標題、段落、列表和按鈕出現在圖像旁邊，並且可以選擇在該內容的左側或右側顯示圖像，並且這些元素以一致的佈局顯示。

古騰堡並不容易達到這種程度的自由。 雖然有幾個塊可以添加文本、圖像和按鈕，但它們本質上是非常原子的，當單獨添加時，它們會顯示為單獨的堆疊塊。 很早就很明顯古騰堡不夠靈活，我們需要能夠構建自己的自定義塊。

我們的解決方案

多功能設計系統

在 Gutenberg 發布之前，我們已經為我們的模式庫在模式的研究和可視化方面投入了大量時間。

這涉及審核我們現有的幾個網站和原型，以編譯常用元素的線框庫。

我們的設計師和開發人員繼續合作以了解如何將這些元素組合到古騰堡積木中，以及如何創建特定積木類型，以便通過有限的自定義選項，可以使單個積木看起來因主題而異。

一旦我們將我們的模式分類成塊，我們就可以開始構建了。

具有高級自定義字段的構建塊

每個主題開發人員幾乎肯定都會在某個時候遇到高級自定義字段 (ACF)。 通過直觀的界面，可以創建多種不同的字段類型； 從基本文本字段和內容編輯器到日期選擇器、地圖嵌入和圖庫字段。 這些可以輕鬆分配到站點的不同區域，例如帖子類型、頁面模板、類別和用戶頁面。

ACF 的最新版本 ACF 塊將所有這些熟悉的功能擴展到 Gutenberg。 可以按照與站點其他區域相同的方式創建字段組並將其分配給不同的基於 ACF 的塊。

通過註冊塊和輸出字段所需的幾行代碼，可以在幾分鐘內創建一個基本的自定義塊。 使用這種方法可以輕鬆創建塊，這使我們能夠專注於塊配置、輸出和样式。

我們現在能夠創建一套自定義塊，這些塊提供了古騰堡的所有靈活性，但僅限於有助於保持佈局一致的主題設計。

模式庫插件

在創建了幾個示例塊之後，我們決定在工程團隊的幫助下將我們的塊打包在一個自定義插件中。

這個基於塊的插件允許為新網站構建快速部署自定義模式。 然後在主題級別進一步定制這些。

我們的模式庫插件包括一些有用的功能：

1. 基本塊模板文件，允許我們快速添加新塊；
2. 允許初始化核心塊和自定義塊並包含在自定義類別下的功能；
3. 一個管理設置屏幕，可以啟用或禁用每個塊；
4. 能夠覆蓋主題內塊的佈局和結構；
5. 在主題級別覆蓋塊樣式的能力；
6. 在 Gutenberg 中加載主題級別的樣式表，以便塊管理預覽看起來與前端塊相同。 CSS 網格的使用幫助我們最大限度地提高了美學和佈局的靈活性，同時最大限度地減少了結構變化；
7. 可以將特定塊限制為某些帖子類型以保持一致性。

Pattern Library 插件的開發將是一個持續的發展，但我們現在有超過 15 個塊可用於構建我們靈活的主題設計的很大一部分。

我們的塊套件包括內容和圖像模式、推薦、相關文章和團隊塊以及更多“展示”樣式模式，包括畫廊、統計數據和滑塊。

概括

我們對古騰堡和我們的自定義模式庫開放的機會感到非常興奮。

我們不僅可以使用最新的編輯體驗繼續推動我們的定製網站產品，我們還能夠使用統一的開發方法製作高度靈活的網站，幫助我們為最終用戶創造豐富的體驗。

自從我們第一次開始使用我們的古騰堡塊模式庫以來，已經將近 2 個月了，我們現在正在許多新站點構建中使用它。 客戶一直渴望使用古騰堡，到目前為止，客戶的反饋非常積極。

“Matt 和 Pammy 提供了有關您創建的站點元素的教程，它們非常棒！！ 靈活性和專業性太棒了，我非常感謝你迄今為止在這方面所做的所有出色的工作......現在對這個網站感到非常興奮。 謝謝”

– 雷切爾·史密斯，基督教青年會諾丁漢

隨著我們在 Gutenberg 上花費更多時間，我們將繼續擴展我們的自定義塊模式庫並進一步改進。 我們目前正在開發我們的第 5 個基於古騰堡的網站，因此請盡快尋找案例研究！

如果您在 WordPress 開發方面需要幫助，請隨時與我們聯繫。