WordPress 6.5 引入了一種擴(kuò)展塊的新方法——塊綁定 API（Block Bindings?API），該方法大大減少了在塊編輯器中集成不同類型數(shù)據(jù)所需的自定義代碼。
什么是塊綁定 API？
假設(shè)給定一個(gè)核心塊，并且用它顯示來自特定源的數(shù)據(jù)，例如，文章元數(shù)據(jù)或自定義PHP邏輯。如何實(shí)現(xiàn)呢？
這實(shí)際上是一個(gè)棘手的問題：在 WordPress 的早期版本中，您無(wú)法使用Gutenberg的核心塊來執(zhí)行此操作 – 相反，它需要?jiǎng)?chuàng)建一個(gè)具有特定邏輯的自定義塊來從相關(guān)源中讀取數(shù)據(jù)。但從 WordPress 6.5 開始已經(jīng)有實(shí)現(xiàn)的方式。
使用塊綁定 API，您現(xiàn)在可以綁定核心塊以從不同的源讀取，而無(wú)需編寫自定義塊樣板 – 這意味著可以綁定段落以從文章的元數(shù)據(jù)中讀取，或綁定標(biāo)題以從插件中讀取PHP 邏輯，所有這些都不需要處理React、塊注冊(cè)以及為您想要讀取的每個(gè)新源從頭開始編寫自定義塊的其他細(xì)節(jié)。
WordPress 6.5 中塊綁定 API 的初始版本是朝著簡(jiǎn)化擴(kuò)展編輯器和擴(kuò)展塊功能的過程邁出的一大步。在幕后，該 API 已經(jīng)支持了 WordPress 6.5 中附帶的一個(gè)展示功能：將核心塊連接文章元數(shù)據(jù)中的自定義字段。
使用相同的功能，作為高級(jí)用例，還可以定義塊并從自定義源讀取塊 – 下面簡(jiǎn)單說一下。
注意：有關(guān)創(chuàng)建和使用塊綁定的更詳細(xì)演練，請(qǐng)參閱WordPress 開發(fā)人員博客中的塊綁定簡(jiǎn)介教程。
塊綁定如何工作？
概述
在了解塊綁定可以通過自定義源啟用的豐富功能之前，本節(jié)將首先回顧 API 的一般工作原理，然后詳細(xì)說明如何將核心塊綁定到文章元數(shù)據(jù)中的自定義字段。
下表列出了當(dāng)前可以綁定的兼容塊和屬性：
| 支持的塊 | 支持的屬性 |
| 圖像 | 網(wǎng)址、ALT、標(biāo)題 |
| 段落 | 內(nèi)容 |
| 標(biāo)題 | 內(nèi)容 |
| 按鈕 | url、文本、鏈接目標(biāo)、rel |
雖然目前兼容性列表還很短，但這已經(jīng)支持了廣泛的用例，并且計(jì)劃在未來支持其余核心塊以及自定義塊。
要使用塊綁定，您需要指定應(yīng)使用塊標(biāo)記從特定的注冊(cè)源讀取這些屬性；然后，當(dāng)在前端渲染時(shí)，將執(zhí)行這些源的邏輯。
綁定后，相關(guān)屬性的編輯將被鎖定，并且編輯器中將出現(xiàn)指示器以表明綁定已創(chuàng)建。
下面的示例，是如何通過內(nèi)置自定義字段支持來利用它。
自定義字段
重要的是，在塊綁定 API 的第一個(gè)版本中，還沒有用于將屬性綁定到自定義字段的UI。因此，有必要使用古騰堡中的代碼編輯器手動(dòng)添加標(biāo)記。
要將受支持的屬性綁定到文章元數(shù)據(jù)中的自定義字段，您可以使用如下標(biāo)記：
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"book-genre"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->為了使其工作，您需要通過在主題functions.php或插件中包含如下代碼來確保該字段已注冊(cè)到文章元數(shù)據(jù)。
register_meta(
'post',
'book-genre',
array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'default' => 'Default text field',
)
);*請(qǐng)注意，出于安全考慮，該show_in_rest屬性必須暫時(shí)設(shè)置為true，盡管后續(xù)可能會(huì)想辦法刪除此要求。
未來更多數(shù)據(jù)來源
對(duì)文章元數(shù)據(jù)的支持只是一個(gè)開始，計(jì)劃是為 WordPress 6.6 添加更多內(nèi)置數(shù)據(jù)來源，例如站點(diǎn)、用戶和分類數(shù)據(jù)。
即使這樣，塊綁定 API 已經(jīng)具有允許注冊(cè)自定義源的功能，這與內(nèi)部用于注冊(cè)上述源的core/post-meta功能相同。
注冊(cè)自定義源
概述
要注冊(cè)塊綁定源，需要使用具有以下簽名的函數(shù)register_block_bindings_source()：
register_block_bindings_source(
string $source_name,
array $source_properties
);有兩個(gè)可用參數(shù)：
- $source_name：自定義綁定源的唯一名稱，格式為
namespace/slug. 命名空間是必需的。 - $source_properties：用于定義綁定源的屬性數(shù)組：
- label：表示綁定源的國(guó)際化文本字符串。注意：當(dāng)前未在 UI 中的任何位置顯示。
- get_value_callback：當(dāng)塊的綁定屬性源與參數(shù)
$source_name匹配時(shí)調(diào)用的 PHP 可調(diào)用對(duì)象（函數(shù)、閉包等）。 - use_context：（?可選）如果回調(diào)需要，則使用上下文數(shù)組擴(kuò)展塊實(shí)例。例如，要使用當(dāng)前帖子 ID，應(yīng)將其設(shè)置為
[ 'postId' ]。
當(dāng) WordPress 在解析塊時(shí)遇到自定義綁定源時(shí)，它將運(yùn)行該get_value_callback?函數(shù)，其簽名應(yīng)如下所示：
projectslug_bindings_callback(
array $source_args,
WP_Block $block_instance,
string $attribute_name
);它最多可以接受三個(gè)參數(shù)，但您不需要包含它們，除非您的邏輯需要它們：
- $source_args：通過塊的
metadata.bindings.$attribute.args屬性傳遞的參數(shù)數(shù)組。 - $block_instance：綁定作為
WP_Block對(duì)象連接到的塊的當(dāng)前實(shí)例。 - $attribute_name：通過塊上的
metadata.bindings.$attribute屬性鍵設(shè)置的當(dāng)前屬性。
使用注冊(cè)機(jī)制
在實(shí)踐中，您可以使用以下注冊(cè)函數(shù)來創(chuàng)建版權(quán)信息的簡(jiǎn)單綁定：
add_action( 'init', 'projectslug_register_block_bindings' );
function projectslug_register_block_bindings() {
register_block_bindings_source( 'projectslug/copyright', array(
'label' => __( 'Copyright', 'projectslug' ),
'get_value_callback' => 'projectslug_copyright_binding'
) );
}
function projectslug_copyright_binding() {
return '© ' . date( 'Y' );
}以下是如何將段落綁定到塊標(biāo)記中的版權(quán)源，以及它在前端的外觀：
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"projectslug/copyright"
}
}
}
} -->
<p>Copyright Block</p>
<!-- /wp:paragraph -->
當(dāng)然，這是一個(gè)簡(jiǎn)單的示例，您可以利用回調(diào)簽名中的其他參數(shù)來創(chuàng)建更廣泛的邏輯。
其他API函數(shù)
此外，目前還有一些其他函數(shù)屬于公共 API：
- unregister_block_bindings_source( $string source_name ) : 取消注冊(cè)源
- get_all_registered_block_bindings_sources()：獲取所有已注冊(cè)的源
- get_block_bindings_source( $string source_name ) : 檢索已注冊(cè)的源
另請(qǐng)注意，雖然核心源在編輯器 UI 中使用共享 API，但請(qǐng)注意，這些編輯器 API 將暫時(shí)保持私有狀態(tài)，同時(shí)繼續(xù)討論如何圍繞此功能標(biāo)準(zhǔn)化 UI 擴(kuò)展。
這意味著，如果您想實(shí)現(xiàn)一個(gè) UI 來輕松處理自定義字段，目前您需要自己創(chuàng)建該功能。
進(jìn)一步學(xué)習(xí)和后續(xù)步驟
有關(guān)如何在自己的項(xiàng)目中使用塊綁定的更多靈感，請(qǐng)參閱block-bindings.php中的注冊(cè)邏輯和內(nèi)置的core/post-meta源，并查看塊綁定簡(jiǎn)介教程系列。
塊綁定才剛剛開始，未來的計(jì)劃包括：
- 添加直接從 UI編輯元字段值的可能性。
- 添加 UI 以允許用戶通過編輯器添加綁定。
- 創(chuàng)建新的內(nèi)置源：站點(diǎn)數(shù)據(jù)、發(fā)布數(shù)據(jù)和分類數(shù)據(jù)。
- 添加對(duì)更多核心塊的支持。
- 為開發(fā)人員添加擴(kuò)展編輯器 UI 的能力。
與往常一樣，我們非常歡迎提供反饋，我們邀請(qǐng)您在Github、或 WordPress?Slack上分享您的想法和用例，以幫助塑造 Block Bindings API 的開發(fā)。
