WordPress 6.5新特性:塊綁定API使用示例詳解

WordPress 6.5推出了一項(xiàng)新功能:塊綁定API(Block Bindings API)。這是一個讓塊編輯器更易用的工具,可以讓你更簡單地把各種數(shù)據(jù)加到網(wǎng)站的不同部分。這意味著你在編輯時,需要寫的自定義代碼會少很多。

圖片[1]-WordPress 6.5新特性:塊綁定API使用示例詳解-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

什么是塊綁定 API?

假如你有一個基本的塊,在網(wǎng)頁上需要用這個塊顯示一些特定來源的信息,比如文章的詳細(xì)信息或者是一些自定義的PHP代碼制定的規(guī)則。你怎么做呢?這里是讓它變得簡單明了的方法。

圖片[2]-WordPress 6.5新特性:塊綁定API使用示例詳解-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

在以前的WordPress版本中,如果你想在網(wǎng)頁上顯示一些特別的信息,比如文章的額外詳情或是一些由PHP邏輯定制的內(nèi)容,你通常需要創(chuàng)建一個全新的自定義塊。這個過程可能既復(fù)雜又耗時。

但是,從WordPress 6.5開始,情況就變得簡單多了。有了塊綁定API,你現(xiàn)在可以讓已有的標(biāo)準(zhǔn)塊,比如段落或標(biāo)題,直接從不同的來源獲取數(shù)據(jù),而不需要自己動手制作一個全新的塊。這意味著,你可以讓一個段落塊直接顯示文章的元數(shù)據(jù),或者讓一個標(biāo)題塊展示由一個插件生成的PHP邏輯,所有這些都無需深入React編程、塊注冊或從零開始創(chuàng)建新的自定義塊。

WordPress 6.5的塊綁定API是一個重大更新,它讓編輯器和塊的擴(kuò)展更加簡單。實(shí)際上,這個新API已經(jīng)被用來演示如何將文章的自定義字段鏈接到核心塊。

進(jìn)階一點(diǎn),你還可以使用這項(xiàng)功能來自定義塊,并從你設(shè)定的特殊來源獲取數(shù)據(jù)。

想要深入了解如何創(chuàng)建和使用塊綁定,可以查看WordPress開發(fā)者博客上的介紹性教程。

塊綁定如何工作?

概述

在我們深入了解如何使用塊綁定API來鏈接到自定義數(shù)據(jù)源之前,我們會先簡單解釋一下這個API是怎么工作的。接著,我們會詳細(xì)介紹如何把標(biāo)準(zhǔn)塊連接到文章的自定義字段里。

下面是一個表格,展示了現(xiàn)在可以鏈接的塊和它們的屬性:

圖片[3]-WordPress 6.5新特性:塊綁定API使用示例詳解-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

雖然現(xiàn)在能用這個新功能的塊和屬性還不多,但它們已經(jīng)足夠覆蓋很多常見的需求。將來,計(jì)劃將這個功能擴(kuò)展到更多的核心塊和自定義塊上。

要使用塊綁定,你需要設(shè)置一下,告訴WordPress使用特定的標(biāo)記從你選擇的數(shù)據(jù)源獲取信息。一旦設(shè)置好,在網(wǎng)頁前端顯示時,就會使用這些數(shù)據(jù)源的邏輯來顯示內(nèi)容。

一旦一個屬性被綁定,你就不能在編輯器中改動它了,并且編輯器會顯示一個標(biāo)志,告訴你這個屬性已經(jīng)與某個數(shù)據(jù)源連接了。

圖片[4]-WordPress 6.5新特性:塊綁定API使用示例詳解-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

下面的示例,是如何通過內(nèi)置自定義字段支持來利用它。

自定義字段

在塊綁定API的第一版中,還沒有一個直接的界面來鏈接屬性到自定義字段。這意味著你需要手動進(jìn)入Gutenberg的代碼編輯器來添加特定的代碼。

如果你想把支持的屬性連接到文章的自定義字段,你可以按照以下的格式添加代碼:

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

"source":"core/post-meta",

"args":{

"key":"book-genre"

}

}

}

}

} -->

<p></p>

<!-- /wp:paragraph -->

為了讓這個功能正常工作,你需要在你的主題的functions.php文件或一個插件里添加一些代碼,這樣才能確保你的自定義字段已經(jīng)成功地注冊到文章元數(shù)據(jù)中。

register_meta(

'post',

'book-genre',

array(

'show_in_rest' => true,

'single' => true,

'type' => 'string',

'default' => 'Default text field',

)

);

請記住,為了安全起見,你需要暫時將show_in_rest屬性設(shè)置為true。

未來更多數(shù)據(jù)來源

支持文章元數(shù)據(jù)只是第一步。我們計(jì)劃在WordPress 6.6中添加更多的數(shù)據(jù)來源,比如網(wǎng)站信息、用戶信息和分類信息。

