Builder 基礎：探索塊模式

最新版本的 WordPress 將於 1 月 25 日月底到達。也許在您閱讀本文時，5.9 版已經發布給全世界。 我再興奮不過了。 有無數的增強和新特性，其中許多我們將在以後的文章中介紹，但今天的主題是塊“模式”。

雖然對 WordPress 來說並不陌生，但由於 5.9 版啟用的功能，特別是基於塊的主題，模式正受到很多新的關注。 模式正在迅速成為 WordPress 本身的基本組成部分，並且似乎準備重塑我們設計和構建網站的方式。 那麼還有什麼更好的時間來探索真正的塊模式以及如何使用它們呢？

基礎

在我們深入研究塊模式之前，讓我們從基礎開始並建立一些術語。 WordPress 在過去幾年中發生了很大變化。 確保我們都在同一頁面上是件好事。

堵塞

塊是 WordPress 中內容的基本“單元”。 從一段文本到一組圖像，一個塊幾乎可以採用任何形式。 我喜歡想像一塊樂高積木. 雖然每個塊可能看起來不同或具有獨特的功能，但它們都很好地結合在一起創建了網頁的內容。

圖案

塊模式只是形成特定佈局的預定義塊集合。 模式可以是單個塊或由多個塊組成。 正如我們稍後將看到的，模式使構建複雜的頁面佈局變得簡單而有趣。

編輯

編輯器是我們用來創建頁面和帖子的用戶界面。 自 2018 年一直在 WordPress 5.0 中引入以來，編輯器被許多名字所稱呼。 其中包括 Gutenberg、Gutenberg Editor、Block Editor 等。 出於本文的目的，我們將簡單地使用術語“編輯器”。

插入器

在編輯器中，插入器用於向頁面添加塊和模式。 您可以通過單擊編輯器左上角的藍色 (+) 符號來訪問插入器。

下面的屏幕截圖說明了我們定義的術語。

為什麼要使用塊模式？

編輯器使我們能夠從塊中構建幾乎任何設計，無論是簡單的博客文章還是精心設計的登錄頁面。 讓我們以這篇文章為例。 您現在正在閱讀的是段落塊。 上面的標題是一個標題塊，屏幕截圖只是一個圖像塊。 將這些內容元素添加到頁面很容易。 我打開了插入器，找到了合適的塊並點擊插入。

快速提示：您知道塊也可以使用斜杠命令插入嗎？ 用“/”鍵開始一個新段落，將出現可用塊的列表。 鍵入其他字母將微調搜索結果。 試試看！

稍微複雜一點的東西呢？ 考慮以下定價表，這是一種通常用於在網站上展示產品或服務的設計。

仔細觀察，您可能會識別出用於創建此佈局的各個塊。 底座是一個 Columns 塊，具有三個等間距的列。 每個 Column 塊內部都有一個 Separator、Heading、Paragraph、Buttons 和 Spacer 塊。 你能認出幾個？

事實上，這個定價表由 25 個單獨的塊組成。 無論您使用 WordPress 的技能水平如何，從頭開始復制此佈局既乏味又具有挑戰性。

現在想像一下，如果已經為您配置了這組 25 個塊。 只需單擊一下，您就可以插入完整的定價表並對其進行調整以滿足您的個人需求。 更好的是，如果觸手可及的大量設計集合，每一個都符合您的主題審美？ 想想創意圖像和文本佈局、號召性用語、頁眉、頁腳，甚至整頁佈局。 擁有這種類型的“入門內容”可以節省大量時間，甚至可以讓新的 WordPress 用戶更容易訪問編輯器。

這就是塊模式的用武之地。上面的定價表實際上是包含在即將發布的二十二十二主題中的模式，該主題將與 WordPress 5.9 一起發布！

希望這個小練習已經說明了為什麼我對塊模式的潛力如此興奮，但是我們如何實際使用它們呢？

如何使用模式

就像塊一樣，可以使用插入器將模式添加到頁面中。 在插入器打開的情況下，導航到“模式”選項卡，其中顯示了按類別分割的所有可用模式。 選擇適合您的佈局，然後單擊以插入。 然後，您可以編輯構成圖案的各個塊，就像編輯任何其他塊一樣。 您可以插入的模式數量沒有限制。 混合搭配以創建獨特的頁面設計。

