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

創(chuàng)建一個(gè)簡單的Gutenberg 塊其實(shí)並不難，尤其是如果你已經(jīng)熟悉WordPress 的基本開發(fā)流程。 Gutenberg 是WordPress 的新編輯器，它通過“塊”來組織內(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è)測試站點(diǎn)。

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

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

 npm install --save-dev @wordpress/scripts

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

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

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

PHP 部分（註冊塊）

在你的主題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 腳本在哪裡，並註冊了一個(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è)過程。

在項(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命令，讓更改生效。

小技巧和常見問題

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

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

• 不想每次都手動(dòng)編譯？可以加上--watch參數(shù)，實(shí)時(shí)監(jiān)聽文件變化並自動(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)和如何連接前後端資源。雖然看起來有點(diǎn)複雜，但只要一步一步來，很快就能掌握。

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