使用 Blockstudio 和 ACF 輕鬆自定義 Gutenberg 模塊

在這篇快速文章中，我想了解如何使用 Blockstudio 創建自定義 Gutenberg Block。 Blockstudio 是一個現代且靈活的 WordPress 塊框架。 隨著 Gutenberg 的採用，快速創建自定義塊的能力變得越來越重要。 這是創建它們的一種非常簡單的方法 - 雖然您需要編寫代碼來完成它，但使用 BS （與其他方法相比）更簡單有效。

該工具不僅可以輕鬆添加塊，還可以輕鬆生成自定義字段（您可以選擇 ACF Pro 或 Metabox 塊），將信息保存到數據庫，並輕鬆應用內聯樣式和腳本。

讓我們快速看一下如何在 5 分鐘內使用此框架製作自定義 Gutenberg 塊（PS - 我以前從未製作過自定義塊）。

製作積木的過程

對於這個網站，我需要一種簡單的方法來添加自定義代碼，這些代碼將以易於理解的界面顯示在前端。

幾個月來，我一直在使用 SPX 代碼塊 HTML 元素（這是上面使用的）。 這是一個非常簡單的實現，並且在我使用 SPX 與 Oxygen 進行一些效果時已經安裝在這個網站上。 但是，SPX 沒有 Gutenberg 元素。 因為它是一個 HTML 元素，所以我會在 Gutenberg 中插入一個 HTML 框，然後像這樣實現代碼顯示：

它有效，但我想要一個專門用於古騰堡的代碼塊。 所以，我用 Blockstudio + ACF 來做這個：

（這是我在 Gutenberg 中用來將代碼塊插入這篇文章的塊）

我的新塊本質上提供了一個可視 GUI 來插入代碼，就像我使用 HTML 所做的那樣。 但是，此塊使其更易於管理，並且還直接在 Gutenberg 中提供了一個很酷的代碼編輯器字段。

這是如何完成的：

首先，我在 Isotropic 上安裝了 Blockstudio（插件）。 通常，它會在您的主題中尋找一個文件夾來加載您的自定義塊文件。 但是，本網站所基於的 Oxygen Builder 完全禁用了主題，因此我需要從這個官方樣板創建一個自定義插件，以便它在本網站上工作。

如果您從該源安裝它，您需要做的就是開始將塊添加到“塊”文件夾 - 那裡已經有一個演示塊供您試用。

使用此框架創建塊的過程有 3 個步驟 - 設置、添加字段，然後添加標記。

對我來說，我在 Blocks 文件夾中創建了一個名為iso-custom-code.php的文件，並插入了以下代碼（非常簡單！）：

最初的代碼塊為 Gutenberg 提供了在編輯器中註冊塊所需的所有信息。 例如，您可以給它一個標題和一個圖標。 從那裡，我添加了兩個自定義字段。 第一個是一個單選字段，您可以使用它來選擇代碼類型。 第二個字段是代碼編輯器字段。

這不是標準的 ACF 字段，而是使用通用 ACF 方法添加自定義字段類型的第三方插件。 Blockstudio 真正酷的地方在於，這個自定義字段開箱即用，並直接顯示在 Gutenberg 編輯器中。

值得注意的是，您實際上是直接在此塊中註冊自定義字段。 您可以選擇將字段組應用於帖子類型，但無需進入 ACF 用戶界面並在那裡創建任何字段，因為它是在此代碼的第二塊中完成的。

添加字段的方式與使用普通 PHP 相同，並且文檔相對容易理解。 你可能甚至不需要知道這種編程語言就能弄清楚 - https://www.advancedcustomfields.com/resources/register-fields-via-php/

實際的標記只是自定義 ACF 字段的標準 HTML 和 PHP 插入。 保存後，自定義的 Gutenberg Block 將顯示在編輯器中，並在前端呈現。 這裡絕對沒有臃腫，自定義塊文件中定義的標記是將顯示在網站前端的標記。

最後一個好處是您可以使用本機 Gutenberg 功能，因為您製作的塊是真正的 Gutenberg 塊。 您可以復制和粘貼、製作可重複使用等。 合理地，您可以僅在古騰堡使用此工具構建整個網站。 也沒有供應商鎖定。

對 BlockStudio 的思考

就個人而言，我正在使用 Gutenberg 來管理、構建和構建該網站上的所有博客文章。 但是，對於總體站點設計和模板，使用了 Oxygen Builder。

Blockstudio 附帶了一個包含一些構建良好的塊的庫，您可以將其用作自己創作的起點。 這真的很酷，因為它為您提供了大量的代碼示例，然後您可以使用這些示例修改您想要構建的內容。 當然，它是一個框架，了解底層 PHP 及其工作原理將使您的生活更輕鬆，但在我看來，您無需了解它即可使用此工具構建塊。 您只需要知道如何從各種文檔、示例和來源中復制和粘貼。

ACF 和 Blockstudio 文檔都寫得非常好，而且易於理解。 如果您更熟悉 MetaBox 自定義字段插件，那麼該插件也可以正常工作。

我認為這個工具的靈活性和強大的價格是合理的。 我最近才開始使用它，我很高興能試用 Twind 和 Alpine 等高級功能。