WordPress 6.5新特性:块绑定API使用示例详解

WordPress 6.5推出了一项新功能:块绑定API(Block Bindings API)。这是一个让块编辑器更易用的工具,可以让你更简单地把各种数据加到网站的不同部分。这意味着你在编辑时,需要写的自定义代码会少很多。

WordPress 6.5新特性:块绑定API使用示例详解

什么是块绑定 API?

假如你有一个基本的块,在网页上需要用这个块显示一些特定来源的信息,比如文章的详细信息或者是一些自定义的PHP代码制定的规则。你怎么做呢?这里是让它变得简单明了的方法。

WordPress 6.5新特性:块绑定API使用示例详解

在以前的WordPress版本中,如果你想在网页上显示一些特别的信息,比如文章的额外详情或是一些由PHP逻辑定制的内容,你通常需要创建一个全新的自定义块。这个过程可能既复杂又耗时。

但是,从WordPress 6.5开始,情况就变得简单多了。有了块绑定API,你现在可以让已有的标准块,比如段落或标题,直接从不同的来源获取数据,而不需要自己动手制作一个全新的块。这意味着,你可以让一个段落块直接显示文章的元数据,或者让一个标题块展示由一个插件生成的PHP逻辑,所有这些都无需深入React编程、块注册或从零开始创建新的自定义块。

WordPress 6.5的块绑定API是一个重大更新,它让编辑器和块的扩展更加简单。实际上,这个新API已经被用来演示如何将文章的自定义字段链接到核心块。

进阶一点,你还可以使用这项功能来自定义块,并从你设定的特殊来源获取数据。

想要深入了解如何创建和使用块绑定,可以查看WordPress开发者博客上的介绍性教程

块绑定如何工作?

概述

在我们深入了解如何使用块绑定API来链接到自定义数据源之前,我们会先简单解释一下这个API是怎么工作的。接着,我们会详细介绍如何把标准块连接到文章的自定义字段里。

下面是一个表格,展示了现在可以链接的块和它们的属性:

WordPress 6.5新特性:块绑定API使用示例详解

虽然现在能用这个新功能的块和属性还不多,但它们已经足够覆盖很多常见的需求。将来,计划将这个功能扩展到更多的核心块和自定义块上。

要使用块绑定,你需要设置一下,告诉WordPress使用特定的标记从你选择的数据源获取信息。一旦设置好,在网页前端显示时,就会使用这些数据源的逻辑来显示内容。

一旦一个属性被绑定,你就不能在编辑器中改动它了,并且编辑器会显示一个标志,告诉你这个属性已经与某个数据源连接了。

WordPress 6.5新特性:块绑定API使用示例详解

下面的示例,是如何通过内置自定义字段支持来利用它。

自定义字段

在块绑定API的第一版中,还没有一个直接的界面来链接属性到自定义字段。这意味着你需要手动进入Gutenberg的代码编辑器来添加特定的代码。

如果你想把支持的属性连接到文章的自定义字段,你可以按照以下的格式添加代码:

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

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

"args":{

"key":"book-genre"

}

}

}

}

} -->

<p></p>

<!-- /wp:paragraph -->

为了让这个功能正常工作,你需要在你的主题的functions.php文件或一个插件里添加一些代码,这样才能确保你的自定义字段已经成功地注册到文章元数据中。

register_meta(

'post',

'book-genre',

array(

'show_in_rest' => true,

'single' => true,

'type' => 'string',

'default' => 'Default text field',

)

);

请记住,为了安全起见,你需要暂时将show_in_rest属性设置为true

未来更多数据来源

支持文章元数据只是第一步。我们计划在WordPress 6.6中添加更多的数据来源,比如网站信息、用户信息和分类信息。

而且,块绑定API现在就已经能让你注册自己的数据来源了,这个功能和我们用来注册文章元数据的功能是一样的。

注册自定义源

概述

要创建新的块绑定数据源,你需要用到一个名为register_block_bindings_source()的函数,下面是它的基本格式:

register_block_bindings_source(

string $source_name,

array $source_properties

);

要注册一个新的块绑定源,你可以使用两个参数:

  1. $source_name:这是你的自定义数据源的唯一标识符,格式应该是”命名空间/名称”。记得每个数据源都需要一个独一无二的命名空间。
  2. $source_properties:这是一个定义数据源特性的数组,包括:
    • label:这是一个文本字符串,用来描述你的数据源,虽然目前这个标签在界面上还看不到。
    • get_value_callback:这是一个PHP函数或闭包,会在块的绑定源需要用到数据时被调用。
    • use_context(可选):这是一个数组,用来指定如果你的数据源需要额外的信息时(比如当前文章的ID),应该包含哪些内容。

当WordPress处理块并发现有自定义数据源需要加载时,它会调用get_value_callback函数。这个函数的设置应该是这样的:

projectslug_bindings_callback(

array $source_args,

WP_Block $block_instance,

string $attribute_name

);

使用注册机制

