構建自定義古騰堡塊：權威塊開發教程

許多人抱怨開始構建古騰堡積木和應用程序的障礙。 學習曲線陡峭，主要是由於開發環境的安裝和配置困難。 此外，紮實的 JavaScript、Node.js、React 和 Redux 知識是這個相當複雜的秘訣的必備要素。

官方的 WordPress 塊編輯器手冊為開發人員提供了大量信息，但您可能會發現自己迷失在這些細節的海洋中。

值得一提的是，古騰堡項目的首席架構師 Matias Ventura 在接受 WP Tavern 採訪時報告說：

雖然有些人可以快速學習它，但這對人們來說仍然是一個很大的障礙。 我認為這有幾個層次； 文檔在組織和演示方面可能要好一個數量級。 我希望我們可以在那裡做更多的事情。

考慮到這一點，我們決定提供一個分步教程，旨在幫助我們的讀者開始使用 Gutenberg 塊開發。

聽起來很有趣？ 讓我們潛入吧！

古騰堡區塊開發先決條件

對於本教程，唯一需要的技能是對 WordPress 插件開發有很好的了解，並且至少對 HTML、CSS、JavaScript 和 React 有基本的了解。

這會是一個雄心勃勃的項目嗎？ 你打賭它會的！

在完整性和簡單性之間找到正確的折衷方案或決定包含哪些主題和省略哪些主題並不容易。

希望中高級讀者能夠原諒我們沒有深入研究某些概念，例如 React 狀態、Redux 存儲、高階組件等。 這些主題需要額外的空間和注意力，並且可能對於開始塊開發來說太高級了（除非您是 React 開發人員）。

出於同樣的原因，我們不會涵蓋與 Gutenberg 塊開發相關的一些更高級的主題，例如動態塊和元框。

有了本文結尾您將獲得的知識，您將能夠立即開始享受樂趣並提高工作效率。

一旦您開始構建積木，您將準備好進一步提高您的技能並自行構建更高級的古騰堡積木。

什麼是古騰堡街區？

自 2018 年 12 月首次發布以來，塊編輯器在各個方面都得到了極大的改進：更強大的 API、更高級的用戶界面、改進的可用性、大量新塊、全站點編輯的首次實現等等.

簡而言之，即使古騰堡仍在大力開發中，它也已經走過了漫長的道路——如今，塊編輯器已成為可靠的功能性頁面和網站構建器的成熟候選者。

從開發人員的角度來看，Gutenberg 是一個基於 React 的單頁應用程序 (SPA)，它允許 WordPress 用戶在 WordPress 中創建、編輯和刪除內容。 但是，這不應該讓您想到傳統內容編輯器的增強版本。

我們想明確這一點：

在古騰堡，內容被劃分為塊，這些塊是用戶可以用來創建帖子和頁面或整個網站的“磚塊”。

但從技術上講，什麼是塊？

我們喜歡 WordPress 的定義：

“塊”是用於描述標記單元的抽象術語，這些標記單元組合在一起形成網頁的內容或佈局。 這個想法將我們今天在 WordPress 中實現的概念與短代碼、自定義 HTML 和嵌入發現結合到一個一致的 API 和用戶體驗中。

標題、段落、列、圖像、畫廊以及構成編輯器界面的所有元素，從側邊欄面板到塊工具欄控件，都是 React 組件。

那麼，什麼是 React 組件？ W3Schools 提供以下定義：

組件是獨立且可重用的代碼。 它們的用途與 JavaScript 函數相同，但獨立工作並通過render()函數返回 HTML。

雖然 Gutenberg 提供的編輯體驗與經典的 WordPress 編輯器相比是全新的，但 WordPress 將您的內容片段存儲在數據庫中的方式根本沒有改變。 這是因為 Gutenberg 是一個在 WordPress 中運行的應用程序，但不會改變 CMS 的核心工作方式。

使用 Gutenberg 創建的帖子（包括帖子、頁面和自定義帖子類型）仍存儲在wp_posts表中，與經典編輯器完全相同。

但是在使用 Gutenberg 創建的帖子中，您會在表格中找到更多信息，這些信息代表了通過 Classic Editor 與 Gutenberg 創建的帖子之間的根本區別。

這些信息看起來像 HTML 註釋，它們有一個特定的功能：分隔塊：

塊分隔符告訴 WordPress 要在屏幕上呈現什麼塊。 它們還為 JSON 對像中的塊屬性提供值。 這些道具決定了塊應該在屏幕上呈現的方式：

設置您的 WordPress 開發環境

設置現代 JavaScript 開發環境需要紮實的高級技術知識，例如 Webpack、React 和 JSX、Babel、ESLint 等。

被嚇倒了？ 不要！ WordPress 社區已經通過提供強大的工具來幫助您避免混亂的手動配置過程。

為簡單起見，我們不會在本文中介紹轉譯（不過，我們建議您在了解塊開發的基礎知識後熟悉一下）。 相反，我們將介紹兩種替代工具，您可以使用它們在幾分鐘內快速輕鬆地設置現代 JavaScript 開發環境。 您可以選擇對您的項目最方便的一個。

