使用WordPress區塊繫結API為您的區塊提供動力

在 WordPress 區塊編輯器中顯示自定義資料並非易事。它需要構建一個自定義塊，以便從自定義欄位或其他來源獲取資料。

這是一項繁重的工作，一些開發人員往往力不從心。在某些情況下，這還意味著要建立重複的功能。例如，考慮在文字標題中顯示自定義欄位資料。難道不需要建立一個全新的區塊就能實現嗎？

現在終於可以了。WordPress 6.5中的區塊繫結API提供了一種本地解決方案。它允許您將資料來源繫結到所選的 WordPress 核心區塊，使您能夠在更短的時間內構建動態 WordPress 網站。它還為塊主題帶來了新的功能。

本文將向您介紹區塊繫結 API，通過一個簡單的演示向您展示它是如何工作的，並探討隨著 API 的發展，它的未來將如何。

為什麼說區塊繫結API是改變遊戲規則的工具？

多年來，自定義欄位一直是 WordPress 核心的一部分。它們為靜態文章帶來了動態資料，併為開發人員提供了更多自定義選項。然而，使用自定義欄位的過程非常繁瑣。

您必須使用 register_meta() 函式或安裝外掛來註冊和配置新欄位。這只是第一步。在網站上顯示這些資料是另一項挑戰。

文章的所有自定義欄位資料都儲存為文章後設資料。但是，沒有直接顯示結果的方法。這樣做需要外掛和/或在主題中新增程式碼。這不僅增加了開發人員的工作難度，也是另一項需要管理的技術債務。

區塊編輯器和區塊主題的引入也無濟於事。自定義欄位資料無法在 WordPress 附帶的任何核心區塊中顯示，同樣的限制也適用於區塊主題。這可能是一些開發人員堅持使用經典編輯器和/或經典主題的重要原因。

區塊繫結 API 為 WordPress 帶來了這一功能。最後，您不需要外掛來幫助您顯示資料。它將資料來源與按鈕、標題、圖片和段落等特定區塊繫結，為區塊主題和區塊編輯器開闢了一個自定義選項的新天地。

它並不能完全複製編寫 PHP 或使用自定義欄位外掛的功能。不過，這是朝正確方向邁出的一步。在某些情況下，它可能就是你所需要的全部。

區塊繫結API的一個簡單用例

區塊繫結 API 在現實世界中是如何工作的？我們整理了一個簡單的示例，說明它如何發揮作用。

在我們深入探討之前，先來看看我們的專案大綱：

• 安裝最新版本的 WordPress 並使用預設主題 Twenty Twenty-Four。
• 註冊幾個自定義欄位：
  • Quote：我們希望在每個頁面上突出顯示的名言，與段落區塊繫結。
  • Photo：每頁不同照片的 URL，繫結到圖片塊。
• 最後，編輯主題的頁面模板，新增獲取這些自定義欄位值的區塊。

現在我們有了計劃，讓我們將 WordPress 區塊繫結 API 付諸實施。

在區塊編輯器中啟用自定義欄位

WordPress 預設隱藏自定義欄位，因此第一步是在區塊編輯器中啟用自定義欄位。

要啟用自定義欄位，請在區塊編輯器中開啟選項選單（⋮ 圖示）。然後單擊“首選項”。

接下來，點選自定義欄位切換按鈕，在編輯器中顯示自定義欄位。單擊“顯示並重新載入頁面”按鈕儲存更改。

在區塊編輯器中啟用自定義欄位

註冊自定義欄位

要註冊自定義欄位，請開啟主題的 functions.php 檔案。然後新增以下程式碼：

// Register custom fields for pages in WordPress using register_meta()
function wbolt_register_custom_meta_fields_for_pages() {
// Register the text field "wbolt_famous_quote" for pages
register_meta('post', 'wbolt_famous_quote', array(
'type' => 'string',  // Text field
'single' => true,    // Single value for the field
'sanitize_callback' => 'wp_strip_all_tags',  // Sanitize the input
'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
)); 
// Register the image field "wbolt_photo" for pages
register_meta('post', 'wbolt_photo', array(
'type' => 'string',  // Can store the URL or attachment ID as a string
'single' => true,    // Single value for the field
'sanitize_callback' => 'esc_url_raw',  // Sanitize the input as a URL
'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
));
}
add_action('init', 'wbolt_register_custom_meta_fields_for_pages');

請注意每個欄位的標題，因為下一步我們會用到它們：

• wbolt_famous_quote
• wbolt_photo

您可以根據 WordPress register_meta() 文件進一步自定義這些欄位。

我們還需要注意的是，你可以通過自定義外掛來註冊這些欄位。這樣做的好處是，即使更換了主題，這些欄位也能繼續使用。

在頁面中新增自定義欄位值

接下來，按照以下步驟在頁面中新增自定義欄位值：

1. 導航至“頁面”>“所有頁面”，然後選擇頁面。
2. 滾動到頁面底部，找到自定義欄位面板。單擊第一個欄位下方的輸入新欄位按鈕。在左側欄中新增 wbolt_famous_quote。然後，在右側新增我們引用的內容：The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt
3. 接下來，單擊“新增自定義欄位”按鈕，新增 wbolt_photo 欄位。在右側新增我們要使用的圖片的 URL。

在 WordPress 區塊編輯器中新增自定義欄位

現在，我們可以儲存頁面，並對網站上的其他頁面重複這一過程。

