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 withEvent 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 🙂

[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.

[annezazu]

Can someone share an update here as to what's been done thus far and where the work stands?

[luisherranz]

Hey Anne, this is the status of the iteration:

• Enhancements: We aim to complete all the points listed in enhancements, which have involved a significant and necessary internal refactor of much of the runtime. Additionally, we want to add a couple of new APIs (getServerState and getServerContext). The Lazy loading of interactive blocks is managed by @westonruter, so he should update you on the status.
• Core blocks: At this point, I cannot say if any of the blocks being worked on will be completed in time for WordPress 6.7. The frontend part regarding interactivity is either complete or nearly complete for most of them. However, they still might get stuck in the Editor UX.
• Bug fixes: All the important bug fixes have been addressed, and while we will try to complete all the listed ones, the remaining ones are minor.
• Optional: The items listed here will only be completed if there is time left after working on the rest.

Let me know if this is helpful or if you need more information.

[luisherranz]

@mikachan @madhusudhand, could you give us your estimate on the Gallery, Accordion and Tabs blocks?

[annezazu]

Thank you! I want to get this right for the 6.7 roadmap so I'll remove the Core blocks work for now to be safe until/unless I hear differently.

[sethrubenstein]

@luisherranz Can you share a little bit about what getServerState and what getServerContext will do?

[luisherranz]

Sure! Since it's not possible for the initial server state to overwrite the client state because that approach is not compatible with region-based client-side navigation, we need an API for use cases where, after navigating, you want to inspect the initial state or context of the new page.

So those two functions will return the initial state or context that came from the server and they are reactive, so that initial state or context updates every time there is a client-side navigation. People would normally use them in a data-wp-watch. For example:

<div data-wp-watch="callbacks.updateServerContext">...</div>

store('...', {
  callbacks: {
    updateServerContext() {
      const context = getContext();
      const serverContext = getServerContext();

      // Override some property with the new value that came from the server.
      context.overridableProp = serverContext.overridableProp;
    },
  },
});

That's it! The same for state using getServerState.

@DAreRodz will open a pull request next week, and we appreciate any feedback and assistance testing this new API, that if everything goes well, would make it into WP 6.7 😄

[madhusudhand]

@mikachan @madhusudhand, could you give us your estimate on the Gallery, Accordion and Tabs blocks?

Gallery block is close to getting merged. It is pending with following feedback

• And moving gallery_id to a shared space - related feedback ✅
• Accessibility concerns with inert pointed here 🚧

I am looking into the second feedback item. Hopefully it will be resolved this week.

[annezazu]

Sweet! I'll add the Gallery block back onto the 6.7 roadmap.

[DAreRodz]

Updates

I've added the following bug fixes to the tracking issue:

• Interactivity API: Prevent calling proxifyContext with context proxies inside wp-context #65090
• Interactivity API: Update iterable signals when deepMerge() adds new properties #65135

The first bug was a regression introduced in #62734, and it's merged and ready for the next Gutenberg RC. The second one is a missing piece of logic we forgot to include in #64879. It's ready for review.

The following PR is also ready for review. I've introduced a change that depends on #65135 being merged; the failing test should pass after that.

• Interactivity API: Refactor context proxies #64713

As the next step, I have to open a PR for getServerContext() and getServerState(), which is currently WIP.

[DAreRodz]

I've just created a draft for the getServerContext() and getServerState() functions.

• Interactivity API: Add getServerState() and getServerContext() #65151

[michalczaplinski]

I've created a new issue to discuss the getServerState() & getServerContext() APIs: #65243

[madhusudhand]

@annezazu The current approach we took for gallery block is rendering translations on server (because i18n isn't available as script module), which is observed to be complex and is not a good example/practice for the community.
I think we should punt it to 6.8

[annezazu]

Thanks for the update! Agreed. Let’s punt.