交互API是一标准系统指令，基于声明性代码，用于向块添加前端交互性.
指令使用特殊属性扩展HTML告诉Interactivity API将指定的行为附加到DOM元素，甚至转换它阿尔卑斯山.js，这是一种类似的方法，但明确设计为与WordPress无缝协作。
交互API的主要目标是提供一种标准且简单的方法来处理古腾堡块的前端交互.
标准决定一切开发人员更容易创建丰富的交互式用户体验从简单的计数器或弹出窗口到更复杂的功能，如即时页面导航、即时搜索或购物车和结账。
在没有Interactivity API的情况下，所有这些用户体验在技术上都是可能的。然而，用户体验越复杂，交互块越多，开发人员就越难构建和维护站点。他们必须自己解决很多挑战。API旨在提供现成的方法来支持这些类型的交互。
为了应对这一挑战，定义了交互API的以下要求/目标：
- Block-first和PHP-first：该API必须与PHP和当前块系统（包括动态块）配合良好，并在WordPress中进行了广泛扩展。它必须支持服务器端呈现。服务器渲染的HTML和客户端水化的HTML必须完全相同。这对SEO和用户体验很重要。
- 向后兼容：API必须与WordPress挂钩兼容，例如，挂钩可以修改服务器渲染的HTML。它还必须与国际化和站点上现有的JS库（例如jQuery）兼容。
- 选择性和逐步采用：与前一点相关，API必须保持可选。应该可以逐步采用它，这意味着不使用此API的交互块可以与使用它的交互块共存。
- 声明性和反应性：API必须使用声明性代码，侦听数据中的更改，并仅更新依赖于该数据的DOM部分。
- 表演者：运行时必须快速轻量级，以确保最佳用户体验。
- 可扩展：正如WordPress关注可扩展性一样，这个新系统必须提供可扩展性模式以覆盖大多数用例。
- 原子和可堆肥：为了创建灵活和可扩展的解决方案，需要有可组合的小型可重用部件来创建更复杂的系统。
- 与现有块开发工具兼容：API必须与现有的块构建工具集成，而无需开发人员进行额外的工具或配置。
除了所有这些要求外客户端导航除此之外，任何解决方案都应该简单且高效。客户端导航是在站点页面之间导航而不重新加载整个页面的过程，这是web开发人员所要求的最令人印象深刻的用户体验之一。因此，此功能应该与此新系统兼容。
指令是深层次的结果研究不同的可能性和方法。我们发现此设计最有效地涵盖了需求。
API是为块世界设计的，它将WordPress与web标准紧密联系的历史铭记在心。
由于指令是HTML属性，因此它们非常适合于动态块和PHP。
动态块示例
<迪夫data-wp-interactive='wpmovies'<?php echo wp_interactivity_data_wp_context（数组（“isOpen”=>false））；？>data-wp-watch=“callbacks.logIsOpen”><按钮数据wp打开--click=“actions.toggle”data-wp-bind--aria-expanded=“context.isOpen”aria-controls=“p-1”>切换</按钮><p id=“p-1”data-wp-bind---hidden=“！context.isOpen”>此元素现在可见！</p></div>
如您所见，指令如下data-wp-on--单击或data-wp-bind—隐藏作为自定义HTML属性添加。WordPress可以在服务器上处理这个HTML，处理指令的逻辑并创建适当的标记。
由于Interactivity API与服务器端渲染完美结合，您可以使用所有WordPress API，包括：
- WordPress筛选器和操作：您可以继续使用WordPress挂钩来修改HTML，甚至修改指令。此外，现有挂钩将按预期继续工作。
- 核心翻译API：例如。
__()和_e（）。您可以使用它来翻译HTML中的文本（就像您通常会做的那样），甚至可以在指令的服务器端使用这些API。
Interactivity API管道促进渐进增强通过建立在WordPress坚实的基础和模式之上。
例如，带有指令的块可以与其他（交互式或非交互式）块共存。这意味着，如果页面上有其他使用jQuery等其他框架的块，那么一切都将按预期运行。
使用Interactivity API的全页面客户端导航将是与其他库规则兼容的一个例外。请参见客户端导航了解更多详细信息。
Interactivity API遵循与其他流行JS框架类似的方法，将状态、操作和回调分离，并以声明方式定义它们。为什么要声明？
声明性代码描述什么程序应该这样做，而命令代码描述怎样程序应该这样做。使用声明性方法，UI会自动更新以响应底层数据的更改。使用命令式方法，您必须在数据更改时手动更新UI。比较两个代码示例：
强制性代码
切换元素<p>此元素现在可见</p>（第页）<脚本>const按钮=document.getElementById（“toggle-button”）；button.addEventListener（“点击”，（）=>{const元素=document.getElementById（“元素”）；if（元素）{element.remove（）；}其他{const newElement=document.createElement（“p”）；newElement.textContent=“此元素可见”；document.body.appendChild（newElement）；}});</script>
声明性代码
这是上面共享的相同用例，但它是使用此新系统的声明性代码的示例。JavaScript逻辑在视图.js文件，并将指令添加到渲染.php.
//view.js文件从“@wordpress/interactivity”导入{store，getContext}；存储（“wpmovies”{操作：{切换：（）=>{const上下文=getContext（）；context.isOpen=！context.is打开；},},});
<!-- Render.php文件--><迪夫data-wp-interactive='wpmovies'<?php echo wp_interactivity_data_wp_context（数组（“isOpen”=>true））；？>><按钮data-wp-on--click=“actions.toggle”data-wp-bind--aria-expanded=“context.isOpen”aria-controls=“p-1”>切换</按钮><p id=“p-1”data-wp-bind---hidden=“！context.isOpen”>此元素现在可见！</p></div>
在创建简单的用户体验时，使用命令式代码可能会更容易，但随着应用程序变得更加复杂，这会变得更加困难。交互API必须涵盖所有用例，从最简单到最具挑战性。这就是为什么使用指令的声明性方法更适合交互API的原因。
API设计为尽可能高性能：
- 指令所需的运行时代码仅为~10 KB，所有块只需加载一次。
- 脚本将在不阻止页面呈现的情况下加载.
指令可以直接从HTML中添加、删除或修改。例如，用户可以使用render_block（渲染块）滤波器修改HTML及其行为。
每个指令控制DOM的一小部分，您可以组合多个指令来创建丰富的交互式用户体验。
API使用标准的块构建工具即开即用，如wp-脚本.唯一的要求是wp-脚本正确构建脚本模块使用Interactivity API可以同时使用–temporal-modules标志建造和开始脚本。
Interactivity API附带了用于向站点添加客户端导航的内置原语。此功能是完全可选的，但它提供了创建这些用户体验的可能性，而无需退出WordPress渲染系统。
使用交互API的全页面客户端导航仍在进行中（请参阅#60951). 尽管如此，预计所有交互块都必须使用Interactivity API来启用带有InteractivityAPI的全页面客户端导航。只有在这种情况下，Interactivity API才能与其他库（如jQuery）完全兼容。
它还与视图转换API允许开发人员轻松制作页面转换动画。
使用Interactivity API的块和使用其他方法（如jQuery）的交互式块可以共存，并且一切都将按预期工作。然而，交互式API为您的交互式块带来了一些好处：
- 模块之间可以轻松通信。使用标准，默认情况下处理此通信。当不同的块使用不同的方法进行前端交互时，当不同的开发人员创建块时，块间通信变得更加复杂，几乎不可能实现。
- 可组合性和兼容性：可以组合交互式块，并将其嵌套在具有定义行为的结构中。由于遵循相同的标准，它们是完全交叉兼容的。如果每个块使用不同的交互方法，它们可能会中断。
- 发送到浏览器的KB更少如果每个插件作者使用不同的JS框架，那么前端将加载更多代码。如果所有的块都使用相同的块，那么代码将被重用。
- 如果页面上的所有块都使用此标准，可以启用客户端导航等站点范围的功能.
此外，通过标准，WordPress可以最大限度地吸收开发人员的复杂性因为它将处理创建交互式块所需的大部分内容。
标准吸收的复杂性
有了这种吸收，创建交互式块所需的知识就更少了，开发人员不用担心太多的决策。
通过采用标准，从其他交互块学习更简单，并促进协作和代码重用。因此，开发过程对经验不足的开发人员来说更加精简和友好。