將自定義欄位資料繫結到區塊

我們希望在頁面上顯示資料，因此需要在網站編輯器中編輯主題的頁面模板。具體操作如下

導航至外觀 > 編輯器，然後點選左側欄中的模板連結。找到頁面模板，然後點選在編輯器中開啟。

在 WordPress 網站編輯器中找到頁面模板

首先，我們需要選擇一個位置來顯示自定義欄位資料。讓我們在每個頁面的底部新增一個區域。

我們將新增一個組區塊，並在其中插入一個列區塊。左欄包含一個圖片區塊（用於顯示我們的照片），右欄包含一個段落區塊（用於顯示我們的引用）。

我們將組區塊重新命名為自定義欄位資料，以備將來參考。這樣，如果我們以後要再次編輯，就可以更容易地找到它。

新增顯示自定義欄位資料的區塊

區塊繫結 API 還沒有用於顯示值的視覺化介面（下文將詳細介紹）。因此，我們需要編輯圖片和段落區塊的程式碼。這樣我們就可以將自定義資料繫結到它們上。

點選網站編輯器右上方的選項選單（⋮ 圖示）。選擇程式碼編輯器連結。這將開啟程式碼編輯器。

查詢我們剛剛新增的組區塊。程式碼以：

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

我們還在下圖中突出顯示了相應的程式碼：

在程式碼編輯器中檢視我們的組區塊

接下來，找到該組中的影象和段落區塊。它們的預設程式碼如下：

Image:

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

Paragraph:

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

我們可以編輯這些區塊，將它們與自定義欄位繫結：

Image:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"wbolt_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->

Note the key value is set to our wbolt_photo custom field.

注意 key 已設定為 wbolt_photo 自定義欄位。

Paragraph:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"wbolt_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

在本例中， key 值設定為我們的 wbolt_famous_quote 自定義欄位。

儲存更改並退出程式碼編輯器。

點選圖片和段落塊。WordPress 會用紫色勾勒出每個區塊，以表示它繫結到了一個資料來源。此外，右側面板還將顯示一個屬性區域，其中包含更多詳細資訊。

WordPress 表示影象區塊與資料來源繫結

我們的段落區塊也與資料來源繫結

注意：在編輯頁面時，您看不到這些區塊。不過，它們會顯示在網站的前端。

最後一步是訪問網站前端。我們應該可以在任何有自定義欄位值的頁面上看到我們的圖片和引用。

我們的自定義欄位資料顯示在頁面底部

繫結區塊的其他可能性

我們建立了一個將區塊繫結到資料來源的基本示例。不過，我們還可以通過一些其他方法來增強我們的專案，其中包括

• 新增 ALT 屬性：我們可以註冊另一個自定義欄位，為照片定義 ALT 屬性。這將使該功能更易於使用。例如，我們可以將一個新欄位 wbolt_photoo_alt 與 alt 屬性繫結，如下所示：
• Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"wbolt_photo"}},"alt":{"source":"namespace/slug","args":{"key":"wbolt_photo_alt"}}}}} -->

  <figure class="wp-block-image"><img src="" alt=""/></figure>

  <!-- /wp:image -->

  <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"wbolt_photo"}},"alt":{"source":"namespace/slug","args":{"key":"wbolt_photo_alt"}}}}} --> <figure class="wp-block-image"><img src="" alt=""/></figure> <!-- /wp:image -->

  <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"wbolt_photo"}},"alt":{"source":"namespace/slug","args":{"key":"wbolt_photo_alt"}}}}} -->
  <figure class="wp-block-image"><img src="" alt=""/></figure>
  <!-- /wp:image -->

• 使用自定義資料來源：自定義欄位可以很好地滿足我們的要求。不過，我們也可以選擇從自定義資料來源獲取資料。可能的來源包括 API、自定義資料庫表、外掛/主題選項、網站資料和分類法。

我們的想法是考慮如何將自定義資料納入網站。然後，制定一個易於維護的實施計劃。區塊繫結 API 提供了大量這樣做的選項。

進一步使用區塊繫結API

區塊繫結 API 並非成品。它將隨著WordPress的每一個新版本而不斷髮展。

例如，WordPress 6.7 中就計劃包含幾項改進：

• 將區塊繫結到可用資料來源的預設使用者介面。
• 便於識別的文章元標籤。
• 與自定義文章型別主題模板相容。
• 用於確定誰可以編輯塊繫結的預設許可權。
• 多項底層技術改進。

請繼續關注使 API 更易使用、功能更強大的新功能。

您還可以安裝 Gutenberg 外掛，以便在功能合併到 WordPress 核心之前儘早使用它們。我們建議在暫存或本地環境中使用。

小結

區塊繫結 API 代表著我們在 WordPress 中處理自定義資料方式的轉變。在許多情況下，它取代了對外掛或自定義區塊的需求。它為 WordPress 區塊和塊主題帶來了更大的靈活性。

將它新增到您的工作流程中可以減少您的開發時間。作為一項本地功能，它還能比依賴外掛提高效能。

這些都是現在就開始使用它的重要原因。它的未來看起來更加光明！

我們才剛剛開始探索本文所涵蓋的各種可能性。通過探索更多有關連線自定義欄位、使用自定義繫結源以及學習如何在編輯器中獲取和設定區塊繫結值的內容，深入瞭解區塊繫結 API。