構建自定義古騰堡積木：最終積木開發教程

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

嘗試免費演示

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

值得一提的是古騰堡項目的首席架構師馬蒂亞斯文圖拉在接受 WP Tavern 採訪時報道的內容：

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

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

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

古騰堡塊開發先決條件

對於本教程，唯一需要的技能是 WordPress 插件開發的良好知識以及至少對 HTML、CSS、JavaScript 和 React 的基本了解。

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

要在完整性和簡單性之間找到正確的折衷方案，或者決定要包含哪些主題以及要刪除哪些主題並不容易。

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

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

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

一旦開始構建積木，您就可以進一步提高技能並自行構建更高級的古騰堡積木。

#008cc4}從古騰堡塊開發開始，一開始可能會令人生畏…… 😵‍💫 但不要害怕！這份完整的初學者指南讓您了解🙏點擊推文

什麼是古騰堡塊？

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

簡而言之，即使 Gutenberg 仍在大力開發中，它已經走了很長一段路——今天，塊編輯器是一個成熟的候選者，作為一個可靠的、功能性的頁面和站點構建器。

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

我們想明確這一點：

Gutenberg 不是常規的 WYSIWYG 編輯器。相反，它重新定義了 WordPress 中的整個編輯體驗。

在 Gutenberg 中，內容被分成塊，這些塊是用戶可以用來創建帖子和頁面或整個網站的「磚塊」。

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

我們喜歡 WordPress 的定義：

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

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

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

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

在 WordPress 5.8 中使用 Gutenberg 塊。

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

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

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

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

代碼編輯器視圖中的博客文章。

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

存儲在 wp_posts 表中的博客文章。

設置您的 WordPress 開發環境

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

恐嚇？不要！WordPress 社區已經通過提供強大的工具來幫助您避免繁瑣的手動配置過程。

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

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

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

讓我們開始吧。

1. 安裝 Node.js 和 npm

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

信息

Node.js 是一個基於 Chrome 的 V8 JavaScript 引擎構建的 JavaScript 運行時。npm，通常被稱為 Node 包管理器，被認為是「世界上最大的軟體註冊表」。

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

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

節點 -v

如果結果是command not found，則說明你的電腦沒有安裝Node.js，你可以繼續安裝。

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

Node.js 下載頁面。

安裝 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：

在 DevKinsta 中創建一個新的 WordPress 網站。

選項 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 是您要安裝的軟體包。

重要的

默認情況下，在 Mac 或 Linux 上，節點包安裝在 /usr/local/lib/node_modules 中。

如果當前用戶對該目錄沒有寫許可權，則會發出 EACCES 錯誤。了解有關在全局安裝軟體包時解決 EACCES 許可權錯誤的更多信息。

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

wp-env –version

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

wp-env 開始

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

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

默認憑據如下：

用戶名：管理員
密碼：密碼

設置塊插件

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

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

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

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

創建塊是官方支持的創建塊的方式，用於為 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/create-block 創建一個塊。

這個過程需要幾分鐘。完成後，您應該得到以下響應：

塊插件已創建。

就是這樣！

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

塊插件已成功安裝。

信息

如果您使用 wp-env 工具並從包含插件的目錄運行 wp-env start，它將自動掛載並激活插件。如果您從任何其他目錄運行 wp-env start，將創建一個通用的 WordPress 環境（另請參閱 WordPress 開發站點）。

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

使用@wordpress/create-block 創建的示例塊。

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

cd my-first-block

然後運行以下命令：

海拔開始

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

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

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

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

就像官方的 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

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

使用 create-guten-block 創建古騰堡塊。

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

使用 create-guten-block 成功創建了古騰堡塊。

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

Visual Studio Code 中的塊插件。

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

帶有使用 create-guten-block 創建的新插件的插件屏幕。

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

cd my-first-block
npm start

您應該得到以下響應：

npm 開始了。

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

npm 運行構建

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

使用 create-guten-block 創建的新塊。

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

入門級腳手架演練

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

但究竟什麼是塊狀腳手架？

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

我們選擇了官方的 Create Block 開發工具，因為它在 Block Editor 手冊中使用過。但即使您決定使用諸如 create-guten-block 之類的第三方工具，您的體驗也不會有太大的不同。

話雖如此，讓我們深入研究創建塊工具。

仔細看看創建塊開發工具

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

npx @wordpress/create-block [選項] [slug]

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

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

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

npx @wordpress/create-block
以交互模式運行 create-block。

以交互模式運行 create-block。

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

使用@wordpress/create-block 創建的塊插件的文件和文件夾。

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

插件文件

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

