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
• Improve how we handle getElement() attributes
  • Interactivity API: update getElement() attributes #63126
• Make getElement() ref reactive
  • Slack conversation
• Allow async directive registration
  • Interactivity API: Allow async directive registration #60670
• Lazy loading of interactive blocks
  • Interactivity API: Defer hydration until node is scrolled near the viewport #58284
• Official syntax for unique-ids
  • Differentiating between suffixes and unique-ids in the directive names #62720
• Review all errors and make them more consistent

Core blocks

• 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

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
• Interactivity API page restoring breaks embedded SPA apps with routing #60455
• Cannot bind attributes to direct children of data-wp-each #60981
• iAPI Router: don't remove region when it's not present in the new page #63249
• Interactivity API: Inability to use plain arrays in context #63651
• iAPI: Enforce correct namespaces in all places (directives, functions…) that accept a namespace #63749

Optional

•  Convert types of generator functions to async functions
  • Interactivity API: Convert types of generator functions to async functions #62400
• 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 🙂

[ajgagnon]

Sure! I had left a comment there on the original issue here:

#53058 (comment)

It looks like the scope has not been decided yet, so that seems like the first item needed.