更新日期：2020-12-21

Gutenberg 編輯器內建多樣的區塊類型，一般來說，寫個部落格文章，絕對是夠你使用了。不過一個模組通常無法滿足大家的需求，總是需要一些額外的功能，Gutenberg 當然支援擴充，只要你會撰寫程式的話，也是沒問題的。

底下範例是教你如何寫出你的第一個 Gutenberg 擴充模組外掛，這是從官網擷取出來的程式碼，我將幾個重要的變數寫一下。

Step.1 這段程式碼是先寫成一支獨立的外掛，但 Gutenberg 的運作是靠 javascript ，因此最重要的語法是包在 block.js 檔裡面。

/**
 Plugin Name: Test Gutenberg Plugin
 Author: Simon
 Version: 1.0.0
 */ 
function gutenberg_examples_01_register_block() {
    wp_register_script(
        'gutenberg-examples-01',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );
 
    register_block_type( 'gutenberg-examples/example-01-basic', array(
        'editor_script' => 'gutenberg-examples-01',
    ) );
 
}
add_action( 'init', 'gutenberg_examples_01_register_block' );
  1. 這裡我們先用 wp_register_script 將 block.js 引入，這個 block.js 是接下來要撰寫的檔案。你也可以再用 wp_register_style 加入 css。
  2. 注意 array( ‘wp-blocks’, ‘wp-element’ ) ，這兩個是我們在 block.js 會用到。
  3. 接著用 register_block_type 註冊區塊，第一個參數 ‘gutenberg-examples/example-01-basic’ 是區塊名稱，不要重複。第二個參數可把 js,css 引用進去。

Step.2 編輯 block.js 檔案，要撰寫的內容如下：

( function( blocks, element ) {
    var el = element.createElement;
 
    var blockStyle = {
        backgroundColor: '#900',
        color: '#fff',
        padding: '20px',
    };
 
    blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
        title: 'Example: Basic',
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                { style: blockStyle },
                'Hello World, step 1 (from the editor).'
            );
        },
        save: function() {
            return el(
                'p',
                { style: blockStyle },
                'Hello World, step 1 (from the frontend).'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.element
) );
  1. 這邊用 registerBlockType 去註冊新的區塊，後面第一個參數是區塊名稱，也就是剛剛上面的我們自訂區塊名稱。
  2. registerBlockType 第二個參數是設定屬性，有 title、description、category、icon、keywords、styles、attributes、transforms、parent、supports、edit、save 。(粗體字表示必須要有的屬性)
  3. 各個屬性的型態、用法介紹，可以到官網看一下。