如何創建一個簡單的Gutenberg塊

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

創建一個簡單的Gutenberg 塊其實並不難，尤其是如果你已經熟悉WordPress 的基本開發流程。 Gutenberg 是WordPress 的新編輯器，它通過“塊”來組織內容，每個塊就是一個獨立的內容單元。如果你想自定義一個自己的塊，可以從最基礎的開始，一步步實現。

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

準備工作：設置開發環境

在開始寫代碼之前，確保你有一個適合開發的WordPress 環境。你可以使用本地開發工具（如Local 或XAMPP）搭建一個測試站點。

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

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

 npm install --save-dev @wordpress/scripts

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

創建基本結構：註冊塊和編輯組件

一個Gutenberg 塊通常由兩個部分組成： 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 這個塊的JS 腳本在哪裡，並註冊了一個新的塊類型。

JavaScript 部分（定義塊）

在/blocks/my-first-block/src/index.js中寫入如下內容：

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

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

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

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

這樣你就創建了一個可以在編輯器中看到的塊了。

構建和運行：用npm 編譯JS 文件

Gutenberg 塊需要將JavaScript 編譯成瀏覽器可以識別的格式。你可以使用WordPress 提供的腳本工具自動完成這個過程。

在項目根目錄下創建一個package.json文件，加入如下配置：

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

然後運行：

 npm run build

每次修改完JS 文件後，都要重新運行一次build命令，讓更改生效。

小技巧和常見問題

• 圖標顯示不出來？可以使用WordPress Dashicons中的圖標名。

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

• 不想每次都手動編譯？可以加上--watch參數，實時監聽文件變化並自動構建：

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

  ---

  基本上就這些。從零開始創建一個Gutenberg 塊，關鍵在於理解塊的基本結構和如何連接前後端資源。雖然看起來有點複雜，但只要一步一步來，很快就能掌握。

  以上是如何創建一個簡單的Gutenberg塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！