為 WordPress 創建自定義 Gutenberg 塊

為 WordPress 創建自定義 Gutenberg 塊並不難。 事實上，只需一點代碼，您就可以創建自己的自定義塊，而無需使用插件。 Gutenberg 是 WordPress 的新編輯器，可讓您為內容創建自定義塊。 塊是您在古騰堡中的內容的構建塊。 它們可用於添加文本、圖像、視頻等。 要創建自定義塊，您需要使用文本編輯器（如 WordPress 代碼編輯器）或插件（如 Block Lab）。 擁有文本編輯器後，您可以在主題或插件目錄中創建一個新文件。 您需要做的第一件事是創建一個塊類型。 塊類型是定義塊行為方式的設置集合。 為此，您需要使用 register_block_type 函數。 一旦你有了塊類型，你就可以在 WordPress 中註冊它。 此函數將採用兩個參數：塊類型的名稱和包含塊設置的對象。 註冊塊類型後，您可以開始向其中添加字段。 字段是控制塊外觀和行為的設置。 要將字段添加到您的塊類型，您需要使用 add_field 函數。 將所需的所有字段添加到塊類型後，您可以將其註冊到 WordPress。 就是這樣！ 您現在已經為 WordPress 創建了一個自定義 Gutenberg 塊。

Gutenberg 塊編輯器是 WordPress 5.0 的增強功能之一。 古騰堡編輯器將內容分成塊，這些塊很容易重新排列。 大多數開發人員將無法創建原生設計的塊，因為他們缺乏 React 技能。 WordPress 開發者社區已經通過開發能夠滿足 React/JavaScript 要求的工具做出回應。 Block Lab 中的 Blocks 分三個階段創建：在管理員中添加它們，複製和粘貼它們，然後導出它們。 API 也可用於為您的塊創建自定義控件。 這可能沒什麼可看的，但它會讓您了解使用自定義 Gutenberg 塊可以做什麼。

要創建一個塊，我們需要創建一個名為 block-notification-bar.php 的新文件，其中包含一個標題（通知欄）和三個字段。 作為對該文件的響應，將出現一條通知消息，指示我們將自定義塊模板放置在我們的主題中。 在上傳文件之前，請確保它已保存並上傳到您的 Web 服務器。 現在已經為我們創建了一個自定義塊。 重要的是你實現了那個目標。 如果我們想擴展我們已經創建的內容，我們有很多選擇。 圖標、按鈕以及鏈接到另一個帖子或頁面的功能只是可以添加的一些功能。 所有這些能力都可以通過 Block Lab 以及上面提到的其他插件來實現。

WordPress 自定義塊插件

WordPress 有許多很棒的自定義塊插件。 每個插件都提供一組不同的功能和選項。 一些自定義塊插件允許您為帖子和頁面創建自定義塊，而其他插件則提供一組您可以使用的預先設計的塊。

通過將內容和佈局元素添加為塊，您可以使用 WordPress 輕鬆創建帖子和頁面。 WordPress 在其默認配置中提供了廣泛的塊。 但是，您可能想要創建自定義塊來完成特定任務。 本教程將引導您完成製作一個完全獨特的塊的步驟。 第一步是在您的推薦塊中插入三個字段。 單擊添加字段按鈕開始填寫第一個字段。 第二步是創建一個塊模板，它將準確地確定數據的顯示方式。

第三步是通過單擊 CSS 選項卡來設置塊輸出標記的樣式。 通過手動上傳模板，您可以創建自己的自定義塊。 在這種情況下，PHP 是與您的自定義塊字段交互的最佳方式。 只需使用上傳方法將編輯器模板上傳到您的主題。 首先，預覽您的自定義塊。 在預覽 HTML/CSS 之前，您必須提供一些測試數據。 創建一個使用 Gutenberg 塊定制的 WordPress 網站。

要搜索塊，請在單擊添加新塊按鈕後出現的框中鍵入其名稱或關鍵字。 您可以通過保存和編輯您的帖子和頁面來預覽該塊。 在我們的測試站點上，您可以看到推薦塊的外觀。

創建 Gutenberg Block React

