Interactivity API iteration for WordPress 6.8

[luisherranz]

• Part of Block API #41236.

---

In WordPress 6.7, work focused on important improvements to enhance the stability and simplicity of the Interactivity API internals, the introduction of new APIs like getServerState/getServerContext and wp_interactivity_get_element, improvements to the types, and progress on the Gallery block lightbox and Query block’s Instant Search.

In WordPress 6.8, the primary focus will be on:

1. Enhancing client-side navigation, advancing full page client-side navigation while addressing and improving the limitations of region-based client-side navigation.
2. Finishing the lightbox of the Gallery Block and the Instant Search functionality for the Query and Search Blocks.

Work is also continuing to improve the documentation, 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.

Client-side navigation (priority)

• Review how to inject data-wp-interactive in the body.
• Review region-based settings (like the Query block) when full-page is enabled.
• Use the next page's import map on the imported script modules.
• Find the best strategy to preload and replace all the CSS assets and HTML at the same time.
  • Keep an eye on CSS with incremental ids outside of the regions (see this issue).
• Figure out if we need to whitelist all the compatible script modules.
• Add a way to subscribe to virtual pageviews.
• Make sure that client-side navigation is disabled when incompatible blocks are detected.

General enhancements

• 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
  • Introduce withEvent and require Interactivity API actions that use the event object to use it #64944
• Support array.length access in references on the server
  • Interactivity API: Support .length on numeric arrays and strings on the server wordpress-develop#7751
• Add default for data-wp-class
  • Interactivity API: Allow more directives suffixes #65803 (comment)
• Add default for data-wp-style
  • Interactivity API: Allow more directives suffixes #65803 (comment)
• Improve typing of promises inside generators
  • Interactivity API: Add typed function #65439

Core blocks (priority)

• 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

Core blocks (optional)

• Accordion block
  • Add Accordion Block #64119
• Tabs block
  • Adds tabs block behind block experiments flag #63689
• Dialog block
  • New Block: Dialog Popup #61297

Bug fixes

• iAPI: Enforce correct namespaces in all places (directives, functions…) that accept a namespace #63749
• iAPI: Don't error when data-wp-each gets undefined #67174
• 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
• Make directive suffix validation more strict on the server
  • https://core.trac.wordpress.org/ticket/62426
• Whitespace can trip up WP_Interactivity_API::_process_directives() when there is a core/button text block binding
  • https://core.trac.wordpress.org/ticket/62522

Optional

• Support for data-wp-client-only-component
  • The `data-wp-client-only-component` directive #67306
• Support for data-wp-slot and data-wp-fill
• Support array[0] access in references
• Add tests for getElement() attributes
  • Interactivity API: add tests for the getElement() attributes #63126
• Release 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 handling navigate() failure states
  • Interactivity Router: Support Handling navigate() Failure States #59856

[sethrubenstein]

Just an update that when we saw work on #63689 stop we decided to pick up what was there and continue development of a new core/tabs block. Hopefully (scheduling permitted) I should be able to open up an early PR for review next week. That and #61297 we're creating for a project we have launching Feb, hoping we can align on those two new iAPI powered blocks for WP 6.8 release.

[luisherranz]

Wonderful, thanks Seth! 👏

I've added the Dialog block to the list 🙂

[sirreal]

WordPress/wordpress-develop#7751 (.length support on server-processed directives) is ready for review.