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

已發表: 2020-12-23

上週，按照每年的傳統，Matt Mullenweg 發表了他的演講（在這種情況下是虛擬的）， “The Word ”，他在演講中簡要總結了 WordPress 的當前狀態和新功能。

Matt 比以往任何時候都更專注於讓我們愛上 Gutenberg 塊編輯器提供的體驗。 Matt 強調的 WordPress 5.5 版附帶的新功能之一是塊模式。我認為製作這個完整的指南會很有趣。

該指南分為三篇文章，我們將關注以下主題：

塊模式簡介
在頁面上插入圖案
目錄中可用的預定義模式和其他模式
將目錄中可用的模式添加到您的站點
如何從頭開始創建圖案
如果您不是開發人員，如何創建模式
如何將可重用塊轉換為塊模式
使用塊模式的主題
官方文檔。

所以，事不宜遲，讓我們開始吧！

1. 塊模式介紹

當古騰堡到來時，與我們過去在 WordPress 中使用的經典編輯器相比，最大的變化是引入了“塊”概念。一切都應該是一個塊：帖子標題、它的段落、列表、圖像……它們每個都是一個塊，具有自己的自定義屬性來設置其字體大小、標題、對齊方式等。

這些塊很快變得更加複雜，現在我們有了圖片庫、媒體/文本塊甚至包含其他塊的塊。

古騰堡海灣街區的屏幕截圖 — 在封面塊中，對齊選項已更改，現在它包括全高和指示塊內內容對齊的選項。

同時，許多開發人員還提供了大量具有獨特功能的塊，以便您可以改進頁面的設計。例如，在 Nelio，我們開發了 Nelio 比較圖像，用一個簡單的滑塊比較兩個圖像：

不僅在插件和主題中可以找到大量的塊，它們的功能也隨著 WordPress 的不同版本而發展。因此，您當前可以創建可重用的塊，甚至可以使用它們創建頁面或帖子模板。

繼續使用可以快速輕鬆地重複使用的預定義設計的想法，使用 WordPress 5.5 版塊模式已經到來。塊模式的想法非常簡單：它們是由一組塊組成的預定義部分或片段，您可以在創建頁面和帖子時使用它們。這些模式可以是簡單的顯示兩個按鈕的部分，也可以是具有醒目和復雜設計的價格部分。

2. 在頁面上插入圖案

讓我們從基礎開始，如何在頁面上插入新模式？很容易！與塊一樣，要插入模式，您只需單擊編輯器左上角的+按鈕，而不是添加塊，而是選擇模式選項卡。在那裡，您會看到一個小的下拉列表，其中包含您可以選擇的模式類型、WordPress 的預定義模式、您已安裝的主題以及您使用插件安裝的任何其他模式。

選擇你最喜歡的模式，看看組成它的一組塊是如何插入到你的頁面中的：

插入模式後，您可以像之前所做的那樣修改每個塊。此外，如果對該模式的塊進行了分組，您還可以將組的屬性作為一個整體進行修改。很簡單，對吧？

3. 第三方目錄中的默認模式和更多模式

WordPress 5.5 版本附帶了一組預定義的塊模式，您現在可以使用它們來創建頁面。您只需單擊我上面提到的+按鈕即可查看您網站上可用的模式。

此外，您的活動主題也可能定義自己的塊模式。例如，二十一十七或二十一二十一 WordPress 主題包括一些塊模式，GoDaddy 和 Genesis Blocks 也是如此，舉幾個例子。

在 WordPress 5.0 發布後，我們遇到了塊爆炸式增長，現在我們看到塊模式的結果相同：您可以非常輕鬆地在您的網站上下載和安裝塊和模式，我稍後會解釋。在這裡，您可以使用兩個塊和圖案網，儘管我相信很快會有更多：

Jeffrey Carandang 的 Shareablock Patterns – 一個很棒的網站，您可以在其中共享和獲取大量塊、模板和模式，以下載並安裝在您的網站上。

Munir Kamal 的 Gutenberg Hub – 您還可以在其中找到一堆塊、模板和模式。

還有Redux Framework 插件，它提供了一個庫，其中包含 1000 多個第三方塊、模板和模式（包括上面目錄中可用的那些）以插入到您的頁面中。該插件允許您下載多達 5 個免費模式，然後您可以升級到付費版本。

Redux-Framework 插件截圖 — Redux-Framework 插件的屏幕截圖。

4. 將目錄中可用的模式添加到您的站點

正如我已經提到的，您可以使用 Redux Framework 插件輕鬆地添加來自 Shareablock 和 GutenbergHub 的模式。如果您是專業的 WordPress 網站設計師，那麼始終快速找到盡可能多的模式肯定是一個不錯的選擇。但是您也可以使用新的塊模式而無需高級插件。讓我們看看如何。