設置 JavaScript 開發環境以構建 Gutenberg 塊是一個三步過程：

1. 安裝 Node.js 和 npm
2. 設置開發環境
3. 設置塊插件

讓我們開始吧。

1. 安裝 Node.js 和 npm

在安裝您的開發環境並註冊您的第一個塊之前，您需要安裝 Node.js 和 Node 包管理器 (npm)。

您可以通過幾種不同的方式安裝 Node.js 和 npm。 但首先，您可能需要檢查該軟件是否已安裝在您的計算機上。

為此，請啟動終端並運行以下命令：

 node -v

如果結果是command not found ，則說明您的計算機上沒有安裝 Node.js，您可以繼續安裝。

對於本文，我們選擇了最簡單的安裝選項，即 Node Installer。 您需要做的就是下載與您的操作系統相對應的版本並啟動安裝嚮導：

安裝 Node.js 後，再次在終端中運行命令node -v 。 你也可以運行npm -v命令來確認你有可用的 npm 包。

您現在配備了以下工具：

• npx Node.js 包運行器（請參閱文檔）。 這允許您運行npm命令而無需先安裝它。
• npm Node.js 包管理器（參見文檔）。 這用於安裝依賴項和運行腳本。

下一步是安裝開發環境。

2. 設置你的開發環境

在本地計算機上安裝最新版本的 Node.js 和 npm 後，您將需要一個 WordPress 開發環境。

您可以使用 DevKinsta 等本地開發環境，也可以使用官方 WordPress 工具。 讓我們來看看這兩種選擇。

選項 1：本地開發環境 (DevKinsta)

只需單擊幾下，您就可以使用我們現代的本地 WordPress 開發工具 DevKinsta 在本地安裝 WordPress。 或者您可以選擇不同的本地開發工具，例如 MAMP 或 XAMPP：

選項 2：wp-env

您還可以選擇官方的wp-env工具，它提供了一個本地 WordPress 開發環境，您可以直接從命令行啟動。 Noah Alen 是這樣定義的：

本地 WordPress 環境現在就像運行單個命令一樣簡單。 wp-env是用於無痛本地 WordPress 環境的零配置工具。 它提供有關選項的決策，以便用戶可以快速啟動 WordPress 而不會浪費時間。 事實上，我們的目標是讓所有人都能輕鬆訪問這些環境——無論您是開發人員、設計師、經理還是其他任何人。

如果你決定試一試，安裝wp-env需要最少的努力。 只需按照以下步驟操作：

第 1 步：確認 Docker 和 Node.js 安裝

為了滿足技術要求，您首先需要在您的計算機上安裝 Docker 和 Node.js。 這是因為wp-env創建了一個運行 WordPress 網站的 Docker 實例。 對代碼所做的任何更改都會立即反映在 WordPress 實例中。

第 2 步：從命令行安裝@wordpress/env

在您的計算機上運行 Docker 和 Node.js，您可以繼續安裝 WordPress 開發環境。

您可以在全局或本地安裝wp-env 。 要在全局範圍內執行此操作，您需要從插件目錄中運行以下命令（更多信息請參見下面的“重要”通知框）：

 npm install -g @wordpress/env

讓我們分解一下：

• npm install安裝包。
• 附加到命令的-g全局安裝指定的包。
• @wordpress/env是你要安裝的包。

要確認wp-env已成功安裝，請運行以下命令：

 wp-env --version

您應該會看到當前的wp-env版本，這意味著您現在可以使用插件文件夾中的以下命令啟動環境：

 wp-env start

您可以使用以下地址訪問 WordPress 儀表板：

• http://localhost:8888/wp-admin/

默認憑據如下：

• 用戶名： admin
• 密碼： password

設置你的塊插件

現在您需要一個入門塊插件來構建。 但是，您無需手動創建包含所有必要文件和文件夾的開發塊插件，您只需運行一個開發工具，即可提供開始塊開發所需的所有文件和配置。

同樣，您有幾個選項可供選擇。 讓我們來看看每一個。

選項 1：使用 @wordpress/create-block 設置塊插件

@wordpress/create-block 是用於創建 Gutenberg 塊的官方零配置工具：

創建塊是一種官方支持的創建塊的方法，用於為 WordPress 插件註冊塊。 它提供了一個沒有配置的現代構建設置。 它生成 PHP、JS、CSS 代碼以及啟動項目所需的所有其他內容。

它很大程度上受到 create-react-app 的啟發。 向@gaearon、整個 Facebook 團隊和 React 社區致敬。

本地環境啟動並運行後，您可以通過簡單地運行npx @wordpress/create-block命令來設置起始塊，它將提供創建插件腳手架和註冊新塊所需的所有文件和文件夾.

讓我們運行一個測試，看看它是如何工作的。

從命令行工具導航到/wp-content/plugins/目錄並運行以下命令：

 npx @wordpress/create-block my-first-block

當要求確認時，輸入y繼續：

該過程需要一些時間。 完成後，您應該得到以下響應：

就是這樣！

現在啟動您的 WordPress 開發環境並轉到 WordPress 儀表板中的插件屏幕。 一個名為“My First Block”的新插件應該已添加到您的插件列表中：

