Interactivity API iteration for WordPress 6.7

luisherranz commented 1 month ago

Part of #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

[x] Refactor internal proxy and signals system
- https://github.com/WordPress/gutenberg/pull/62734
[ ] Refactor types, support generator <-> promise transformations, add tests and fix overloads
- https://github.com/WordPress/gutenberg/pull/64577
[ ] Refactor internal context proxy
- https://github.com/WordPress/gutenberg/pull/64713
[ ] Improve how we handle getElement() attributes
- https://github.com/WordPress/gutenberg/pull/63126
[ ] Add wp_interactivity_get_element so it can be used in the derived state Closures to inspect the element attributes with $element['attributes'].
[ ] Lazy loading of interactive blocks
- https://github.com/WordPress/gutenberg/pull/58284
[ ] Official syntax for unique-ids
- https://github.com/WordPress/gutenberg/discussions/62720
[ ] Review all errors and make them more consistent

Core blocks (optional)

[ ] Query and Search blocks: Instant Search
- https://github.com/WordPress/gutenberg/issues/63053
- https://github.com/WordPress/gutenberg/pull/63147
[ ] Gallery block: Lightbox
- https://github.com/WordPress/gutenberg/issues/56310
- https://github.com/WordPress/gutenberg/pull/62906
[ ] Accordion block
- https://github.com/WordPress/gutenberg/pull/64119
[ ] Tabs block
- https://github.com/WordPress/gutenberg/pull/63689

Bug fixes

Optional

[ ] Allow async directive registration
- https://github.com/WordPress/gutenberg/pull/60670
[ ] Convert types of generator functions to async functions
- https://github.com/WordPress/gutenberg/pull/62400
[ ] Show directive names in Preact's dev tools
- https://github.com/WordPress/gutenberg/issues/60049
- Slack conversation
[ ] Keep improving TypeScript support
- https://github.com/WordPress/gutenberg/pull/61695
[ ] Support for data-wp-client-only-component
[ ] Support handling navigate() failure states
- https://github.com/WordPress/gutenberg/issues/59856

adamsilverstein commented 1 month ago

Can you also consider https://github.com/WordPress/gutenberg/pull/60522?

luisherranz commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

https://github.com/WordPress/gutenberg/discussions/53058#discussioncomment-10119649

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

WordPress / gutenberg