雖然插入器提供了對塊圖案的輕鬆訪問，但您會注意到每個圖案的預覽非常小，並且它們都堆疊在一個列中。 很難可視化和比較佈局，因此很難選擇正確的佈局。

為了解決這個問題，WordPress 5.9 包含了 Pattern Explorer。 可以通過單擊“模式”選項卡上類別下拉列表旁邊的“探索”按鈕來訪問這個令人興奮的新功能。

資源管理器打開一個模式窗口，該窗口通過網格中顯示的模式提供增強的瀏覽體驗。 它們也可以按類別輕鬆搜索或過濾。

上面的屏幕截圖是 Pattern Explorer 的第一次迭代。 未來的 WordPress 版本有望擴展 Explorer 的功能。 當前的實驗添加了移動/平板電腦預覽和單獨演示模式的選項，而不是網格佈局。 雖然沒有得到任何確認，但請留意 WordPress 6.0 到 2022 年中期的其他增強功能。

通過對模式的所有討論，您可能想知道，它們實際上來自哪裡？

在哪裡可以找到他們

以三種方式之一註冊模式，通過您當前的主題、第三方插件或通過模式目錄的 WordPress 本身。 讓我們探索每種方法。

主題

您的主題可能是在您的網站上提供模式的最直接方式。 正如我們在上面的定價表中看到的那樣，許多基於塊的主題都包含他們自己的定制模式集合。這只是主題區分自己的另一種方式，一組強大的佈局選項將為用戶帶來巨大的好處。 在撰寫本文時，二十二十二主題將附帶 60 多個！

模式目錄 (WordPress)

從 WordPress 5.9 版本開始，WordPress 將通過 Pattern Directory 提供自己的模式。

Pattern Directory 是一個社區驅動的模式存儲庫，很像 WordPress 插件和主題存儲庫，將在 5.9 版本之前開放供公眾提交。 您可以直接從 Pattern Explorer 瀏覽和插入所有提交和批准的模式。 這意味著 WordPress 用戶將可以訪問數百個（如果不是數千個）塊模式。

快速提示：某些主題可能會禁用 WordPress 從模式目錄中包含的模式。 當主題開發人員包含他們自己的模式集合併希望提供更精心策劃的用戶體驗時，通常會這樣做。

第三方插件

最後我們有插件。 由於模式已經存在多年，許多第三方插件，例如 Genesis Blocks 和 Redux，已經創建了廣泛的模式庫。 這些庫通常不直接與 Pattern Explorer 等功能集成，並且具有 WordPress 核心中沒有的自定義塊。 他們也傾向於使用自己的插入模式的方法，但隨著時間的推移，我預計許多人會開始遵循 WordPress 的新標準化方法。

如果您在 Pattern Directory 不斷成熟的同時尋找小眾塊和佈局，或者您沒有使用具有自己模式的主題，我絕對建議您探索第三方插件必須提供的內容。

模式的未來

WordPress 5.9 將為塊模式帶來許多增強功能。 正如我們所討論的，Pattern Explorer 將使您更容易為您的網站選擇正確的設計。 模式目錄將使您能夠訪問大量社區構建的模式，這些模式將無縫集成到您的主題中。

雖然您將始終能夠從單個塊中創建獨特的設計，但我相信我們大多數人會直接進入 Pattern Explorer。 我們將選擇一種佈局，要么是我們的主題提供的要么是從目錄中提供的，然後根據需要進行調整。 我知道我會的。

此外，我們可以預期新的基於塊的主題將通過其內置塊模式集合的廣泛程度來判斷。 具有一百多種模式的主題，所有這些都被整齊地分類並涵蓋了廣泛的用例，很可能會成為常態。 雖然主題的美感很重要，但為用戶提供輕鬆創建精美網頁所需的工具至關重要。

模式是 WordPress 的未來，未來是光明的。

包起來

在本文中，我們回顧了什麼是塊模式，如何使用它們，以及它們為什麼會從根本上改變我們構建 WordPress 網站的方式。 在下一篇 Builder Basics 文章中，我們將深入探討並教您如何實際創建自己的模式！

那麼你對模式有什麼看法呢？ 你在你的網站上使用它們嗎？ 您有任何本文未涵蓋的問題嗎？ 讓我們在評論中知道。