創(chuàng)建 Gutenberg 塊的關(guān)鍵在于理解其基本結(jié)構(gòu)并正確連接前后端資源。1. 準(zhǔn)備開發(fā)環(huán)境：安裝本地 WordPress、Node.js 和 @wordpress/scripts；2. 使用 PHP 注冊(cè)塊并用 JavaScript 定義塊的編輯和顯示邏輯；3. 通過(guò) npm 構(gòu)建 JS 文件以使更改生效；4. 遇到問(wèn)題時(shí)檢查路徑、圖標(biāo)是否正確或使用實(shí)時(shí)監(jiān)聽(tīng)構(gòu)建避免重復(fù)手動(dòng)編譯。按照這些步驟，可以逐步實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Gutenberg 塊。

創(chuàng)建一個(gè)簡(jiǎn)單的 Gutenberg 塊其實(shí)并不難，尤其是如果你已經(jīng)熟悉 WordPress 的基本開發(fā)流程。Gutenberg 是 WordPress 的新編輯器，它通過(guò)“塊”來(lái)組織內(nèi)容，每個(gè)塊就是一個(gè)獨(dú)立的內(nèi)容單元。如果你想自定義一個(gè)自己的塊，可以從最基礎(chǔ)的開始，一步步實(shí)現(xiàn)。

下面是一些實(shí)用步驟和建議，幫你快速上手。

準(zhǔn)備工作：設(shè)置開發(fā)環(huán)境

在開始寫代碼之前，確保你有一個(gè)適合開發(fā)的 WordPress 環(huán)境。你可以使用本地開發(fā)工具（如 Local 或 XAMPP）搭建一個(gè)測(cè)試站點(diǎn)。

• 安裝最新版 WordPress
• 安裝 Node.js 和 npm（用于構(gòu)建 JavaScript 文件）
• 安裝 @wordpress/scripts 包，這是官方推薦的腳本工具集

你可以通過(guò)以下命令安裝必要的依賴：

npm install --save-dev @wordpress/scripts

然后，在你的主題或插件中創(chuàng)建一個(gè)目錄來(lái)存放塊的代碼，比如 /blocks/my-first-block/。

創(chuàng)建基本結(jié)構(gòu)：注冊(cè)塊和編輯組件

一個(gè) Gutenberg 塊通常由兩個(gè)部分組成：PHP 用來(lái)注冊(cè)塊，JavaScript 用來(lái)定義塊的外觀和行為。

PHP 部分（注冊(cè)塊）

在你的主題 functions.php 文件中添加如下代碼，或者在插件中加載：

function register_my_first_block() {
    wp_register_script(
        'my-first-block',
        get_template_directory_uri() . '/blocks/my-first-block/build/index.js',
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'my-plugin/first-block', array(
        'editor_script' => 'my-first-block',
    ) );
}
add_action( 'init', 'register_my_first_block' );

這段代碼告訴 WordPress 這個(gè)塊的 JS 腳本在哪里，并注冊(cè)了一個(gè)新的塊類型。

JavaScript 部分（定義塊）

在 /blocks/my-first-block/src/index.js 中寫入如下內(nèi)容：

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( 'my-plugin/first-block', {
    title: '我的第一個(gè)塊',
    icon: 'smiley',
    category: 'common',

    edit: () => {
        return (
            <RichText
                tagName="p"
                placeholder="輸入一些文字..."
            />
        );
    },

    save: () => {
        return <RichText.Content tagName="p" value="這是一個(gè)靜態(tài)文本" />;
    },
} );

這樣你就創(chuàng)建了一個(gè)可以在編輯器中看到的塊了。

構(gòu)建和運(yùn)行：用 npm 編譯 JS 文件

Gutenberg 塊需要將 JavaScript 編譯成瀏覽器可以識(shí)別的格式。你可以使用 WordPress 提供的腳本工具自動(dòng)完成這個(gè)過(guò)程。

在項(xiàng)目根目錄下創(chuàng)建一個(gè) package.json 文件，加入如下配置：

{
  "name": "my-first-block",
  "version": "1.0.0",
  "scripts": {
    "build": "wp-scripts build ./blocks/my-first-block/src/index.js"
  }
}

然后運(yùn)行：

npm run build

每次修改完 JS 文件后，都要重新運(yùn)行一次 build 命令，讓更改生效。

小技巧和常見(jiàn)問(wèn)題

• 圖標(biāo)顯示不出來(lái)？ 可以使用 WordPress Dashicons 中的圖標(biāo)名。

• 塊不顯示？ 檢查 JS 是否編譯成功，以及 PHP 注冊(cè)路徑是否正確。

• 不想每次都手動(dòng)編譯？ 可以加上 --watch 參數(shù)，實(shí)時(shí)監(jiān)聽(tīng)文件變化并自動(dòng)構(gòu)建：

  npx wp-scripts build ./blocks/my-first-block/src/index.js --watch

  ---

  基本上就這些。從零開始創(chuàng)建一個(gè) Gutenberg 塊，關(guān)鍵在于理解塊的基本結(jié)構(gòu)和如何連接前后端資源。雖然看起來(lái)有點(diǎn)復(fù)雜，但只要一步一步來(lái)，很快就能掌握。

  以上是如何創(chuàng)建一個(gè)簡(jiǎn)單的Gutenberg塊的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！