Interactivity API iteration for WordPress 6.9

[DAreRodz]

• Part of Block API #41236.

---

In the previous iteration for WordPress 6.8, the focus was on addressing the limitations in the region-based client-side navigation and improving the full-page client-side navigation experiment, as well as finishing interactive features for the Gallery, Query, and Search blocks. Not all the work could be carried out that time, though.

Now, for WordPress 6.9, we are resuming part of this work, specifically the client-side navigation feature, as it requires some tweaks after being reimplemented in #70353 to support styles and script modules from newly visited pages.

Additionally, other issues have been identified regarding the iAPI runtime initialization that also need to be tackled.

---

As always, the task list is live and can be modified or expanded at any time. 🙂

Fixes

• iAPI: Items from data-wp-each doesn't work when exposed from state getters #70866
• Interactivity API shows incorrect deprecation warning in 6.8 when Gutenberg plugin not active #69975
• iAPI: Migrate data-wp-on-async to data-wp-on with withSyncEvent() #72413 (only doc updates missing)

Async store loading

• iAPI router: Synchronous getter execution prevents state access when store is initialized after hydration #70874
• iAPI router: Support lazy loaded derived state #70872

New client-side navigation algorithm

• iAPI Router: Styles inside noscript tags are wrongly applied on client-side navigation #70876
• iAPI Router: Support router regions nested inside data-wp-interactive elements #71519
  • Follow-up: don't require regions to also have data-wp-interactive
• Query Loop: Allow Post Content block with the "force page reload" setting disabled #70871
• iAPI Router: Only load modules of interactive blocks on client-side navigation #70873
• iAPI: getServerState/Context doesn't handle all client-server state synchronization scenarios during navigation #72345
• iAPI router: Move internal properties to a private store #70879

Docs

• Docs: Interactivity API - Create a Core Concepts section for the iAPI #62921
  •  Namespaces and scopes
  • Client-side navigation

Deprecations/improvements

• iAPI: Deprecate data-wp-ignore #70881
• iAPI: Add official support for unique IDs #70880
• Interactivity API: Performance bottleneck in data_wp_each_processor due to repeated template parsing wordpress-develop#10249

Blocks

• Gallery: Add lightbox support #62906
• Query and Search blocks: support for Instant Search via query_loop_block_query_vars filter #67181

[lynnbgriffith]

Would it make sense to revisit the Gallery block navigation for 6.9 as well? There is an open PR from earlier this year:
#62906

[DAreRodz]

Update

I've been working on the issue related to synchronous getters execution that access state. It's an important issue, as the store() function was designed to support this use case. This open PR, awaiting review, is meant to fix it:

• iAPI: Make state getters to be updated asynchronously with store() #70974

The PR makes any time a property in the state turns into a getter to be updated asynchronously. Only when that property is later read immediately after the store() call, the update is made synchronously, and only at that very moment.

Also, other issues were already addressed and merged, like the deprecation of data-wp-ignore and the wrongly-applied style sheets from <noscript> tags—props to @vipul0425 and @Sahil1617 for working on them.

• iAPI Router: Styles inside noscript tags are wrongly applied on client-side navigation #70876
• iAPI: Deprecate data-wp-ignore #70881

Next week, I'll review the initialization logic currently used by the Interactivity API and take a look at the lazy-loaded state one.

[DAreRodz]

Would it make sense to revisit the Gallery block navigation for 6.9 as well?

Hey @griffbrad, yeah, we can do that. If I'm not mistaken, that block was nearly complete. There is also the instant search feature for the Query and Search blocks. I'd add them to the tasks list.

[DAreRodz]

Update

Work for the initialization logic review and for supporting lazy-loaded derived state is in progress.

• iAPI: Fix and refactor runtime initialization logic #71123
• iAPI: Skip directive execution for "lazy" derived state props #71125

Both PRs are still drafts, as the specific solution for each issue is still unclear. I shared some thoughts and comments on each PR, and also here in the initialization issue, to continue discussing and narrowing down the best solution.

Additionally, this PR is still pending a review:

• iAPI: Make state getters to be updated asynchronously with store() #70974

Note that I’ll be unavailable over the next week; I’ll pick this up again once I’m back. 🌴

[DAreRodz]

Update

I'm just resuming the updates here after vacation.

The work that fixes getters when they access state was reviewed and merged:

• iAPI: Make state getters to be updated asynchronously with store() #70974

Most of the work during this week has been focused on supporting lazy derived state props:

• iAPI: Skip directive execution for "lazy" derived state props #71125

The initial idea was to prevent directive execution for any missing property in the state or context, but this proved to be tricky. Instead, the current approach detects which derived state props were invoked during SSR and sends them to the client, so that the iAPI runtime can identify and handle them accordingly.

This is the PR that implements the serialization part:

• Interactivity API: Add support for lazy-loaded derived state props wordpress-develop#9673

These are still drafts — the functionality isn’t fully polished, and some tests are not yet passing.

Other stuff

We included a new task under "New client-side navigation algorithm": to support dynamically added stylesheets. It doesn't have a corresponding GitHub issue yet; it will be created shortly.

Additionally, we've been briefly discussing an issue related to data-wp-router-region elements nested inside data-wp-interactive elements. Currently, these regions are not updated after a client-side navigation, meaning that, if their markup has changed, that change will not be reflected.

That's something we would also like to address for WordPress 6.9, so we'll probably open another GitHub issue next week.

[DAreRodz]

Update

Last week, the development progressed at a moderate pace.

The lazy derived state props functionality is almost finished. The part that handles the server-side processing is ready for review.

• Interactivity API: Add support for lazy-loaded derived state props wordpress-develop#9673

The part in the runtime is finished, but requires some e2e tests to ensure the feature works correctly.

• iAPI: Skip directive execution for "lazy" derived state props #71125

We've spent some time exploring how to update router regions when they are placed inside elements with a data-wp-interactive directive. The following issue has been created as we came up with a potential implementation:

• iAPI Router: Support router regions nested inside data-wp-interactive elements #71519

In addition to the tasks above, as the feature-freeze date for 6.9 approaches, we have decided to prioritize the following ones:

• iAPI: Items from data-wp-each doesn't work when exposed from state getters #70866
• iAPI: Add official support for unique IDs #70880
• iAPI Router: Only load modules of interactive blocks on client-side navigation #70873
• Query Loop: Allow Post Content block with the "force page reload" setting disabled #70871

[DAreRodz]

Update

This week's a short one.

I've been focusing on supporting router regions nested inside data-wp-interactive elements:

• iAPI Router: Support router regions nested inside data-wp-interactive elements #71519

I wrote an initial implementation that seemed to work fine except for router regions with the attachTo property, and I'm currently investigating what could be the cause. So far, debugging has been challenging.

• iAPI Router: Update router regions inside elements with data-wp-interactive #71635

For the next week, I plan to wrap up the lazy derived state work and keep investigating the issue mentioned above.

[DAreRodz]

Update

This week, I decided to address the issues I faced implementing support for nested router regions instead of resuming the lazy derived state work. It's been a bit intense, to be honest, and time-consuming, but I was able to solve all of them. The PR is now ready for review.

• iAPI Router: Update router regions inside elements with data-wp-interactive #71635

Next week, I'll finish the lazy derived state work and continue with the rest of the prioritized tasks mentioned in #70883 (comment).