WordPress 6.4 引入了區(qū)塊鉤子（Block Hooks） ( #53987 )，該功能為塊主題提供了可擴展性機制。這是模擬 WordPress 的Hooks概念的第一步， 該概念允許開發(fā)人員使用過濾器和操作來擴展經(jīng)典主題。
具體來說，Block Hooks API允許塊相對于其他塊類型的實例自動插入自身。例如，“喜歡”按鈕塊可以要求插入到帖子內(nèi)容塊之前，或者電子商務(wù)購物車塊可以要求插入到導(dǎo)航塊之后。
原則和當前限制
Block Hooks有兩個核心原則：
- 一旦包含掛鉤塊的插件被激活，前端插入就應(yīng)該發(fā)生。換句話說，用戶不需要在編輯器中手動插入塊。同樣，禁用插件應(yīng)該從前端刪除掛鉤塊。
- 用戶對任何自動插入的塊擁有最終控制權(quán)。這意味著掛鉤的塊在編輯器中可見，并且用戶保留、刪除、自定義或移動該塊的決定將受到尊重并反映在前端。
為了兼顧這兩個原則，必須進行權(quán)衡。塊掛鉤僅限于模板、模板部分和樣板（即定義主題布局的元素）。對于樣板（patterns），這包括由主題、來自 Block Pattern Directory或?qū)?register_block_pattern 的調(diào)用提供的樣板。
區(qū)塊無法掛鉤到用戶制作的帖子內(nèi)容或樣板，例如同步樣板或用戶已修改的主題模板和模板部分。
此外，從 WordPress 6.4 開始，您無法自動插入具有保存功能的塊，否則會出現(xiàn)塊驗證錯誤。用通俗的話說，這意味著塊鉤子與動態(tài)塊一起工作，而不是靜態(tài)塊。關(guān)于兩者的區(qū)別可以參考這篇文章。
使用區(qū)塊鉤子
您可以通過兩種不同的方式實現(xiàn)塊鉤子：在塊的block.json文件中或使用新的hooked_block_types 過濾器。雖然更簡單，但該block.json方法提供了更有限的實現(xiàn)，因此讓我們首先回顧一下。
block.json
這種block.json方法允許您無條件地掛載第三方塊，這意味著在上述限制的情況下，該塊將相對于目標（錨點）塊的所有實例插入。
在塊的block.json文件中，包含該blockHooks屬性。此屬性采用一個對象，其中鍵 ( string) 是要掛載的塊的名稱，值 ( string) 指定其位置?？赡艿奈恢糜校?/p>
before– 在目標塊之前注入。after– 在目標塊之后注入。firstChild– 在目標容器塊的第一個內(nèi)部塊之前注入。lastChild– 在目標容器塊的最后一個內(nèi)部塊之后注入。
{
blockHooks: {
'core/verse': 'before'
'core/spacer': 'after',
'core/column': 'firstChild',
'core/comment-template': 'lastChild',
}
}在上面的示例中，該塊將插入到出現(xiàn)在未修改的模板、模板部分或樣板中的每個 Verse 塊之前。它還將被插入到每個 Spacer 塊之后，等等。
當使用 firstChild 或 lastChild 的block.json方法時，標題為“插件”的設(shè)置側(cè)邊欄面板將被添加到編輯器中的目標塊中。這允許用戶打開和關(guān)閉掛鉤塊。
下面是一個鏈接到“評論模板”塊中的 lastChild 位置的“贊”按鈕塊的示例。
hooked_block_types
hooked_block_types過濾器提供了更大的靈活性。它允許您像 block.json 方法一樣無條件地掛鉤任何動態(tài)塊，或者根據(jù)目標（錨點）塊所在的模板、模板部分或樣板有條件地掛鉤。
過濾器的回調(diào)函數(shù)接受四個參數(shù)：
$hooked_blocks(array) – 鉤子塊的數(shù)組。$position?(string)?– 掛載的塊的相對位置：before、after、first_child、 或last_child。$anchor_block(字符串) – 錨塊的名稱。$context?(WP_Block_Template|array)?– 錨塊所屬的塊模板、模板部分或樣板。
下面是一些使用Like 按鈕塊插件 (?ockham/like-button) 的示例，旨在演示第三方塊中的區(qū)塊鉤子功能。該樣板示例確實需要2024主題。
function example_block_hooks( $hooked_blocks, $position, $anchor_block, $context ) {
// Template/Template Part hooks.
if ( $context instanceof WP_Block_Template ) {
// Hooks the "Like" button block before the Post Title in the Single template.
if (
'core/post-title' === $anchor_block &&
'before' === $position &&
'single' === $context->slug
) {
$hooked_blocks[] = 'ockham/like-button';
}
// Hooks the Login/Logout link block after the Navigation block if the context of the template part is a header.
if (
'core/group' === $anchor_block &&
'last_child' === $position &&
'header' === $context->area
) {
$hooked_blocks[] = 'core/loginout';
}
}
// Pattern hooks.
if ( is_array( $context ) && isset( $context['slug'] ) ) {
// Hooks into the Post Meta pattern in the Twenty Twenty-Four theme.
if (
'core/post-terms' === $anchor_block &&
'after' === $position &&
'twentytwentyfour/post-meta' === $context['slug']
) {
$hooked_blocks[] = 'ockham/like-button';
}
}
return $hooked_blocks;
}
add_filter( 'hooked_block_types', 'example_block_hooks', 10, 4 );值得注意的是，$context?將是?WP_Block_Template?模板和模板部件的?object?類型以及樣板的 array?類型。如果要使用此參數(shù)有條件地插入塊，請確保在應(yīng)用掛鉤塊之前檢查參數(shù)類型。
您還會注意到，您只能指定正在掛鉤的塊的名稱。無法設(shè)置掛鉤塊的屬性，因此僅插入塊的默認實例。區(qū)塊鉤子的未來改進可能會解決此限制和其他限制，為開發(fā)人員擴展塊主題提供可靠的方法。
有關(guān)當前正在開發(fā)哪些附加功能的更多信息，請繼續(xù)關(guān)注區(qū)塊鉤子改進的跟蹤問題。