在实践中,您可以使用以下注册函数来创建版权信息的简单绑定:

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' );

}

下面是一个例子,展示了如何把一个段落块链接到版权信息的数据源,并且展示了它在网站前端的样子:

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

"source":"projectslug/copyright"

}

}

}

} -->

<p>Copyright Block</p>

<!-- /wp:paragraph -->
WordPress 6.5新特性:块绑定API使用示例详解

当然,这只是一个基本的例子。你可以使用函数中的其他参数来构建更复杂的功能。
其他API函数

此外,目前还有其他一些函数是公开可用的:

  • unregister_block_bindings_source($source_name):用来取消注册已经设置的数据源。
  • get_all_registered_block_bindings_sources():用来获取所有已经注册的数据源的列表。
  • get_block_bindings_source($source_name):用来获取具体的已注册数据源的详细信息。

还要注意,虽然核心数据源可以在编辑器的用户界面中使用,但编辑器的这些API目前仍是私有的。这意味着,我们还在讨论如何在用户界面中标准化使用这些功能。

因此,如果你想要一个易于使用的界面来处理自定义字段,你现在需要自己来开发这个功能。

进一步学习和后续步骤

想要在你的项目里使用块绑定获得更多灵感吗?看看block-bindings.php文件中的注册代码和内置的core/post-meta数据源,同时也不要错过我们的块绑定入门教程系列

块绑定还处于初级阶段,未来我们计划实现以下功能:

  • 允许直接在用户界面中编辑元字段值。
  • 在编辑器中添加功能,使用户能够轻松添加绑定。
  • 引入新的内置数据源,包括站点数据、文章数据和分类数据。
  • 扩展对更多核心块的支持。
  • 提供开发人员扩展编辑器用户界面的工具。

我们非常欢迎大家的反馈!你可以通过Github或WordPress Slack与我们分享你的想法和使用案例,来帮助我们共同完善块绑定API。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/6199/

(1)
上一篇 2024年 3月 21日 下午2:03
下一篇 2024年 3月 21日 下午6:07

相关推荐

  • 如何在 WordPress 中创建最近评论页面

    想在你的WordPress网站上展示所有最新的评论吗?这可是个吸引用户参与讨论的比较好用的方法。现在,有了“最新评论”区块,在WordPress上创建这样的页面变得非常简单。我们会告诉你如何在WordPress中轻松创建最近评论页面。 为什么要创建最近的评论页面? 评论在构建WordPress网站社区时非常重要。它们让读者能够参与讨论,提问,与我们站长互动。…

    2024年 4月 17日 WordPress自学建站
    0011
  • 2024 年最受欢迎的CMS开源程序对比 (WordPress、Joomla、Drupal、Squarespace、Wix)

    什么是内容管理系统:CMS 平台中需要注意的事项 CMS 是一种软件,让不懂编程的人也能通过简单的界面来创建、编辑和发布网上的内容,比如文章、图片和视频等。 想要管好自己的内容营销,你得先确定内容策略和目标。现在市面上主要有四种内容管理的方法。 1. 网页内容管理 如果你想建一个经典的内容发布网站,不是博客、新闻网站或社交网络那种,需要具备能多人一起编辑内容…

    2024年 4月 3日 WordPress自学建站
    1061
  • 解决WordPress安装后出现的500错误的方法

    WordPress是一个常用的工具,让人们能够方便地搭建自己的网站或博客。但有时候,在安装WordPress后,你可能会遇到一个头疼的问题——500内部服务器错误。这个错误意味着服务器在处理你的请求时出了一点问题,不能正确响应。那怎么办呢?别担心,这个错误有很多可能的原因,下面我们会给你一些常见的解决办法,帮你找到问题的根源并解决它,让你的WordPress…

    2024年 4月 16日 WordPress自学建站
    005
  • 学习 WordPress——选择并安装主题学习

    今天,专注于一个核心组件——主题。主题,简单来说,就是网站的外观模板。使用WordPress的美好之处在于,你可以随时更换主题来改变网站的外观和感觉,而你的内容——文字、图片等——都会原封不动地保留。 值得一提的是,刚安装的主题可能与展示图或示例网页看起来不完全一样。这些示例只是展示了可能的设计,有时候,要达到这种效果,你可能还需要安装一些特定的插件。 Wo…

    2024年 3月 29日 WordPress自学建站
    0052
  • WordPress网站升级指南:如何从HTTP迁移至安全的HTTPS

    打算把你的WordPress网站从HTTP升级到HTTPS吗?很多人对此感兴趣,尤其是在Google宣布从2018年7月开始,Chrome浏览器会将未安装SSL证书的网站标记为不安全之后。 这篇文章会教你如何给你的WordPress网站添加SSL证书,从而安全地完成从HTTP到HTTPS的迁移。 如果你对SSL或HTTPS还不太了解,别担心,我会从头到尾详细…

    2024年 3月 26日 WordPress自学建站
    0035

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信