而且,塊綁定API現(xiàn)在就已經(jīng)能讓你注冊自己的數(shù)據(jù)來源了,這個功能和我們用來注冊文章元數(shù)據(jù)的功能是一樣的。

注冊自定義源

概述

要創(chuàng)建新的塊綁定數(shù)據(jù)源,你需要用到一個名為register_block_bindings_source()的函數(shù),下面是它的基本格式:

register_block_bindings_source(

string $source_name,

array $source_properties

);

要注冊一個新的塊綁定源,你可以使用兩個參數(shù):

  1. $source_name:這是你的自定義數(shù)據(jù)源的唯一標(biāo)識符,格式應(yīng)該是”命名空間/名稱”。記得每個數(shù)據(jù)源都需要一個獨(dú)一無二的命名空間。
  2. $source_properties:這是一個定義數(shù)據(jù)源特性的數(shù)組,包括:
    • label:這是一個文本字符串,用來描述你的數(shù)據(jù)源,雖然目前這個標(biāo)簽在界面上還看不到。
    • get_value_callback:這是一個PHP函數(shù)或閉包,會在塊的綁定源需要用到數(shù)據(jù)時被調(diào)用。
    • use_context(可選):這是一個數(shù)組,用來指定如果你的數(shù)據(jù)源需要額外的信息時(比如當(dāng)前文章的ID),應(yīng)該包含哪些內(nèi)容。

當(dāng)WordPress處理塊并發(fā)現(xiàn)有自定義數(shù)據(jù)源需要加載時,它會調(diào)用get_value_callback函數(shù)。這個函數(shù)的設(shè)置應(yīng)該是這樣的:

projectslug_bindings_callback(

array $source_args,

WP_Block $block_instance,

string $attribute_name

);

使用注冊機(jī)制

在實(shí)踐中,您可以使用以下注冊函數(shù)來創(chuàng)建版權(quá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 '&copy; ' . date( 'Y' );

}

下面是一個例子,展示了如何把一個段落塊鏈接到版權(quán)信息的數(shù)據(jù)源,并且展示了它在網(wǎng)站前端的樣子:

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

"source":"projectslug/copyright"

}

}

}

} -->

<p>Copyright Block</p>

<!-- /wp:paragraph -->
圖片[5]-WordPress 6.5新特性:塊綁定API使用示例詳解-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

當(dāng)然,這只是一個基本的例子。你可以使用函數(shù)中的其他參數(shù)來構(gòu)建更復(fù)雜的功能。
其他API函數(shù)

此外,目前還有其他一些函數(shù)是公開可用的:

  • unregister_block_bindings_source($source_name):用來取消注冊已經(jīng)設(shè)置的數(shù)據(jù)源。
  • get_all_registered_block_bindings_sources():用來獲取所有已經(jīng)注冊的數(shù)據(jù)源的列表。
  • get_block_bindings_source($source_name):用來獲取具體的已注冊數(shù)據(jù)源的詳細(xì)信息。

還要注意,雖然核心數(shù)據(jù)源可以在編輯器的用戶界面中使用,但編輯器的這些API目前仍是私有的。這意味著,我們還在討論如何在用戶界面中標(biāo)準(zhǔn)化使用這些功能。

因此,如果你想要一個易于使用的界面來處理自定義字段,你現(xiàn)在需要自己來開發(fā)這個功能。

進(jìn)一步學(xué)習(xí)和后續(xù)步驟

想要在你的項(xiàng)目里使用塊綁定獲得更多靈感嗎?看看block-bindings.php文件中的注冊代碼和內(nèi)置的core/post-meta數(shù)據(jù)源,同時也不要錯過我們的塊綁定入門教程系列。

塊綁定還處于初級階段,未來我們計(jì)劃實(shí)現(xiàn)以下功能:

  • 允許直接在用戶界面中編輯元字段值。
  • 在編輯器中添加功能,使用戶能夠輕松添加綁定。
  • 引入新的內(nèi)置數(shù)據(jù)源,包括站點(diǎn)數(shù)據(jù)、文章數(shù)據(jù)和分類數(shù)據(jù)。
  • 擴(kuò)展對更多核心塊的支持。
  • 提供開發(fā)人員擴(kuò)展編輯器用戶界面的工具。

我們非常歡迎大家的反饋!你可以通過Github或WordPress Slack與我們分享你的想法和使用案例,來幫助我們共同完善塊綁定API。


聯(lián)系我們
教程看不懂?聯(lián)系我們?yōu)槟赓M(fèi)解答!免費(fèi)助力個人,小企站點(diǎn)!
客服微信
客服微信
電話:020-2206-9892
QQ咨詢:1025174874
郵件:info@361sale.com
工作時間:周一至周五,9:30-18:30,節(jié)假日休息
? 轉(zhuǎn)載聲明
本文作者:Harry
THE END
喜歡就支持一下吧
點(diǎn)贊0 分享
評論 搶沙發(fā)

請登錄后發(fā)表評論

    暫無評論內(nèi)容