Block Binding：讓內容與資料來源解耦

2026 iThome 鐵人賽

DAY 21

Vibe Coding

從一句話到一個網站：用 Vibe Coding 開發 WordPress Block Theme 的 30 天系列第 21 篇

18th鐵人賽 wordpress block binding

Oberon Lai

2026-08-24 10:01:54

36 瀏覽

分享至

上一篇介紹的動態區塊資料存在區塊自己的屬性裡，但有時候你要的資料不在區塊身上，它可能在文章的自訂欄位、在網站的全域設定甚至是要透過某個 API 才能取得。這一篇介紹 WordPress 6.5 之後的解法：Block Bindings（區塊綁定），讓核心區塊的內容去綁一個外部資料來源。

讓內容跟來源分離

假設每篇文章都有一個自訂欄位「作者職稱」你想把它顯示在頁面上。傳統動態區塊思路是：做一個 staff-title 區塊，render.php 裡 get_post_meta() 撈出來輸出，要顯示「公司電話」再做一個、「活動日期」再做一個，每個資料來源都養一個區塊，內容和它的來源耦合在一起。

Block Bindings 換了個角度：不做新區塊，而是讓現成的核心區塊（段落、圖片、按鈕）去綁一個資料來源。 段落的文字不再是寫死的，而是「來自這篇文章的某個 meta」。

註冊來源與綁上區塊

第一步：註冊一個綁定來源。 在 functions.php 用 register_block_bindings_source()，給它一個名字和一個「怎麼取值」的 callback：

add_action( 'init', function () {
  register_block_bindings_source(
    'block-theme/staff-meta',
    array(
      'label'              => __( '員工資料', 'block-theme' ),
      'uses_context'       => array( 'postId' ),
      'get_value_callback' => function ( $source_args, $block_instance ) {
        $post_id = $block_instance->context['postId'];
        if ( isset( $source_args['key'] ) ) {
          return get_post_meta( $post_id, $source_args['key'], true );
        }
      },
    )
  );
} );

這段等於告訴 WordPress：「有一個叫 block-theme/staff-meta 的來源，誰綁它、給一個 key，我就從當前文章的那個 meta 撈值回去。」

第二步：把區塊綁上去。 在範本或文章的區塊標記裡用 metadata.bindings 指定某個屬性的來源：

<!-- wp:paragraph {
  "metadata": {
    "bindings": {
      "content": {
        "source": "block-theme/staff-meta",
        "args": { "key": "staff_title" // post_meta 的 key }
      }
    }
  }
} -->
<p>職稱佔位文字</p>
<!-- /wp:paragraph -->

前台渲染時這個段落的 content 會被 staff_title 這個 meta 的值取代，你用的是核心的段落區塊，沒有做任何新區塊卻讓它顯示了動態資料。

這帶來什麼改變

Block Bindings 的威力，在於它把「資料」和「呈現」拆開了：

少做一堆一次性區塊 - 要顯示新的 post meta 綁一個核心段落就好，不用開新區塊。
設計一致性自 - ****綁定的是核心段落，它照樣吃 theme.json 的字體、顏色。不會因為你自製區塊而樣式不一致。
內容編輯者的心智更單純 - 他看到的還是熟悉的段落、圖片，只是值來自別處。

核心自己就內建了幾個來源：core/post-meta（文章 meta）、core/post-title、core/post-author-name 等，很多情況你連 callback 都不用寫，直接綁核心來源即可。要接自訂邏輯（外部 API、複雜計算）時才自己 register_block_bindings_source()。

所以上面的例子也可以改成這樣子寫：

add_action( 'init', function () {
    register_post_meta( 'staff', 'staff_title', array(
        'show_in_rest'  => true,
        'single'        => true,
        'type'          => 'string',
        'label'         => __( '職稱', 'block-theme' ),
        'auth_callback' => function () {
            return current_user_can( 'edit_posts' );
        },
    ) );
} );

然後把 source 換成 core/post-meta:

<!-- wp:paragraph {
  "metadata": {
    "bindings": {
      "content": {
        "source": "core/post-meta",
        "args": { "key": "staff_title" }
      }
    }
  }
} -->
<p>職稱佔位文字</p>
<!-- /wp:paragraph -->