Tracking Issue: Prepare the private version of the Interactivity API for WP 6.4

[luisherranz]

WP 6.4 will include Gutenberg up to the 16.7 version, which includes the new Image Lightbox, an enhanced pagination for the Query block and accessibility fixes for the Navigation block, all of them powered by the Interactivity API. Although the Interactivity API is still in the proposal phase, we can include a private version that only Core blocks can access in WP 6.4 to release these features/enhancements.

Please note that the Interactivity API is still likely to change before the final public version is released, but by keeping it private to Core blocks in WP 6.4, we can still modify it before it's public. Furthermore, if the proposal is finally rejected for some reason, we just have to replace the Interactivity API implementation of the Core blocks with whatever new approach is adopted instead.

The release of the 16.7 RC is scheduled for the 20th of September. Before that date, we need to complete the following tasks:

• Query block
  • Only allow enabling if all blocks inside Post Template are Core blocks to make sure they are compatible
    • Query Loop: Allow "enhanced pagination" only with core blocks #54347
  • Remove the usage of wp_store
    • Remove wp_store from query block #54359
  • Add timeout to client navigation
    • Interactivity API: Add timeout option to navigate() #54474
  • Additional design enhancements
    • Query block enhanced pagination: additional design enhancements #54414
    • Query Loop: Add design enhancements for the "enhanced pagination" setting #54455
  • Low Priority
    • Improve prefetching strategy to prefetch next/previous links once the user has clicked once on them.
      • Query block: Start prefetching on first click to next/previous #54781
    • Add a fading animation
      • Add a fading animation to the enhanced Query Loop navigation #54060
      • Query Loop: Add animation when navigating with "enhanced pagination" enabled #54746
    • Figure out if we can combine the focus scroll with the smooth scroll of scrollIntoView. It only works in Chrome.
      • Query Loop: Add animation when navigating with "enhanced pagination" enabled #54746
    • Add a “blink” the Query block in the Editor as soon as the toggle is enabled, just to provide some visual feedback in the canvas that something changed. Discarded for now.
• Navigation block
  • Remove gutenberg_should_block_use_interactivity_api and remove old implementation
    • Remove gutenberg_should_block_use_interactivity_api and the old implementation of interactive blocks #54297
  • Make sure HTML is fine without SSR
    • Add manual Server Side Rendering (SSR) to the Interactivity API blocks #54343
• File block
  • Remove gutenberg_should_block_use_interactivity_api and remove old implementation
    • Remove gutenberg_should_block_use_interactivity_api and the old implementation of interactive blocks #54297
  • Make sure HTML is fine without SSR
    • Add manual Server Side Rendering (SSR) to the Interactivity API blocks #54343
• Search block
  • Finish the new implementation and remove the old one and make sure HTML is fine without SSR
    • Search block: switch interactivity to the Interactivity API #53343
• Image Lightbox
  • Make sure HTML is fine without SSR and rename view-interactivity.js file to view.js
    • Prepare image lightbox for private version of the Interactivity API in 6 4 #54547
  • Remove the use of WP_Theme_JSON_Resolver_Gutenberg
    • Image block: Revise lightbox UI to remove 'behaviors' #53851
• Prepare WP Core to switch package from public to private
  • Modify the Webpack config to bundle packages/interactivity privately and enqueue the new files
    • Experiment: Test private Interactivity API webpack modifications for WP Core #54311
  • Finish PR in WP Core to merge it once the 16.7 RC is merged
    • Bundle the Interactivity API privately in WordPress Core wordpress-develop#5195
  • Ensure that the wp-interactivity dependency is always added
    • Ensure that the view scripts of core blocks have the wp-interactivity dependency #54594

[SantosGuillamot]

I created this pull request to remove gutenberg_should_block_use_interactivity_api and the old implementation of the Navigation and File blocks. In the end, I decided to do everything simultaneously because of some related conditionals.

#54297

[luisherranz]

Approved! Thanks, Mario 👍

[luisherranz]

I've opened a PR to test the WP Core webpack configuration. It's not finished yet, but so far it seems to be working great:

• Experiment: Test private Interactivity API webpack modifications for WP Core #54311

[SantosGuillamot]

I've opened a PR to add manual SSR to the Navigation block and the File block. As explained in the pull request, I believe that in the File block, it is complicated to replicate the JS logic, so we have to make a decision there.

• Add manual Server Side Rendering (SSR) to the Interactivity API blocks #54343

[SantosGuillamot]

I've been reviewing the Search block PR, and I think it should be ready to be merged, it needs review and approval. I also modified it so it works without the Interactivity API SSR.

• Search block: switch interactivity to the Interactivity API #53343

[DAreRodz]

I've opened a draft PR for disabling the enhanced pagination if third-party blocks exist in the Post Template.

• Query Loop: Allow "enhanced pagination" only with core blocks #54347

[luisherranz]

I've added a new task for the Query block:

• Remove the usage of wp_store.

[SantosGuillamot]

I've created a pull request to remove the usage of wp_store in the Query block:

• Remove wp_store from query block #54359

[SantosGuillamot]

The PR to move the Search block to the Interactivity API has been merged:

