Interactivity API 是 在 WordPress 6.5 中引入的一项技术，它为开发者提供了一种标准化的方式，以便在前端为区块添加交互功能。该 API 也被许多 Core WordPress 区块所使用，包括搜索、查询、导航和文件区块。
这一标准化使得开发者能够更轻松地为前端创建丰富的交互式用户体验，从简单的计数器或弹窗到更复杂的功能，如即时页面导航、即时搜索、购物车或结账流程。
区块之间可以共享数据、动作和回调函数。这使得区块间的通信变得更加简单且不易出错。例如，点击“添加到购物车”区块可以无缝更新另一个“购物车”区块的内容。
如需了解更多关于 Interactivity API 的起源信息，请参阅原始提案。您还可以查阅合并公告、状态更新文章以及官方的 Trac 工单。
Interactivity API 由包@wordpress/interactivity 提供支持，该包自 v6.5 起已捆绑在 WordPress Core 中。浏览 Interactivity API 文档
使用以下链接查找您感兴趣的主题。如果您之前从未使用过 Interactivity API，建议按照列出的顺序阅读以下资源。
- 要求: 在使用 Interactivity API 开始创建交互式区块之前，请先查看此部分。
- 快速入门指南: 在一分钟内让一个使用 Interactivity API 的自定义区块运行起来。
- 教程：初探 Interactivity API: 这篇来自 WordPress Developer Blog 的文章是了解 Interactivity API 的好方法。
- 核心概念: 通过本部分深入了解与 Interactivity API 开发相关的概念和心理模型。
- 指令和 Store: 深入探究 API 的内部工作原理、指令列表以及 Store 的工作机制。
- 文档和示例: 有关 Interactivity API 的其他学习/阅读资源。
若想更深入地了解 Interactivity API 是什么，或寻找关于此标准的疑问解答，请查看以下资源：
- 关于 Interactivity API: 了解 API 的目标以及为何采用标准化方式来为区块添加交互功能的理由。
- 常见问题解答 (FAQ): 获取关于该技术背后原理及替代方案的常见问答回复。
Interactivity API 的要求
Interactivity API 已包含在 WordPress 6.5 的 Core 中。对于较低版本，您需要在 WordPress 安装中安装并激活 Gutenberg 17.5 或更高版本。
还需要强调的是，区块创建工作流不会改变，所有 先决条件 保持不变。这些包括：
设置好区块开发环境并运行 WordPress 6.5+（或 Gutenberg 17.5+）后，您就可以开始创建交互功能了。
代码要求
将交互功能添加到您的项目中
使用以下命令将 Interactivity API 安装到您的项目中：
npm install @wordpress/interactivity --save
将 store 导入到您的 view.js 中。更多信息请参阅 store 文档。
import { store } from '@wordpress/interactivity';
在 block.json 中添加对 Interactivity API 的支持
若要指示该区块 支持 Interactivity API 的功能，请在区块的 block.json 文件的 supports 属性中添加 "interactivity": true。
在 block.json 中：
"supports": {
"interactivity": true
},
请参阅 interactivity 支持属性文档以获取关于此属性的更详细描述。
使用 viewScriptModule 加载 Interactivity API JavaScript 代码
Interactivity API 提供了 @wordpress/interactivity Script Module。使用 Interactivity API 的 JavaScript 应实现为 Script Modules，以便它们可以依赖 @wordpress/interactivity。Script Modules 自 WordPress 6.5 起可用。区块可以使用 viewScriptModule 区块元数据轻松注册它们的 Script Modules：
在 block.json 中：
{
"viewScriptModule": "file:./view.js"
}
使用 viewScriptModule 还需要为 wp-scripts 的 build 和 start 脚本启用 --experimental-modules 标志，以确保正确构建 Script Modules。
注意： 如果您使用
@wordpress/create-block-interactive-template脚手架创建了您的区块，则该标志已包含在您项目的package.json脚本中，无需手动配置。
如果需要手动添加，请更新您的 package.json：
{
"scripts": {
"build": "wp-scripts build --experimental-modules",
"start": "wp-scripts start --experimental-modules"
}
}
向 DOM 元素添加 wp-interactive 指令
要在 DOM 元素（及其子元素）中“激活” Interactivity API，请在区块的 render.php 或 save.js 文件中的 DOM 元素上添加 wp-interactive 指令。
<div data-wp-interactive="myPlugin">
<!-- Interactivity API zone -->
</div>
请参阅 wp-interactive 文档以获取关于此指令的更详细描述。
文档与示例
以下是一些有关学习和阅读更多关于 Interactivity API 的资源：
- WordPress 6.5 开发者说明
- 合并公告
- 提案：Interactivity API —— 在构建交互式区块时提供更好的开发者体验
- Interactivity API 讨论区，特别是 展示 相关讨论。
- wpmovies.dev 演示及其 wp-movies-demo 仓库
- 在 block-development-examples 中使用 Interactivity API 的示例：