/**
* 插件名稱：My First Block
* 描述：使用 ESNext 標準和 JSX 支持編寫的示例塊 – 需要構建步驟。
* 至少需要：5.8
* 需要 PHP：7.0
* 版本：0.1.0
* 作者：WordPress 貢獻者
* 許可證：GPL-2.0-或-later
* 許可證 URI：https://www.gnu.org/licenses/gpl -2.0.html
* 文本域：my-first-block
*
* @package create-block
*/
/**
* 使用從`block.json` 文件載入的元數據註冊塊。
* 在幕後，它還註冊所有資產，以便它們可以
通過相應上下文中的塊編輯器進行排隊*。
*
* @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”: “使用 ESNext 標準和 JSX 支持編寫的示例塊 – 需要構建步驟。”,
“author”: “The WordPress Contributors」,
「license」: 「GPL-2.0-or-later」,
「main」: 「build/index.js」,
「scripts」: {
「build」: 「wp-scripts build」,
「format」: “wp-scripts 格式”,
“lint:css”: “wp-scripts lint-style”,
“lint:js”: “wp-scripts lint-js”,
“start”: “wp-scripts start”,
“packages -update”: “wp-scripts 包更新”
},
“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 是將包名映射到版本的兩個對象。生產中需要依賴關係，而 devDependences 僅用於本地開發（閱讀更多）。

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

block.json 文件

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

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

從性能的角度來看，當主題支持延遲載入資產時，使用 block.json 註冊的塊將使其資產入隊優化開箱即用。樣式或腳本屬性中列出的前端 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”: “使用 ESNext 標準和 JSX 支持編寫的示例塊 – 需要構建步驟。”,
“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 — 塊類別
圖標 — Dashicon slug 或自定義 SVG 圖標
description — 在塊檢查器中可見的簡短描述
支持 — 一組用於控制編輯器中使用的功能的選項
textdomain — 插件文本域
editorScript — 編輯器腳本定義
editorStyle — 編輯器樣式定義
style — 為塊提供替代樣式

除了上面列出的屬性之外，您還可以（並且可能會）定義一個屬性對象，提供有關您的塊存儲的數據的信息。在您的 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 Editor Handbook 以獲取有關 block.json 元數據和屬性的更多詳細信息。

源文件夾

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

索引.js
編輯.js
保存.js
編輯器.scss
樣式文件

索引.js

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

從’@wordpress/blocks’ 導入 { registerBlockType };
導入’./style.scss’;
從’./edit’導入編輯；
從’./save’導入保存；

registerBlockType(‘create-block/my-first-block’, {
編輯：編輯，
保存，
});

第一條語句從@wordpress/blocks 包中導入 registerBlockType 函數。以下導入語句導入樣式表以及編輯和保存功能。

registerBlockType 函數在客戶端註冊組件。該函數採用兩個參數：一個塊名稱命名空間/塊名稱（與在伺服器上註冊的相同）和一個塊配置對象。

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

編輯.js

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

從’@wordpress/i18n’導入{__}；
從’@wordpress/block-editor’ 導入 { useBlockProps };
導入’./editor.scss’;

導出默認函數 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 文件是我們構建要保存到資料庫中的塊結構的地方：

從’@wordpress/i18n’導入{__}；
從「@wordpress/block-editor」導入 { useBlockProps };

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 和 build 文件夾

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

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

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

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

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

您將在本指南中學習構建的塊類型。

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

信息

本教程中提供的示例代碼也可以在 Gist 上找到以供您參考。

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

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

預備，準備，開始！

如何設置 Starter Block 插件

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

Mac OS 文件夾中的新終端。

現在，運行以下命令：

npx @wordpress/create-block

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

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

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

Affiliate 塊已安裝並註冊用於開發。

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

cd my-affiliate-block

信息

如果您正在運行 WordPress 環境，則應首先啟動 Docker Desktop，然後從插件文件夾中運行 wp-env start。

然後，您可以從 Web 瀏覽器啟動 http://localhost:8888/wp-login 並使用 Username: admin 和 Password: password 登錄到您的 WordPress 儀錶板。

從 Visual Studio Code 終端運行命令。

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

海拔開始

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

聯盟塊插件。

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

使用@wordpress/create-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”: “Kinsta 讀者的示例塊”,
“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 自動註冊和排隊。為了證明這一點，啟動瀏覽器檢查器並打開網路選項卡：

在 Chrome DevTools 中檢查資源。

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

訂閱時事通訊

想知道我們是如何將流量增加超過 1000% 的嗎？

加入 20,000 多名其他人，他們會收到我們的每周時事通訊，其中包含 WordPress 內幕技巧！

現在訂閱

用戶界面標籤

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

塊側邊欄中的塊名稱和描述。

關鍵詞

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

{ “關鍵字”: [ “kinsta”, “affiliate”, “money” ] }

如果您現在在快速插入器中輸入「kinsta」、「affiliate」或「money」，編輯器會建議您選擇 Affiliate 塊：

在快速插入器中使用關鍵字搜索塊。

本土化

如果您想知道 JSON 文件中字元串的本地化是如何發生的，答案如下：

在 JavaScript 中，您現在可以使用 @wordpress/blocks 包中的 registerBlockTypeFromMetadata 方法來使用從 block.json 文件載入的元數據註冊塊類型。所有本地化的屬性都會自動包裝在 _x（來自 @wordpress/i18n 包）函數調用中，類似於它在 PHP 中使用 register_block_type_from_metadata 的工作方式。唯一的要求是在 block.json 文件中設置 textdomain 屬性。

這裡我們使用 registerBlockType 函數而不是 registerBlockTypeFromMetadata，因為後者自古騰堡 10.7 以來已被棄用，但機制是相同的。

使用內置組件：RichText 組件

組成 Gutenberg 塊的元素是 React 組件，您可以通過 wp 全局變數訪問這些組件。例如，嘗試在瀏覽器的控制台中鍵入 wp.editor。這將為您提供 wp.editor 模塊中包含的組件的完整列表。

滾動列表並猜測組件名稱的含義。

同樣，您可以查看 wp.components 模塊中包含的組件列表：

WP 編輯器組件。

信息

模塊化編程是一種軟體設計技術，它強調將程序的功能分成獨立的、可互換的模塊，這樣每個模塊都包含執行所需功能的一個方面所需的一切（來源：維基百科）。

現在回到 edit.js 文件並仔細查看腳本：

從’@wordpress/i18n’導入{__}；
從’@wordpress/block-editor’ 導入 { useBlockProps };
導入’./editor.scss’;

導出默認函數 Edit() {
return (
<p {…useBlockProps()}>
{__(‘My First Block – hello from the editor!’, ‘my-first-block’)}
</p>
);
}

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

代碼編輯器中的起始塊。

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

將內置組件添加到您的塊是一個 5 步過程：

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

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

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

從「@wordpress/block-editor」導入 { useBlockProps };

…到：

從「@wordpress/block-editor」導入 { useBlockProps, RichText };

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

使用塊道具

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

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

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

useBlockProps 生成的元素和類。

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

沒有 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={ __( ‘寫下你的文字…’ ) }
/>
);

讓我們逐行注釋代碼：

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

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

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

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

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

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

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

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

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

導出默認函數 Edit( { attributes, setAttributes } ) { … }
第 4 步：定義事件處理程序

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

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

從’@wordpress/i18n’導入{__}；
從「@wordpress/block-editor」導入 { useBlockProps, RichText };
導入’./editor.scss’;

導出默認函數 Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();

const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } )
}

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

塊編輯器中 RichText 組件的輸出。

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

<!– wp:my-affiliate-plugin/my-affiliate-block –>
<p class=”wp-block-my-affiliate-plugin-my-affiliate-block”>這是我第一個可編輯的古騰堡塊🤓 </p>
<!– /wp:my-affiliate-plugin/my-affiliate-block –>

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

第 5 步：保存數據

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

從’@wordpress/i18n’導入{__}；
從「@wordpress/block-editor」導入 { useBlockProps, RichText };

導出默認函數 save( { attributes } ) {
const blockProps = useBlockProps.save();
return (
<RichText.Content
{ …blockProps }
tagName=”p”
value={ attributes.content }
/>
);
}

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

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

重要的

每當您更改保存功能時，您必須刪除編輯器畫布中的任何塊實例並再次包含它以查看它是否正常工作。閱讀有關塊驗證的更多信息。

您可以在 Block Editor Handbook 中閱讀有關 RichText 組件的更多信息，並在 Github 上找到道具的完整列表。

現在讓我們更進一步。在下一部分中，您將學習如何向塊工具欄添加控制項。

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

核心段落塊工具欄。

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

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

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

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

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

厭倦了沒有答案的低於 1 級的 WordPress 託管支持？試試我們世界一流的支持團隊！查看我們的計劃

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

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

從「@wordpress/block-editor」導入 {
useBlockProps,
RichText,
AlignmentControl,
BlockControls
};
步驟 2：添加 BlockControls 和 AlignmentControl 元素

轉到編輯功能並在與 <RichText /> 相同的級別插入 <BlockControls /> 元素。然後在 <BlockControls /> 中添加 <AlignmentControl /> ：

導出默認函數 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 元素定義了額外的屬性（通過示例查看完整的屬性列表）

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

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

「對齊」：{
「類型」：「字元串」，
「默認」：「無」
}

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

對齊工具欄已成功添加。

現在，如果您嘗試使用新的對齊控制項格式化塊內容，您將看到什麼也沒有發生。那是因為我們還沒有定義事件處理程序。

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

現在定義 onChangeAlign：

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

如果 newAlign 未定義，則我們將 newAlign 設置為 none。否則，我們使用 newAlign。

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

導出默認函數 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 ‘, ‘核心/斜體’

placeholder={ __( ‘寫你的文字…’ ) }
style={ { textAlign: attributes.align } }
/>
</>
);
}

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

我們需要修改save函數來在資料庫中存儲塊內容和屬性。

第 5 步：保存數據

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

導出默認函數 save( { attributes } ) {
const blockProps = useBlockProps.save();
return (
<RichText.Content
{ …blockProps }
tagName=”p”
value={ attributes.content }
style={ { textAlign: attributes.align } }
/>
);
}

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

導出默認函數 save( { attributes } ) {
const blockProps = useBlockProps.save();
const { 內容，對齊 } = 屬性；
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” style=”text-align:right”>這是我第一個可編輯的<strong><em>Gutenberg</em></strong> <em>block</em> 🤓</p>
<!– /wp:我的附屬插件/我的附屬塊 –>
將文本右對齊。

將文本右對齊。

螞蟻就是這樣！您剛剛在塊工具欄中添加了一個對齊控制項🤓

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

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

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

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

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

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

再次：

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

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

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

import {
useBlockProps,
RichText,
AlignmentControl,
BlockControls,
InspectorControls,
PanelColorSettings
} from ‘@wordpress/block-editor’;
第 2 步：將相應的元素包含到您的 JSX 代碼中

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

導出默認函數 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={ __( ‘顏色設置’, ‘my-affiliate-block’ ) }
initialOpen={ false }
colorSettings={ [
{
value: textColor,
onChange: onChangeTextColor,
label: __( ‘文本顏色’, ‘my-affiliate-block’ ),
},
{
文本顏色 } } /> </> ); }

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

<RichText
{ …blockProps }
tagName=”p”
onChange={ onChangeContent }
allowedFormats={ [ ‘core/bold’, ‘core/italic’ ] }
value={ content }
placeholder={ __( ‘寫你的文字。 ..’, ‘my-affiliate-block’ ) }
style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } }
/>
第三步：在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 文件並更改腳本如下：

導出默認函數 save( { attributes } ) {
const blockProps = useBlockProps.save();
const { 內容，對齊，backgroundColor，textColor } = 屬性；
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 {
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 屬性中。

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

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

這是我們正在做的事情：

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

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

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

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

<PanelRow>
<fieldset>
<ToggleControl
label=”Add rel = nofollow”
help={
hasLinkNofollow
? 「有rel nofollow。」
：’沒有rel nofollow。
}
checked={ hasLinkNofollow }
onChange={ toggleNofollow }
/>
</fieldset>
</PanelRow>
第三步：在block.json中定義必要的屬性

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

“affiliateLink”: {
“type”: “string”,
“default”: “”
},
“linkLabel”: {
“type”: “string”,
“default”: “檢查出來！”
},
“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 中的保存函數：

導出默認函數保存（{屬性}）{

const { 對齊、內容、背景顏色、文本顏色、affiliateLink、linkLabel、hasLinkNofollow } = 屬性；

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”: [
{
“name”: “default”,
“label”: “Default”,
“isDefault”: true
},
{
“name”: “border”,
“label”: “Border”
}
],

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

兩種預定義的塊樣式。

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

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

is-style-{style-name}

如果您選中了「Border」樣式，那麼將在 p 元素中添加一個 is-style-border 類。如果您選中「默認」樣式，則會添加一個 is-style-default 類。

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

.wp-block-my-affiliate-plugin-my-affiliate-block {
padding: 2px;
&.is-style-default{
邊框：0;
}
&.is-style-border{
邊框：1px 實心 #000;
}
}

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

.wp-block-my-affiliate-plugin-my-affiliate-block {
&.is-style-default{
邊框：0;
}
&.is-style-border{
邊框：1px 實心 #000;
}
}

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

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

附屬塊樣式。

使用 InnerBlocks 組件嵌套古騰堡塊

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

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

InnerBlocks 組件定義如下：

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

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

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

導入’./容器’;

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

從「@wordpress/blocks」導入 { registerBlockType };
從「@wordpress/i18n」導入{__}；從「@wordpress/block-editor」
導入 {
useBlockProps,
InnerBlocks
};

下一步是定義一個模板，提供放置塊的結構。在以下示例中，我們定義了一個模板，該模板由兩列組成，其中包含一個核心 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: ‘輸入側邊內容…’ } ],
] ] ,
] ] ];

該模板被構造為一個塊類型數組（塊名稱和可選屬性）。

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

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

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

為了防止任何兼容性問題，我們還在 InnerBlocks 組件中添加了 templateLock 屬性（另請參閱問題 #17262 和 pull #26128）。

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

從「@wordpress/blocks」導入 { registerBlockType };
從「@wordpress/i18n」導入{__}；
從「@wordpress/block-editor」導入 { useBlockProps, InnerBlocks };

registerBlockType(‘my-affiliate-plugin/my-affiliate-container-block’, {
title: __( ‘Container’, ‘my-affiliate-block’ ),
category: ‘design’,

編輯（{類名}）{

return(
<div className={ className }>
<InnerBlocks
template={ TEMPLATE }
templateLock=”all”
/>
</div>
)
},

save() {
const blockProps = useBlockProps.save();
return(
<div { …blockProps }>
<InnerBlocks.Content />
</div>
)
},
});
編輯器中嵌套的 Affiliate 塊。

編輯器中嵌套的 Affiliate 塊。

其他改進

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

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

因此，更改edit.js 文件和save.js div，如下所示：

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

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

const blockProps = useBlockProps();

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

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

從 ‘classnames’ 導入類名；

…

導出默認函數 Edit( { attributes, setAttributes } ) {
…
const blockProps = useBlockProps( {
className: classnames( {
[ `has-text-align-${ align }` ]: align,
} )
} );
…
}

我們將在 save.js 文件中做同樣的改變：

從 ‘classnames’ 導入類名；

…

導出默認函數 save( { attributes } ) {
…
const blockProps = useBlockProps.save({
className: classnames( {
[ `has-text-align-${ align }` ]: align,
} )
});
…
}

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

如果您正在尋找有關古騰堡塊開發入門的深入指南，那麼這個龐大的指南適合您。立即查看並開始構建您的古騰堡積木！👷‍♀️🧱點擊推文
總結

我們到了，結束了這段不可思議的旅程！我們從配置開發環境開始，最終創建了一個完整的塊類型。

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

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

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

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

官方為初學者創建塊教程
中級開發者的官方塊教程
動態塊
元盒
為您的插件創建側邊欄

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

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

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

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

通過以下方式節省時間、成本並最大限度地提高站點性能：

來自 WordPress 託管專家的即時幫助，24/7。
Cloudflare 企業集成。
全球受眾覆蓋全球 28 個數據中心。
使用我們內置的應用程序性能監控進行優化。

所有這些以及更多，在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

構建自定義古騰堡積木：最終積木開發教程

1. 安裝 Node.js 和 npm

信息

2. 設置您的開發環境

重要的

設置塊插件

信息

仔細看看創建塊開發工具

插件文件

package.json 文件

block.json 文件

源文件夾

node_modules 和 build 文件夾

信息

如何設置 Starter Block 插件

信息

工作中的 block.json

想知道我們是如何將流量增加超過 1000% 的嗎？

使用內置組件：RichText 組件

信息

重要的

自定義塊設置側欄

添加和自定義外部鏈接

添加多個塊樣式

使用 InnerBlocks 組件嵌套古騰堡塊

其他改進

如何在沒有插件的情況下在 WordPress 中導入 CSV 文件

如何將 WordPress 置於維護模式（安全且簡單的方法）

如何向 WordPress 帖子添加多媒體

谷歌域名與WordPress集成：建立您的專業網站

了解WordPress社區：專訪揭示內部運作

Azure 提供的 WordPress 免費遊樂場

構建自定義古騰堡積木：最終積木開發教程

1. 安裝 Node.js 和 npm

信息

2. 設置您的開發環境

重要的

設置塊插件

信息

仔細看看創建塊開發工具

插件文件

package.json 文件

block.json 文件

源文件夾

node_modules 和 build 文件夾

信息

如何設置 Starter Block 插件

信息

工作中的 block.json

想知道我們是如何將流量增加超過 1000% 的嗎？

使用內置組件：RichText 組件

信息

重要的

向塊工具欄添加控制項

自定義塊設置側欄

添加和自定義外部鏈接

添加多個塊樣式

使用 InnerBlocks 組件嵌套古騰堡塊

其他改進

相關文章