Interactivity API iteration for WordPress 6.7

[luisherranz]

• Part of Block API #41236.

---

In WordPress 6.6, work was done to improve warnings integration with Preact DevTools, as well as adding directives for asynchronous event handlers and support for derived state on the server.

In WordPress 6.7, we will continue working on internal improvements to ensure that the Interactivity API's code is as simple and stable as possible and to make the Interactivity API resilient when used asynchronously (e.g., adding directives or stores after initialization). This will pave the way for performance improvements such as directive code splitting or lazy loading of interactive blocks.

In Core blocks, work will begin on the Gallery block lightbox and the Query block's Instant Search.

Apart from the work for WordPress 6.7, investigations will continue, with the most important being the exploration of how to improve assets management in region-based client-side navigation and experimenting with full-page client-side navigation. However, those will be tracked in its own Tracking Issue.

Work is also continuing to improve the documentation with enhancements in the API Reference and new explanatory guides tracked in the Interactivity API documentation's Tracking Issue.

---

This is the list of initial tasks, although we will edit this post as we progress and discover other things that we need to do.

Enhancements

• Refactor internal proxy and signals system
  • Interactivity API: Refactor internal proxy and signals system #62734
• Refactor the deepMerge logic
  • Interactivity API: Improve internal deepMerge function #64879
• Refactor internal context proxy
  • Interactivity API: Refactor context proxies #64713
• Add support for getServerState and getServerContext
  • Interactivity API: Add getServerState() and getServerContext() #65151
• Refactor types, support generator <-> promise transformations, add tests and fix overloads
  • iAPI: Refactor types and add a "Core Concepts - Using TypeScript" guide #64577
• Add wp_interactivity_get_element so it can be used in the derived state Closures to inspect the element attributes with $element['attributes'] (using $p->get_attributes_with_prefix('')).
• Lazy loading of interactive blocks
  • Interactivity API: Defer hydration until node is scrolled near the viewport #58284
• Introduce withSyncEvent and require Interactivity API actions that use the event object to use it #64944

Core blocks (optional)

• Query and Search blocks: Instant Search
  • Query and Search blocks: support for Instant Search #63053
  • Query and Search blocks: support for Instant Search #63147
• Gallery block: Lightbox
  • Multiple image blocks set to open in light box should connect to create cohesive carousel. #56310
  • Gallery: Add lightbox support #62906
• Accordion block
  • Add Accordion Block #64119
• Tabs block
  • Adds tabs block behind block experiments flag #63689

Bug fixes

• iAPI: Merge of state and context after client-side navigation #63864
• Interactivity: Fix withScope to restore scope on thrown exception inside async functions #62555
• Cannot bind attributes to direct children of data-wp-each #60981
• Interactivity API: Inability to use plain arrays in context #63651
• Interactivity API: Fix context inheritance from namespaces different than the current one #64677
• Interactivity API: Prevent calling proxifyContext with context proxies inside wp-context #65090
• Interactivity API: Update iterable signals when deepMerge() adds new properties #65135
• Interactivity API page restoring breaks embedded SPA apps with routing #60455
• iAPI Router: don't remove region when it's not present in the new page #63249
• iAPI: Enforce correct namespaces in all places (directives, functions…) that accept a namespace #63749

Optional

• Add tests fro getElement() attributes
  • Interactivity API: add tests for the getElement() attributes #63126
• Official syntax for unique-ids
  • Differentiating between suffixes and unique-ids in the directive names #62720
• Review all errors and make them more consistent
• Allow async directive registration
  • Interactivity API: Allow async directive registration #60670
• Show directive names in Preact's dev tools
  • Interactivity API: Debug - Show directive names included in each Directives component on Preact’s debug tools #60049
  • Slack conversation
• Keep improving TypeScript support
  • Interactivity API: No implicit any #61695
• Support for data-wp-client-only-component
•  Support handling navigate() failure states
  • Interactivity Router: Support Handling navigate() Failure States #59856

[adamsilverstein]

Can you also consider #60522?

[luisherranz]

Can you also consider #60522?

I thought that work was still experimental since it requires using Chrome Canary. But if you think it should be included in WordPress 6.7, sure, we can include it 🙂

[adamsilverstein]

I thought that work was still experimental since it requires using Chrome Canary. But if you think it should be included in WordPress 6.7, sure, we can include it 🙂

true, it is still experimental and thus maybe not ready for 6.7!

I'm hoping it lands in stable soon and this is a purely debugging related feature. Mostly I don't want the work to fall off the radar and I thought to some degree experimental features where acceptable in Gutenberg since we can always pull them before merging into core.

[luisherranz]

Ok, then let's leave it out of the list of things for WordPress 6.7 but let's keep an eye on including it in future versions once the APIs are stable 🙂

experimental features where acceptable in Gutenberg since we can always pull them before merging into core

Sure, if you want to merge it in Gutenberg to test it out, that's totally fine.

[adamsilverstein]

Sure, if you want to merge it in Gutenberg to test it out, that's totally fine.

That is indeed exactly what I want to do - in part the goal here is to give the team building the feature (DevTools performance panel extensibility API or "User Timings") feedback about what is useful and what is missing. By testing the feature out in Gutenberg, we can influence how it being built before it lands in stable.

[ajgagnon]

Any chance of getting a data-wp-if directive included? It would be immensely helpful. Happy to attempt a PR if this is in the scope.

<template data-wp-if="context.open">
    <div>Contents...</div>
</template>

[luisherranz]

Yeah, a data-wp-show directive is on the roadmap indeed.

If you're willing to work on it we'd love to help you out. As far as I remember, the work not only requires the client-side directive implementation, but also an extra function similar to this one for the server-side rendering.

But we can discuss the details in a proper issue or in Slack 🙂