如果需要，激活插件，創建一個新的博客文章，向下滾動塊插入器到小部件部分，然後選擇你的新塊：

現在返回終端並將當前目錄更改為my-first-block ：

 cd my-first-block

然後運行以下命令：

 npm start

這使您能夠在開發模式下運行插件。 要創建生產代碼，您應該使用以下命令：

 npm run build

選項 2：使用 create-guten-block 設置塊插件

create-guten-block是用於構建 Gutenberg 塊的第三方開發工具：

create-guten-block是零配置開發工具包（#0CJS），無需配置 React、webpack、ES6/7/8/Next、ESLint、Babel 等即可在幾分鐘內開發 WordPress Gutenberg 塊。

就像官方的create-block工具一樣， create-guten-block是基於 create-react-app 的，可以幫助您輕鬆生成您的第一個塊插件。

該工具包提供了創建現代 WordPress 插件所需的一切，包括：

• React、JSX 和 ES6 語法支持。
• 幕後的 webpack 開發/生產構建過程。
• ES6 之外的語言附加功能，例如對象擴展運算符。
• 自動前綴 CSS，因此您不需要 -webkit 或其他前綴。
• 一個構建腳本，用於將 JS、CSS 和圖像與源映射捆綁在一起進行生產。
• 使用單個依賴項 cgb-scripts 對上述工具進行無憂更新。

請注意以下警告：

權衡是這些工具已預先配置為以特定方式工作。 如果您的項目需要更多自定義，您可以“彈出”並自定義它，但是您需要維護此配置。

一旦你手頭有一個本地 WordPress 網站，啟動你的命令行工具，導航到你安裝的/wp-content/plugins文件夾，然後運行以下命令：

 npx create-guten-block my-first-block

在創建項目結構並下載依賴項時，您必須等待一兩分鐘：

該過程完成後，您應該會看到以下屏幕：

下圖顯示了在 Visual Studio Code 中運行終端的項目結構：

現在回到您的 WordPress 儀表板。 插件屏幕中應該會列出一個新項目——它是my-first-block插件：

激活插件並返回終端。 將當前目錄更改為my-first-block ，然後運行npm start ：

 cd my-first-block npm start

您應該得到以下響應：

同樣，這使您能夠在開發模式下運行插件。 要創建生產代碼，您應該使用：

 npm run build

激活插件並創建一個新帖子或頁面，然後瀏覽您的區塊並選擇您全新的古騰堡區塊：

如需更深入的概述或出現錯誤，請參閱 Ahmad Awais 提供的文檔。

入門塊腳手架的演練

無論您選擇兩個開發工具中的哪一個（ create-block或create-guten-block ），您現在都有一個塊腳手架，您可以將其用作構建塊插件的起點。

但究竟什麼是塊腳手架？

塊腳手架是一個簡寫術語，描述了 WordPress 識別塊所需的支持目錄結構。 通常，該目錄包括index.php 、 index.js 、 style.css等文件，而這些文件又包含諸如register_block_type之類的調用。

我們選擇了官方的創建塊開發工具，因為它在塊編輯器手冊中使用。 但是，即使您決定使用像create-guten-block這樣的第三方工具，您的體驗也不會有太大的不同。

話雖如此，讓我們更深入地研究create-block工具。

仔細查看 Create Block 開發工具

正如我們上面提到的，創建塊是創建古騰堡塊的官方命令行工具。 在終端中運行@wordpress/create-block會生成註冊新塊類型所需的 PHP、JS 和 SCSS 文件和代碼：

 npx @wordpress/create-block [options] [slug]

• [slug] (可選) — 用於分配塊 slug 並安裝插件
• [options] （可選）- 可用選項

默認情況下，分配一個 ESNext 模板。 這意味著您將獲得 JavaScript 的下一個版本，並添加了 JSX 語法。

如果您省略塊名稱，該命令將以交互模式運行，使您能夠在生成文件之前自定義多個選項：

 npx @wordpress/create-block

下圖顯示了使用官方創建塊工具創建的塊插件的文件結構：

話雖如此，讓我們瀏覽一下新塊插件的主要文件和文件夾。

插件文件

