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)

• 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.
  • iAPI Router: Handle styles assets on region-based navigation #67826
  • Keep an eye on CSS with incremental ids outside of the regions (see this issue).
  • Interactivity API: Styling is broken after navigation when using experimental full-page client-side navigation #66123
• Review how to inject data-wp-interactive in the body.
• Make all properties returned by getServerContext and getServerState invalidate the computations when there’s navigation, even if the value doesn't change.
• Access the loading state on client-side navigation
  • Access the loading state on client-side navigation #51924
  • Feature: Add navigation.isLoading state to core/router store #67680
• Review region-based settings (like the Query block) when full-page is enabled.
• 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 to use with generators #65439

Core blocks (priority)

• Image block
  • Move styles to data-wp-bind--style
  • Move overlay inside the first image and create data-wp-portal
• Query and Search blocks: Instant Search
  • Query and Search blocks: support for Instant Search #63053
  • Query and Search blocks: support for Instant Search via query_loop_block_query_vars filter #67181
  • Search and Query blocks: Add support for Default queries via pre_get_posts filter #67289
• Gallery block: Lightbox
  • Multiple image blocks set to open in light box should connect to create cohesive carousel. #56310
  • Gallery: Add lightbox support #62906
• Add support for lightbox overlay in region-based client-side navigation

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: Prevent each directive errors and allow any iterable #67798
• 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
• Differences in server/client directive negation
• 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.

[annezazu]

Just a note of appreciation for proactively opening this and continuing to track work so clearly. Thank you ❤

[sirreal]

each directives can and should be more resilient to values that don't have .map, especially null or undefined. Broader support for any iterable can be added at the same time: #67798

[DAreRodz]

I have just opened a PR to solve the problems with style sheets. It's currently a draft. I'm working on adding e2e tests to ensure everything works as expected.

• iAPI Router: Handle styles assets on region-based navigation #67826