有幾種方法可以在 React 中創建 Gutenberg 塊。 第一種方法是使用 create-guten-block CLI 工具。 這將為您搭建一個新的古騰堡街區。 要使用此方法，您需要在機器上安裝 Node.js 和 npm。 一旦你安裝了這些依賴項，你可以通過運行以下命令來創建一個新的 Gutenberg 塊： create-guten-block my-block 這將創建一個名為 my-block 的新目錄，其中包含 Gutenberg 塊的所有必要文件。 在 React 中創建 Gutenberg 塊的第二種方法是使用 @wordpress/block-editor 包。 該包包含一個名為 createBlock 的輔助函數，可用於創建 Gutenberg 塊。 要使用此方法，您需要在項目中安裝 @wordpress/block-editor 包。 一旦你安裝了這個包，你可以通過運行以下代碼來創建一個新的 Gutenberg 塊： import { createBlock } from '@wordpress/block-editor'; createBlock('my-block/my-block', { title: '我的塊', category: 'common', } ); 這將在 common 類別中創建一個名為 my-block 的新塊。 在 React 中創建 Gutenberg 塊的第三種方法是使用wp.blocks.createBlock 函數。 此函數是 WordPress JavaScript API 的一部分，可用於創建 Gutenberg 塊。 要使用此方法，您需要在項目中包含 wp-api-request 包。 一旦你安裝了這個包，你可以通過運行以下代碼來創建一個新的 Gutenberg 塊： import { wp } from 'wp'; wp.​​blocks.createBlock('my-block/my-block', { title: '我的塊', category: 'common', } ); 這將在 common 類別中創建一個名為 my-block 的新塊。

在本教程中了解如何為 Gutenberg 編輯器創建自定義塊。 您將使用自己創建的插件來完成任務。 儘管默認主題之一可用於創建自定義 Gutenberg 塊，但我們必須承認這是可能的。 在本教程中，我們將介紹如何使用 Gutenberg 創建新的自定義塊。 此外，我們將根據我們提供的設計偏好自定義前端和編輯器的外觀。 如果您不想花費大量時間創建塊，您可以簡單地添加一個，然後根據您的要求自定義它們。

React 易於在自定義主題中使用

React 是一個優秀的庫，用於使用 JavaScript 創建用戶界面。 WordPress 一直在使用它來支持新的 Gutenberg 編輯器，以及小部件管理屏幕和網站內容編輯功能的最新更新。 因為 React 已經嵌入在 WordPress 中，所以在自定義主題中使用起來很簡單。

Gutenberg 創建自定義按鈕塊

Gutenberg 創建自定義按鈕塊是為您的網站創建自定義按鈕的非常有用的工具。 使用此工具，您可以輕鬆創建既醒目又實用的按鈕。 這是為您的網站添加個人風格並使其脫穎而出的好方法。

在本教程中，您將學習如何在流行的應用程序中製作您的第一個簡單塊。 我們的 WordPress @create-block 應用程序是一個官方工具，可以讓我們快速生成 Javascript/PHP/CSS 代碼。 在交互模式下，您可以通過一系列步驟配置您的模塊。 當您剛剛了解古騰堡時，這可能非常有用。 如果您已經搭建了該塊，您現在可以通過代碼編輯器訪問新創建的目錄。 塊插件結構遵循目前的狀態（在編寫本教程時）。 我們將詳細介紹每個文件及其在本模塊中的使用。

命令行標誌是為命令行程序指定選項的常用方法。 在使用標誌之前，請將標誌目錄中的值替換為您要使用的值。 將在編輯器中排隊或應用的樣式表。 插件的基本細節進行了詳細討論。 WordPress 默認顯示插件信息。 為了告訴 Git 在創建版本控制項目時要忽略哪些文件，應該包含 Gitignore A. 文件。 存儲庫包含信息。 Config 允許開發人員在多個項目中保持一致的編碼風格。

WordPress 古騰堡插件開發

WordPress Gutenberg 插件是一個由志願者社區開發的開源項目。 任何人都可以為該項目做出貢獻並幫助它變得更好。 該插件不斷更新和改進。 如果您是開發人員，您可以通過開發新功能或修復錯誤來幫助為項目做出貢獻。

