如何創建一個簡單的 Gutenberg Block 插件

我們不是都喜歡 WordPress 嗎？ 該平台自成立以來就取得了巨大的成功，開發人員不斷添加新功能。 最近最引人注目的功能之一是 WordPress 塊編輯器，代號為Gutenberg 。

Gutenberg 為 WordPress 用戶提供了一種令人興奮的發佈內容和自定義網站的新方式。 它非常易於使用，這對初學者和開發人員來說都是個好消息。 如果您使用的是最新版本的 WordPress，那麼您已經熟悉塊編輯器和塊的概念。

默認情況下，WordPress 塊編輯器帶有一些塊，允許您包含文本、圖像、引號、音頻、視頻、嵌入等。 最重要的是，有大量的 Gutenberg 附加組件可以讓您擴展編輯器而不費吹灰之力。

不過，您可能有特定的需求，會提示您創建自己的自定義塊。 這是今天的帖子的來源。在幾段中，您將準確了解如何創建自定義 Gutenberg 塊以滿足您的特定需求。

事不宜遲，讓我們開始吧，因為有很多東西要學。

無論如何，什麼是塊？

如果您是完美的初學者，您可能想知道這家古騰堡業務的全部內容。 我知道，當介紹古騰堡時，我非常困惑。 但沒有人是罪魁禍首，我們都習慣了經典編輯器，一開始做出轉變是不舒服的。

儘管如此，無論我們喜歡與否，WordPress 塊編輯器都將繼續存在。 這正是為什麼您應該盡可能多地了解古騰堡（以及隨之而來的一切）以充分利用它的原因。

塊將段落、標題、媒體和嵌入都視為組件，當它們串在一起時，構成存儲在 WordPress 數據庫中的內容，用嵌入的媒體和簡碼取代了自由格式文本的傳統概念。 – 塊編輯器手冊

過去，WordPress 用戶依靠自由格式的文本和簡碼來添加內容。 古騰堡使用積木。 新的編輯器允許您使用塊單元來創建易於管理的豐富且靈活的佈局。 目前，您可以將塊編輯器用於帖子和頁面，但未來有積極的計劃支持全站點編輯。

古騰堡編輯器顯示一些塊

使用塊使在 WordPress 中創建內容非常令人耳目一新。 此外，許多現有插件都支持新的編輯器，並帶有現成的塊，使從所述插件添加內容變得輕而易舉。 編輯器允許您將塊拖放到頁面上，以便您可以更快地點擊發布按鈕。

就像直接內置在 WordPress 中的頁面構建器一樣。

如果您熟悉 Elementor 等可視化頁面構建器，那麼您可能熟悉拖放頁面構建的概念。 Gutenberg 試圖將拖放式站點構建完全整合到 WordPress 核心中。 請隨時查看我們的 Gutenberg Builder for WordPress 分步指南以了解更多信息。

有了這些，讓我們進入今天帖子的最佳部分。 讓我們學習如何創建一個簡單的塊。 您可以手動完成，也可以使用 Genesis Custom Blocks（以前稱為 BlockLab）、Lazy Blocks 或 ACF 等插件。 創建自定義塊有點技術性，所以就今天的帖子而言，我們將使用一個插件。

如何創建自定義塊（使用 Genesis 自定義塊）

走插件路線更容易，因為從頭開始創建自定義 Gutenberg 塊需要很好地掌握 HTML、CSS、PHP，更重要的是 JavaScript。 您還需要了解 React，它會讓初學者陷入困境。

在下一節中，我們將使用 StudioPress 和 WPEngine 以及其他開發人員提供給您的 Genesis Custom Blocks。 Genesis Custom Blocks 的免費版本可在官方 WordPress 存儲庫中獲得，這意味著我們可以將其安裝在 WordPress 管理儀表板中。

安裝創世紀自定義塊

登錄到您的 WordPress 管理儀表板，然後導航到Plugins > Add New ，如下所示。

接下來，在關鍵字搜索框中輸入“Genesis Custom Blocks”，然後點擊Install Now按鈕：

之後，激活插件以開始聚會。

你做得很好

接下來，讓我們創建一個新的自定義塊。 出於說明目的，讓我們創建一個自定義號召性用語 (CTA)，我們將在我們發布的每篇文章的末尾添加它。 最好的部分是您可以重複使用塊來省去一遍又一遍地創建相同塊的麻煩。

從您的 WordPress 管理菜單中，導航到Custom Blocks > Add New ，如下所示。

這樣做將引導您進入以下頁面，您可以在其中找到創建自定義塊的所有選項（在我們的示例中為 CTA）：

這裡有幾句話來解釋您在上面的屏幕截圖中看到的內容。 從頂部開始，你有。

主要編輯區：