使用主插件文件在服務器上註冊塊：

 /** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

register_block_type函數使用存儲在block.json文件中的元數據在服務器上註冊塊類型。

該函數有兩個參數：

• 包含命名空間的塊類型名稱，或block.json文件所在文件夾的路徑，或完整的WP_Block_Type對象
• 一組塊類型參數

在上面的代碼中，塊類型參數由__DIR__魔術常量提供。 這意味著block.json文件與插件文件位於同一文件夾中。

package.json 文件

package.json 文件為您的項目定義 JavaScript 屬性和腳本。 這是您可以安裝項目依賴項的地方。

為了更好地理解此文件的用途，請使用您喜歡的代碼編輯器打開它：

 { "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { "build": "wp-scripts build", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

scripts屬性是一個字典，其中包含使用npm run [cmd]在包的生命週期中的不同時間運行的命令。

在本文中，我們將使用以下命令：

• npm run build — 創建一個（壓縮的）生產版本
• npm run start — 創建一個（未壓縮的）開發版本

dependencies和devDependencies是將包名稱映射到版本的兩個對象。 在生產中需要dependencies項，而devDependences僅在本地開發中需要（閱讀更多）。

唯一的默認開發依賴項是@wordpress/scripts包，它被定義為“為 WordPress 開發量身定制的可重用腳本的集合”。

block.json 文件

從 WordPress 5.8 開始， block.json元數據文件是註冊塊類型的規範方法。

擁有一個block.json文件有幾個好處，包括提高性能和在 WordPress 插件目錄上更好的可見性：

從性能的角度來看，當主題支持延遲加載資產時，使用block.json註冊的塊將對其資產排隊進行開箱即用的優化。 style或script屬性中列出的前端 CSS 和 JavaScript 資產僅在頁面上存在塊時才會排隊，從而減少頁面大小。

運行@wordpress/create-block命令會生成以下block.json文件：

 { "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

以下是默認屬性的完整列表：

• apiVersion — 區塊使用的 API 版本（當前版本為 2）
• name — 包含命名空間的塊的唯一標識符
• version — 塊的當前版本
• title — 塊的顯示標題
• category — 塊類別
• icon — Dashicon slug 或自定義 SVG 圖標
• description — 在塊檢查器中可見的簡短描述
• supports — 一組用於控制編輯器中使用的功能的選項
• textdomain — 插件文本域
• editorScript — 編輯器腳本定義
• editorStyle — 編輯器樣式定義
• style — 為塊提供替代樣式

除了上面列出的屬性之外，您還可以（並且可能會）定義一個attributes對象，以提供有關您的塊存儲的數據的信息。 在您的block.json 中，您可以在鍵/值對中設置任意數量的屬性，其中鍵是屬性名稱，值是屬性定義。

看看下面的屬性定義示例：

 "attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

我們將在本文後面深入研究block.json文件，但您可能還需要查看塊編輯器手冊以獲取有關block.json元數據和屬性的更多詳細信息。

src 文件夾

src文件夾是開發發生的地方。 在該文件夾中，您將找到以下文件：

• index.js
• 編輯.js
• 保存.js
• 編輯器.scss
• 樣式.scss

index.js

index.js文件是您的起點。 在這裡，您將導入依賴項並在客戶端上註冊塊類型：

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

第一條語句從@wordpress/blocks包中導入registerBlockType函數。 以下導入語句將樣式表與Edit和save功能一起導入。

registerBlockType函數在客戶端註冊組件。 該函數有兩個參數：一個塊名稱namespace/block-name （與在服務器上註冊的相同）和一個塊配置對象。

Edit函數提供了在塊編輯器中呈現的塊界面，而save函數提供了將被序列化並保存到數據庫中的結構（閱讀更多）。

編輯.js

edit.js是您構建塊管理界面的地方：

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

首先，它從@wordpress/i18n包（該包包含翻譯函數的 JavaScript 版本）、 useBlockProps React 鉤子和editor.scss文件中導入__函數。

之後，它會導出 React 組件（閱讀有關導入和導出語句的更多信息）。

保存.js

save.js文件是我們構建要保存到數據庫中的塊結構的位置：

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scss 和 style.scss

除了腳本之外，還有兩個 SASS 文件位於src文件夾中。 editor.scss文件包含應用於編輯器上下文中塊的樣式，而style.scss文件包含用於在前端顯示的塊的樣式。 我們將在本指南的第二部分深入研究這些文件。

node_modules 和構建文件夾

node_modules文件夾包含節點模塊及其依賴項。 我們不會深入研究節點包，因為它超出了本文的範圍，但您可以在本文中閱讀更多關於 npm 安裝包的位置的文章。

build文件夾包含構建過程產生的 JS 和 CSS 文件。 您可以在 ESNext 語法和 JavaScript 構建設置指南中深入了解構建過程。

項目：建造你的第一個古騰堡街區

是時候弄髒我們的手了。 本節將教你如何創建一個插件，提供一個名為 Affiliate Block 的 CTA 塊。

該塊將由兩列組成，左側是圖像，右側是文本段落。 帶有可自定義鏈接的按鈕將放置在文本下方：

這只是一個簡單的示例，但它允許我們涵蓋古騰堡區塊開發的基礎知識。 一旦你清楚地了解了基礎知識，你就可以在塊編輯器手冊和任何其他可用的大量資源的幫助下繼續創建越來越複雜的古騰堡塊。

假設您在本地開發環境中運行了最新版本的 WordPress，以下是您將從這裡學到的內容：

• 如何設置 Starter Block 插件
• 工作中的 block.json
• 使用內置組件：RichText 組件
• 向塊工具欄添加控件
• 自定義塊設置側邊欄
• 添加和自定義外部鏈接
• 添加多個塊樣式
• 使用 InnerBlocks 組件嵌套塊
• 其他改進

預備，準備，開始！

如何設置 Starter Block 插件

啟動命令行工具並導航到/wp-content/plugins文件夾：

現在，運行以下命令：

 npx @wordpress/create-block

此命令生成用於在交互模式下註冊塊的 PHP、SCSS 和 JS 文件，使您可以輕鬆地為您的塊添加必要的數據。 對於我們的示例，我們將使用以下詳細信息：

• 塊蛞蝓：我的附屬塊
• 內部命名空間：my-affiliate-plugin
• 塊顯示標題：附屬塊
• 簡短的塊描述：Kinsta 閱讀器的示例塊
• Dashicon ：錢
• 類別名稱：設計
• 插件作者：你的名字
• 執照: –
• 鏈接到許可證文本：-
• 當前插件版本：0.1.0

安裝插件和所有依賴項需要幾分鐘。 該過程完成後，您將看到以下響應：

現在，從/wp-content/plugins文件夾運行以下命令：

 cd my-affiliate-block

最後，在您的插件文件夾中（在我們的示例中為 my-affiliate-block ），您可以使用以下命令開始開發：

 npm start

現在打開插件屏幕以查找並激活Affiliate Block插件：

創建一個新帖子，打開塊插入器，然後向下滾動到設計類別。 單擊以添加會員塊：

工作中的 block.json

正如我們前面提到的，服務器端塊註冊發生在主.php文件中。 但是，我們不會在.php文件中定義設置。 相反，我們將使用block.json文件。

因此，再次打開block.json並仔細查看默認設置：

 { "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

腳本和样式

editorScript 、 editorStyle和style屬性提供了前端和後端腳本和样式的相對路徑。

您不必手動註冊此處定義的腳本和样式，因為它們是由 WordPress 自動註冊和排隊的。 為了證明這一點，啟動瀏覽器檢查器並打開網絡選項卡：

從上圖中可以看出，我們駐留在build文件夾中的index.js腳本已定期排入隊列，而無需添加任何 PHP 代碼。

用戶界面標籤

title和description屬性提供了在編輯器中識別塊所需的標籤：

關鍵詞

正如我們前面提到的，您可以使用屬性和屬性準確配置塊設置。 例如，您可以添加一個或多個keywords來幫助用戶搜索塊：

 { "keywords": [ "kinsta", "affiliate", "money" ] }

如果您現在在快速插入器中輸入“kinsta”、“affiliate”或“money”，編輯器會建議您使用 Affiliate 塊：

本土化

If you are wondering how the localization of the strings in the JSON file happens, here is the answer:

In JavaScript, you can use now registerBlockTypeFromMetadata method from @wordpress/blocks package to register a block type using the metadata loaded from block.json file. All localized properties get automatically wrapped in _x (from @wordpress/i18n package) function calls similar to how it works in PHP with register_block_type_from_metadata . The only requirement is to set the textdomain property in the block.json file.

Here we are using the registerBlockType function instead of registerBlockTypeFromMetadata , as the latter has been deprecated since Gutenberg 10.7, but the mechanism is the same.

Using Built-In Components: The RichText Component

The elements that make up a Gutenberg block are React components, and you can access these components via the wp global variable. For example, try to type wp.editor into your browser's console. This will give you the full list of the components included in the wp.editor module.

Scroll through the list and guess what components are meant for by their names.

Similarly, you can check the list of components included in the wp.components module:

Now go back to the edit.js file and take a closer look at the script:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

此代碼生成一個帶有簡單、不可編輯文本的靜態塊。 但是我們可以很容易地改變：

要使文本可編輯，您必須將當前<p>標記替換為使輸入內容可編輯的組件。 為此，Gutenberg 提供了內置的 RichText 組件。

將內置組件添加到塊中需要 5 個步驟：

1. 從 WordPress 包中導入所需的組件
2. 在 JSX 代碼中包含相應的元素
3. 在 block.json 文件中定義必要的屬性
4. 定義事件處理程序
5. 保存數據

第 1 步：從 WordPress 包中導入所需的組件

現在打開edit.js文件並更改以下import語句：

 import { useBlockProps } from '@wordpress/block-editor';

…到：

 import { useBlockProps, RichText } from '@wordpress/block-editor';

這樣，您將從@wordpress/block-editor包中導入useBlockProps函數和RichText組件。

使用BlockProps

useBlockProps React 鉤子標記了塊的包裝元素：

使用 API 版本 2 時，您必須在塊的edit函數中使用新的useBlockProps掛鉤來標記塊的包裝器元素。 該鉤子將插入啟用塊行為所需的屬性和事件處理程序。 您希望傳遞給塊元素的任何屬性都必須通過useBlockProps傳遞，並將返回的值傳播到元素上。

簡單地說， useBlockProps自動將屬性和類分配給包裝元素（我們示例中的p元素）：

如果您從包裝元素中刪除useBlockProps ，您將擁有一個簡單的文本字符串，無法訪問塊功能和样式：

正如我們稍後將解釋的，您還可以將屬性對像傳遞給useBlockProps以自定義輸出。

富文本

RichText 組件提供了一個 contenteditable 輸入，允許用戶編輯和格式化內容。

您可以在 GitHub 上的 gutenberg/packages/block-editor/src/components/rich-text/README.md 中找到該組件。

第 2 步：在 JSX 代碼中包含相應的元素

... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

讓我們逐行註釋代碼：

• tagName — 可編輯 HTML 元素的標籤名稱
• onChange — 元素內容改變時調用的函數
• allowedFormats — 允許格式的數組。 默認情況下，允許所有格式
• value — 要編輯的 HTML 字符串
• placeholder — 當元素為空時顯示的佔位符文本

第 3 步：在 block.json 文件中定義必要的屬性

屬性提供有關塊存儲的數據的信息，例如豐富的內容、背景顏色、URL 等。

您可以在鍵/值對中的attributes對像中設置任意數量的屬性，其中鍵是屬性名稱，值是屬性定義。

現在打開block.json文件並添加以下attributes道具：

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

content屬性允許將用戶輸入的文本存儲在可編輯字段中：

• type表示屬性存儲的數據類型。 除非您定義enum屬性，否則該類型是必需的。
• source定義如何從帖子內容中提取屬性值。 在我們的示例中，它是 HTML 內容。 請注意，如果您不提供源屬性，則數據將存儲在塊分隔符中（閱讀更多）。
• selector是一個 HTML 標記或任何其他選擇器，例如類名或 id 屬性。

我們將向Edit函數傳遞一個屬性對象。 因此，返回到edit.js文件並進行以下更改：

 export default function Edit( { attributes, setAttributes } ) { ... }

第 4 步：定義事件處理程序

RichText元素有一個onChange屬性，提供了一個在元素內容更改時調用的函數。

讓我們定義該函數並查看整個edit.js腳本：

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

現在保存文件並在終端窗口中運行npm run start 。 然後，返回您的 WordPress 儀表板，創建一個新帖子或頁面並添加您的會員塊：

添加一些文本並切換到代碼視圖。 這是您的代碼應如下所示：

 <!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

如果您現在保存頁面並檢查前端結果，您可能會有點失望，因為您的更改不會影響站點。 那是因為您必須修改save.js文件以在保存帖子時將用戶輸入存儲在數據庫中。

第 5 步：保存數據

現在打開save.js文件並更改腳本如下：

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

這就是我們在這裡所做的：

• 從block-editor包中導入RichText組件。
• 通過對象參數將多個屬性傳遞給save函數（在此示例中，我們僅傳遞attributes屬性）
• 返回RichText組件的內容

您可以在塊編輯器手冊中閱讀有關RichText組件的更多信息，並在 Github 上找到完整的道具列表。

現在讓我們更進一步。 在下一節中，您將學習如何將控件添加到塊工具欄。

向塊工具欄添加控件

塊工具欄包含一組控件，允許用戶操作部分塊內容。 對於每個工具欄控件，您都會找到一個組件：

例如，您可以為塊添加文本對齊控件。 您需要做的就是從@wordpress/block-editor包中導入兩個組件。

我們將執行與上一個示例相同的步驟：

1. 從 WordPress 包中導入所需的組件
2. 在 JSX 代碼中包含相應的元素
3. 在block.json文件中定義必要的屬性
4. 定義事件處理程序
5. 保存數據

第 1 步：從 @wordpress/block-editor 導入 BlockControls 和 AlignmentControl 組件

要將對齊控件添加到塊工具欄，您需要兩個組件：

• BlockControls呈現控件的動態工具欄（未記錄）。
• AlignmentControl呈現一個下拉菜單，顯示所選塊的對齊選項（閱讀更多）

打開edit.js文件，編輯import語句，如下圖：

 import { useBlockProps, RichText, AlignmentControl, BlockControls } from '@wordpress/block-editor';

第 2 步：添加 BlockControls 和 AlignmentControl 元素

轉到Edit函數並在<RichText />的同一級別插入<BlockControls />元素。 然後在<BlockControls />中添加和<AlignmentControl /> > ：

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

在上面的代碼中， <>和</>是聲明 React 片段的簡短語法，這是我們在 React 中返回多個元素的方式。

在本例中， AlignmentControl有兩個屬性：

• value提供元素的當前值
• onChange提供了一個事件處理程序以在值更改時運行

我們還為RichText元素定義了其他屬性（請查看完整的屬性列表和示例）

第三步：在block.json中定義align屬性

現在轉到block.json文件並添加align屬性：

 "align": { "type": "string", "default": "none" }

返回終端，使用^C停止當前進程並使用npm run start再次啟動腳本。 然後返回塊編輯器，刷新頁面並選擇塊。 您應該會看到帶有對齊控件的塊工具欄：

現在，如果您嘗試使用新的對齊控件格式化塊內容，您會發現沒有任何反應。 那是因為我們還沒有定義事件處理程序。

第 4 步：定義事件處理程序

現在定義onChangeAlign ：

 const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

如果newAlign是undefined ，那麼我們將newAlign設置為none 。 否則，我們使用newAlign 。

我們的edit.js腳本應該是完整的（現在）：

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

現在您可以返回編輯器並對齊塊內容。

我們需要修改 save 函數，將塊的內容和屬性存儲在數據庫中。

第 5 步：保存數據

打開save.js ，修改save函數如下：

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

最後，為了使代碼更具可讀性，您可以使用解構賦值語法從attribute對像中提取各個屬性：

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

保存文件，重新啟動進程並以代碼編輯器模式返回編輯器。 代碼應如下所示：

 <!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

就是這樣！ 您剛剛向塊工具欄添加了對齊控件

您可以在塊編輯器手冊中閱讀有關塊工具欄控件的更多信息。

自定義塊設置側邊欄

您還可以將控件添加到塊設置側邊欄（甚至為您的應用程序創建一個新的側邊欄）。

API 為此提供了一個InspectorControls組件。

塊編輯器手冊解釋瞭如何使用設置邊欄：

設置側邊欄用於顯示不常用的設置或需要更多屏幕空間的設置。 設置側邊欄應僅用於塊級設置。

如果您的設置僅影響塊內的選定內容（例如：段落內選定文本的“粗體”設置）：請勿將其放在設置側邊欄中。 即使在 HTML 模式下編輯塊時也會顯示設置側邊欄，因此它應該只包含塊級設置。

再次：

1. 從 WordPress 包中導入所需的組件
2. 在 JSX 代碼中包含相應的元素
3. 在 block.json 文件中定義必要的屬性
4. 定義事件處理程序
5. 保存數據

步驟 1. 從 @wordpress/block-editor 導入 InspectorControls 和 PanelColorSettings 組件

您可以添加多個控件以允許用戶自定義塊的特定方面。 例如，您可以提供一個顏色控制面板。 為此，您需要從block-editor模塊中導入InspectorControls和PanelColorSettings組件：

 import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

第 2 步：在 JSX 代碼中包含相應的元素

現在您可以將相應的元素添加到Edit函數返回的 JSX 中：

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

請注意，我們還更新了RichText元素的style屬性：

 <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

第 3 步：在 block.json 中定義必要的屬性

現在在block.json文件中定義backgroundColor和textColor屬性：

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

第 4 步：定義事件處理程序

現在您需要定義兩個函數來更新用戶輸入的backgroundColor和textColor ：

 const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

第 5 步：保存數據

最後一步：打開save.js文件並按如下方式更改腳本：

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

現在停止進程 (^C) 並再次運行npm run start 。 刷新頁面，刪除任何塊實例並將其再次添加到您的帖子中：

進行更改，保存帖子，然後在前端查看。 您在塊編輯器中所做的更改應反映在前端站點上。

添加和自定義外部鏈接

在本節中，您將向塊類型添加新組件：

• 一個ExternalLink組件，允許用戶將可自定義的鏈接添加到 Affiliate 塊
• 幾個側邊欄控件允許用戶自定義鏈接設置

步驟 1. 從 @wordpress/components 導入組件

現在您需要從@wordpress/components導入幾個組件。 打開您的 edit.js 文件並添加以下import語句：

 import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBody將可折疊容器添加到設置側邊欄。
• PaneRow為側邊欄控件生成一個通用容器。
• TextControl提供了一個文本輸入控件。
• ToggleControl提供了一個切換功能，使用戶能夠啟用/禁用特定選項
• ExternalLink是一個添加外部鏈接的簡單組件。

步驟 2. 在 JSX 代碼中包含相應的元素

您將首先在div容器中添加與RichText相同級別的ExternalLink元素：

 <div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

ExternalLink組件沒有記錄，因此我們參考了組件本身來獲取可用屬性的列表。 這裡我們使用href 、 className和rel屬性。

默認情況下， rel屬性值設置為noopener noreferrer 。 當切換控件打開時，我們的代碼會將nofollow關鍵字添加到結果a標記的rel屬性中。

現在您可以將鏈接設置添加到塊側邊欄。

首先，您將在InspectorControls中添加一個PanelBody元素，與PanelColorSettings處於同一級別：

 <InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

這是我們正在做的事情：

1. title屬性提供面板標題。
2. initialOpen設置面板最初是否打開。

接下來，我們將在PanelBody中添加兩個PanelRow元素，並在每個PanelRow中添加一個TextControl元素：

 <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

上面的代碼現在看起來應該很簡單了。 這兩個文本控件允許用戶設置鏈接標籤和 URL。

我們還將添加一個帶有ToggleControl PanelRow打開/關閉特定選項，例如是否包含屬性：

 <PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

第 3 步：在 block.json 中定義必要的屬性

現在在block.json文件中定義affiliateLink 、 linkLabel和hasLinkNofollow屬性：

 "affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

這裡沒有什麼要補充的了！ 讓我們繼續定義事件處理函數。

第 4 步：定義事件處理程序

回到edit.js文件並添加以下函數：

 const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

這些函數更新用戶輸入的相應屬性值。

第 5 步：保存數據

最後，我們必須更新save.js中的save功能：

 export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

請注意，這裡我們使用了常規a元素而不是ExternalLink ：

現在保存數據並重新啟動您的環境。

添加多個塊樣式

在上一節中，您學習瞭如何添加允許用戶對齊用戶輸入的塊工具欄控件。 我們可以向塊工具欄添加更多樣式控件，但我們也可以提供一組預定義的塊樣式，用戶只需單擊即可從中選擇。

為此，我們將使用 Block API 的一個有用功能：Block Styles。

您需要做的就是定義block.json styles屬性並在樣式表中聲明相應的樣式。

例如，您可以添加以下樣式數組：

 "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

有了這個，您剛剛添加了一個默認樣式和一個稱為border的附加樣式。 現在回到塊編輯器：

通過單擊塊切換器，然後在塊設置側邊欄中查找樣式面板，用戶將可以使用樣式。

選擇一種樣式並檢查應用於p元素的類。 右鍵單擊塊並檢查。 添加了一個新類，其名稱結構如下：

 is-style-{style-name}

如果你選中了“Border”樣式，那麼一個is-style-border類將被添加到p元素中。 如果您選中了“默認”樣式，則會添加一個is-style-default類。

現在您只需要聲明 CSS 屬性。 打開editor.scss文件並將當前樣式替換為以下內容：

 .wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

現在你可以對style.scss做同樣的事情：

 .wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

停止進程 (^C) 並再次運行npm run start 。

就是這樣！ 刷新頁面，享受新的塊樣式：

使用 InnerBlocks 組件嵌套 Gutenberg 塊

雖然功能齊全，但我們的會員塊仍然不是很吸引人。 為了讓觀眾更感興趣，我們可以添加一張圖片。

這可能會給我們的塊增加一層複雜性，但幸運的是，您不需要重新發明輪子，因為 Gutenberg 提供了一個特定的組件，您可以使用它來創建嵌套塊的結構。

InnerBlocks組件定義如下：

InnerBlocks導出一對可用於塊實現以啟用嵌套塊內容的組件。

首先，您需要在src文件夾中創建一個新的.js文件。 在我們的示例中，我們將此文件稱為container.js 。

現在您需要將新資源導入index.js文件：

 import './container';

回到container.js並導入必要的組件：

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

下一步是定義一個模板，提供將放置塊的結構。 在以下示例中，我們定義了一個模板，該模板由兩列組成，其中包含一個核心 Image 塊和我們的自定義 Affiliate 塊：

 const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

模板的結構是一個 blockTypes 數組（塊名稱和可選屬性）。

在上面的代碼中，我們使用了幾個屬性來配置 Columns 和 Column 塊。 具體來說， templateLock: 'all'屬性鎖定 Column 塊，以便用戶不會添加、重新排序或刪除現有塊。 templateLock可以採用以下值之一：

• all — InnerBlocks被鎖定，不能添加、重新排序或刪除任何塊。
• insert — 塊只能重新排序或刪除。
• false — 模板未鎖定。

然後將模板分配給InnerBlocks元素：

 <InnerBlocks template={ TEMPLATE } templateLock="all" />

為了防止出現任何兼容性問題，我們還在InnerBlocks組件中添加了一個templateLock屬性（另見 issue #17262 和 pull #26128）。

這是我們最終的container.js文件：

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

其他改進

我們的塊功能齊全，但我們可以通過一些小改動對其進行一些改進。

我們將backgroundColor屬性分配給RichText組件生成的段落。 但是，我們可能更願意將背景顏色分配給容器div ：

所以，修改edit.js文件和save.js div如下：

 <div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

這將允許用戶更改整個塊的背景。

另一方面，更相關的更改涉及useBlockProps方法。 在原始代碼中，我們定義了常量blockProps如下：

 const blockProps = useBlockProps();

但是我們可以使用useBlockProps更有效地傳遞一組屬性。 例如，我們可以從classnames名模塊中導入classnames名，並相應地設置包裝類名。

在以下示例中，我們根據align屬性 ( edit.js ) 的值分配一個類名：

 import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

我們將在save.js文件中進行相同的更改：

 import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

這是一個包裝！ 您現在可以運行構建以進行生產。

概括

我們到了，在這個令人難以置信的旅程的盡頭！ 我們從開發環境的配置開始，最終創建了一個完整的塊類型。

正如我們在介紹中提到的，紮實的 No​​de.js、Webpack、Babel 和 React 知識對於創建高級 Gutenberg 塊並將自己定位為專業的 Gutenberg 開發人員在市場上至關重要。

但是，您無需具備 React 經驗即可開始享受塊開發的樂趣。 區塊開發可以為您提供動力和目標，讓您在古騰堡區塊背後的技術中獲得越來越廣泛的技能。

因此，本指南遠未完成。 它只是對各種主題的介紹，可幫助您開始構建您的第一個古騰堡積木。

因此，我們建議您通過仔細閱讀在線文檔和指南來加深您的知識。 在可用的眾多資源中，我們推薦以下內容：

• 官方為初學者創建一個塊教程
• 面向中級開發者的官方塊教程
• 動態塊
• 元框
• 為您的插件創建側邊欄

如果您剛開始 WordPress 開發，您可能想了解前端開發的基本概念。 以下是可以幫助您入門的資源的快速列表：

• 如何在本地安裝 WordPress（免費電子書）
• 託管 WordPress 主機的真正價值（免費電子書）
• 什麼是 JavaScript？
• HTML 與 HTML5
• 如何在 WordPress 中編輯 CSS
• 什麼是 PHP？
• WordPress Hooks 訓練營：如何使用操作、過濾器和自定義 Hooks

請記住，本指南示例的完整代碼可在 Gist 上找到。

現在輪到你了：你開發過古騰堡積木嗎？ 到目前為止，您遇到的主要困難是什麼？ 請在評論中告訴我們您的體驗！