您可能聽說過 Gutenberg（WordPress 塊編輯器），但是您如何開始創建自己的插件呢？ 塊是使用簡單的 WordPress 腳本創建的。 此處創建的 WordPress 插件類型通常是一個塊，但它為過程中的其他人提供了一個很好的起點。 創建塊腳本可以用作模板來創建您自己的插件。 您可以在 WordPress 前端輕鬆看到該塊，但它具有不同的外觀以幫助您在後端習慣它。 該文件必須在資產編譯後才能在開發模式下生成。 /node_modules – 這是存儲插件的所有 JavaScript 相關參數的文件夾。

可以在此文件中找到包含有用的 Visual Studio Code (VDC) 環境的預設文件。 如果要創建插件，必須確保您位於 WordPress 插件文件夾中。 因此，您將能夠查看插件的開發和生產階段。 在編輯器中打開 /src/save.js 以將保存功能替換為以下內容： BlockText 可以以這種方式輸出為字符串。 必須將以下代碼添加到插件的根目錄才能在自定義塊類別中顯示您的塊。 registerBlockType.js 函數返回您的塊類別列表，然後可以使用插件的 registerBlockType.js 函數重新編譯。

古騰堡內容編輯

WordPress 用戶可以通過基於 React 構建的單頁應用程序 (SPA) 創建、編輯和刪除內容。 與傳統的內容編輯器相比，它提供了更流暢和用戶友好的界面。 如果您想要更強大的內容編輯器，古騰堡應用程序不適合您。 如果您喜歡更悠閒的外觀，您可以信賴古騰堡。

WordPress 自定義塊編輯器

您可以在您想要的任何帖子或頁面上使用此塊。 在“添加新塊”屏幕上，使用搜索框通過鍵入其名稱或關鍵字來查找您的塊。 將塊插入內容區域後，您將看到為此自定義塊創建的塊字段。

本教程將引導您完成在 WordPress 中創建功能齊全的自定義塊編輯器實例的過程。 該編輯器將完全構建在稱為塊編輯器的自定義 WP 管理頁面中（以最具創意的方式）。 在我們的 WordPress Plug-A-Thon 中，我們將創建一個編輯器。 我們現在必須使用塊編輯器的 React 組件在我們的自定義頁面中生成一些 HTML。 作為第三個參數，我們使用腳本依賴項 ($script_asset['dependencies']) 行。 它將確保與 WordPress 相關的腳本不包含在構建的捆綁包中。 我們還必須註冊我們的自定義 CSS 樣式和 WordPress 默認格式庫才能使用它們。

這允許我們使用 JavaScript 在頁面的 HTML 中生成塊編輯器。 當這個組件被稱為 BlockEditor 時，魔法就會發生。 可以在不創建 JS 全局的情況下從 PHP 渲染編輯器。 編輯器的佈局是建立在腳手架上的，正如您在此處看到的，除了一些專門的上下文提供程序。 Block EditorProvider 是 WordPress 塊編輯器包中最重要的組件。 正如我們之前所解釋的，這為全新的塊編輯器在塊編輯的上下文中提供了一個新的上下文。 它通過訂閱提供的註冊表（通過 withRegistry Provider HOC）、偵聽塊更改事件、確定塊更改是否保持持久以及在必要時調用 onChange 輸入處理程序來完成此操作。

最有趣的組件是 BlockList 組件，它將塊列表添加到編輯器中。 值得詳細研究這些組件，因為它們是最複雜和最複雜的部分。 要了解有關我們自定義 EditorBlock 組件的更多信息，請參閱以下文章。 Slot/fill 是通過利用我們的 Blockeditor 組件（見上文）在其中公開一個 Fill（Sidebar.InspectorFill）來實現的，我們隨後將其導入並渲染到實現中。 因此，React 允許我們將檢查組件保留在其 DOM 中，同時將其渲染到單獨位置的標記中（例如，在側邊欄中）。 塊也可以在 LocalStorage 中的 getdavesbeBlocks 鍵下找到。

該數據被序列化為塊語法格式，這意味著它可以存儲在字符串中。 GitHub 已經為自定義功能塊編輯器編譯了整個代碼。 該程序可以免費下載和試用。