• Builder – 您可能會在這里花費大量時間來設計您的自定義塊。 Builder允許您添加標題、字段、slug、關鍵字、類別並預覽您的自定義塊。 您將學習如何添加字段。
• 模板編輯器——設計您的自定義塊（即添加各種字段）後，您需要在模板編輯器中創建一個塊模板（閱讀，添加一點代碼）。 我們將在設計 CTA 時了解更多信息。
• 編輯器預覽- 這允許您在 WordPress 塊編輯器中預覽自定義塊。
• 前端預覽- 在這裡，您可以預覽自定義塊在您的網站上的外觀。
• 編輯器字段- 將在帖子或頁面的主要編輯區域顯示字段（您知道，就像您在 WordPress 編輯器中查看常規帖子的方式一樣）
• 檢查器字段- 將在塊檢查器下方的右側邊欄中顯示該字段。

邊欄選項

• Slug – slug 會根據您給自定義塊的標題自動填充。 創建塊模板時很重要。
• 圖標- 此選項允許您向自定義塊添加圖標。
• 類別- 這允許您將類別分配給您的自定義塊。 您可以使用內置類別之一對自定義塊進行分類，也可以創建一個全新的類別。
• 關鍵字- 添加最多三個與您的自定義塊相關的關鍵字，以便人們可以在塊選擇器中輕鬆找到它。
• 在模態中打開塊字段而不是在原地渲染- 如果您想在模態中打開字段，請打開。 如果您有一個包含許多字段的自定義塊，這將很有用。
• 帖子類型- 勾選框以允許您的自定義塊顯示在每種帖子類型上。 例如，如果您取消選中帖子，則該塊根本不會出現在任何帖子上。

創建自定義塊

現在您對用戶界面以及每個部分的作用有了更好的了解，讓我們捲起袖子開始工作吧。

在Builder中，給您的自定義塊一個合適的標題。 我將為此使用 CTA，如下所示。

在添加新字段之前，讓我們添加一個圖標、關鍵字並為自定義塊選擇一個類別，如下所示。

那組，讓我們在自定義塊中添加一些字段。 對於我們的示例 CTA 塊，我們將按以下順序僅添加三個字段：一個圖像、一些文本和一個允許人們下載虛構電子書的文件字段

添加塊字段

在編輯器字段部分，單擊加號 (+)圖標以添加第一個字段，如下所示。

接下來，讓我們添加一個圖像字段。 從邊欄中，將字段類型設置為圖像並定義其他選項。 另外，請注意 slug（我將我的設置為image-field ），因為我們將在創建塊模板時使用它。 見下圖。

之後，以類似的方式添加文本和文件字段。

不要慶祝，還有一步要走。 切換到模板編輯器 > 標記：

我的已經有一些代碼，但你的將是空白的

在這裡，我們將設計您的自定義塊在您的網站上的外觀。 模板編輯器接受 HTML、CSS 和字段 slug（您必須將其括在 2 個括號中）。 如果您需要使用 PHP，您可以使用 PHP 模板方法創建模板。

別擔心，這很容易。

在Template Editor的Markup選項卡下（見上圖），添加以下 HTML 標記（代碼）：

 <div class="cta-block">
<div class="cta-image">
<img src ="{{圖像字段}}">
</div>
<div class="文本上傳">
<h2>{{文本字段}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">下載</button></a>
</div>
</div>

在編寫 HTML 標記時，您會注意到模板編輯器會為您自動完成字段段（例如 {{image-field}} ）

接下來，去CSS部分添加一些簡單的樣式。

您可以添加您想要的樣式，但這是我正在使用的：

 .cta塊{
文本對齊：居中；
背景顏色：橙色；
寬度：100%；
高度：自動；
邊框：2px 純橙色；
}

.dwnld {
背景顏色：黑色；
邊框：2px純黑色；
顏色：綠色；
填充：5px 10px；
文本對齊：居中；
顯示：內聯塊；
字體大小：20px；
邊距：10px 30px；
光標：指針；
邊框半徑：2px；

}

你都準備好了！ 點擊發布：

要查看您的新自定義塊的運行情況，請返回您的 WordPress 管理儀表板並導航到帖子 > 添加新的（它也適用於頁面）：

像往常一樣創建帖子，單擊加號 (+)添加新塊，然後選擇新的閃亮自定義塊，如下所示。

接下來，根據需要填寫您的自定義塊並發布您的帖子：

現在，如果我在前端查看我的新自定義 CTA 塊，我會看到：

我的自定義 CTA 就在那裡！ 請不要介意我的設計能力——當然，在現實生活場景中，你會想花一些額外的時間來設計你的塊。 但我希望你今天在這裡學到了一些東西。

使用 Genesis Custom Blocks 和 Lazy Blocks 等工具構建自定義塊不一定是一項具有挑戰性的任務。 除此之外，您還可以根據需要使自定義塊複雜或簡單。 如果您必須手動創建自定義塊，請學習一些 JavaScript 課程。 我會幫你的

有什麼想法或問題嗎？ 請在下面的評論中告訴我們。