• Search block: switch interactivity to the Interactivity API #53343

[luisherranz]

I've sucessfully finished modifying the Webpack files to make @wordpress/interactivity a private package:

• Experiment: Test private Interactivity API webpack modifications for WP Core #54311 (comment)

The next step is to try to test it out in WP Core. I've also added a couple of related tasks to the opening post.

[luisherranz]

I've ported the changes to WordPress Core and they are working great. This should be ready to merge once the sync between Gutenberg and WP Core happens (with the correct modifications to the PR).

• Bundle the Interactivity API privately in WordPress Core wordpress-develop#5195

[luisherranz]

@artemiomorales, @michalczaplinski: @tellthemachines mentioned me that we need to review the usage of WP_Theme_JSON_Resolver_Gutenberg in the Image block before the 16.7 RC release (20th of Sept).

This is the exact message:

We're calling WP_Theme_JSON_Resolver_Gutenberg in the Image block PHP file, which isn't defined in core. We'll need to add some logic similar to this to check if the core class exists.

I've added to the list of tasks in the opening post. Please take care of it and mark it as ready afterward. Thanks 🙂

[luisherranz]

I've opened an issue with some design enhancements mentioned by @jasmussen. There are some that we should do before the 16.7 RC release, and others that we can try if we have time:

• Query block enhanced pagination: additional design enhancements #54414

[DAreRodz]

The changes to allow only core blocks inside a Query Loop with enhanced pagination are done and merged.

• Query Loop: Allow "enhanced pagination" only with core blocks #54347

I'll continue with the rest of the enhancements.

[DAreRodz]

This addresses most of the design feedback from @jasmussen. 👇

• Query Loop: Add design enhancements for the "enhanced pagination" setting #54455

It's ready for review.

[DAreRodz]

I've created another PR that adds a timeout option to navigate(), with a default value of 10000 milliseconds (10 seconds).

• Interactivity API: Add timeout option to navigate() #54474

[luisherranz]

David opened another PR to improve the accessibility of the modal:

• Query Loop: Update modal role and focus first element #54507

[luisherranz]

Open PR in Gutenberg to add this code to each interactive block to make sure that all the scripts have the wp-interactivity dependency

I think it's safe to do this in WordPress itself. I'll add it to this PR instead: (see below)

[michalczaplinski]

We're calling WP_Theme_JSON_Resolver_Gutenberg in the Image block PHP file, which isn't defined in core. We'll need to add some logic similar to this to check if the core class exists.

This issue was fixed by merging #53851 which removes the reference to WP_Theme_JSON_Resolver_Gutenberg in the Image block. There is another reference to WP_Theme_JSON_Resolver_Gutenberg in

gutenberg/lib/block-supports/behaviors.php

Line 67 in 62c1f50

$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data();

which is temporarily added to Gutenberg for backward-compatibility and will be removed in GB 17.0.

[SantosGuillamot]

I've created a PR to handle the remaining tasks related to the lightbox:

• Prepare image lightbox for private version of the Interactivity API in 6 4 #54547

[tellthemachines]

Open PR in Gutenberg to add this code to each interactive block to make sure that all the scripts have the wp-interactivity dependency

I think it's safe to do this in WordPress itself. I'll add it to this PR instead:

@luisherranz does this require changes to block PHP files? If so, it has to be done in Gutenberg. The block PHP gets generated in core from the block-library package so it can't be manually edited there.

[luisherranz]

@luisherranz does this require changes to block PHP files?

No, it doesn't. We can add it in Core in wp-includes/script-loader.php if that's ok.

EDIT: I tried, but I think it's simpler to add it here in Gutenberg:

• Ensure that the view scripts of core blocks have the wp-interactivity dependency #54594

[luisherranz]

I added logic to start prefetching the next pages on the first click to the next and previous buttons:

• Query block: Start prefetching on first click to next/previous #54781

[DAreRodz]

I opened a PR that shows a subtle animation when the HTML is updated and changes the scroll behavior to smooth during navigation. Ready for review.

• Query Loop: Add animation when navigating with "enhanced pagination" enabled #54746

[ermincelikovic]

Hi folks, thanks for the good work!

I just wanted to understand better - Interactivity API is not going to be useable outside of WP Core in 6.4?
Does it mean it is planned for 6.5?

[SantosGuillamot]

I just wanted to understand better - Interactivity API is not going to be useable outside of WP Core in 6.4?
Does it mean it is planned for 6.5?

Yes, in 6.4, only core blocks can use the Interactivity API. If you want to use the Interactivity API for your custom blocks, you need to install the Gutenberg plugin as well. We considered it safer this way because there are some parts that need more testing and the API is likely to change. So it might require developers who built custom blocks using the API to change the syntax.

On the other hand, if everything goes as expected, the idea is to make it public in WP Core in 6.5 as you say.

[luisherranz]

Even though there's still some discussion about the fading animation of the Query block, I'm going to close this Tracking Issue as finished because WP 6.4 Beta 1 has already been released.

We will continue working in the new store() API, please follow the progress in this Tracking Issue:

• Tracking Issue: More core blocks and new store() API #53740