WordPress 贡献者为前端块提出了新的交互 API

在过去的一年里,一群 WordPress 贡献者一直致力于开发人员更轻松地构建交互式块。这些体验允许访问者提交表单并在不重新加载页面的情况下获得反馈,在不刷新的情况下加载分页内容,并通过基于访问者交互的更动态响应来改进电子商务商店。

一项针对交互性 API 的新提议旨在为开发人员提供一种标准方法,以向前端添加交互性,从而更快地构建这些体验,而无需每次都重新发明轮子。

Automattic 赞助的核心贡献者 Mario Santos 对新 API 将交付的内容提出了愿景:

如果可以毫不费力地在基于块的 WordPress 站点上创建高性能、流畅和惯用的前端交互,那会怎样?想象一下插件提供诸如“关注此帖子”或“添加到购物车”之类的交互而无需重新加载页面。无需复杂的脚手架或外部工具,即可将即时搜索、评论和本机整页转换视为一流的内置功能。设想默认情况下在任何块主题中实现这一点,而不会牺牲 JS 运行时的 PHP 服务器渲染和插件生态系统。可视化区块开发人员以一种立即熟悉并与区块生态系统兼容的方式轻松声明和扩展此类行为。

桑托斯发布了一个演示视频,并附有一个现场互动演示,访问者可以在其中收藏电影,并在标题栏中即时更新收藏数量。分页和搜索更新内容而不刷新页面。GitHub 上提供了演示代码。

Interactivity API 正在创建用于基于块的网站的前端,但贡献者也可以探索在编辑器中重用其某些指令的可能性。他们采用与Alpine.js类似的方法,使用“指令”扩展具有特殊属性的 HTML,除了专门为 WordPress 设计并向后兼容其 API。

“该 API 专为块世界而设计,并将 WordPress 与网络标准紧密相连的历史牢记在心,”桑托斯说。

“由于指令被添加到 HTML 中,它们与动态块和 PHP 配合得很好。”

拥有一个标准意味着 WordPress 开发人员不必为工具、块间通信和前端性能等问题推出自己的解决方案。他们将主要负责块逻辑,使创建交互式块更容易,对于经验不足的开发人员来说更容易上手。

由于 Preact 的 HTML 友好性、体积小、性能、可扩展性和与 React 的兼容性,该项目的贡献者选择了Preact来构建指令系统。

Interactivity API 目前正处于收集反馈以纳入开发以及扩展技术文档的阶段。

“虽然它现在作为插件分发,但它的目标是作为一项实验性功能添加到古腾堡,”桑托斯说。“我们的目标是在收集到足够多的反馈后将其纳入 Core,很明显这是正确的方向。”

对提议的 API 的最初反应大多是积极的,因为开发人员以前不得不在没有标准的情况下构建自己的交互解决方案。

“Interactivity API 是我一段时间以来看到的最有趣的 WordPress 前端 UX 和 DX 提案之一,”WordPress 核心贡献者 Weston Ruter

“作为一个一直在尝试使用 AlpineJS、HTMX、Unpoly、StimulusJS 等在前端进行交互的人,在 WP 核心中拥有一个有福的解决方案将是最受欢迎的,”另一位开发人员 (@r1ckd33zy) 评论

WordPress 开发人员和 WPGraphQL 贡献者 David Levine 似乎对提案中概述的方法不太感兴趣。“好主意,但执行起来短视,”莱文说。“我们需要一个实际的块数据层,而不是进一步污染我们的标记以供我们的脚本解析。这只会加剧让我们陷入困境的同样问题。”

帖子评论中的其他一些人对该方法持批评态度,而其他人则对维持这种方法的长期挑战存在疑问。

WordPress 核心贡献者乔·霍伊尔 (Joe Hoyle) 说:“这是一种非常出色的方法,与我以前见过的任何方法都截然不同。” “这确实给了我警告,因为它非常具体/以 wp 为中心。我认为块编辑器有机会更多地与围绕前端工具的行业创新保持一致。我认为这真的是很棒的作品,很有创意;但我还是不确定这是正确的方向。可能没有长期的解决方案来为 WordPress 带来‘nextjs’化,但我不确定我是否正在考虑它。”

该提案包括如何使用 API 创建交互式块的示例,开发人员已经就该方法展开了热烈的讨论。Interactivity API 的贡献者计划在 2023 年 4 月 17 日举办两场会议(一场在 08:00UTC  , 另一场在 17:00UTC),其中包括现场产品演示和问答环节。查看提案以获取更多详细信息,并查看 Interactivity API GitHub 存储库,以查看团队迄今为止一直在进行的一些实验。

原文连接

欢迎关注WordPress大学公众号 WPDAXUE
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索