Tracking Issue - Interactivity API runtime for core blocks

[luisherranz]

• Part of Block API #41236.

The Interactivity API aims to provide a standard way to develop the frontend of Gutenberg blocks, in a way that they can communicate and be combined with each other easily.

Until now, most Gutenberg APIs have focused on the Block Editor, leaving an intentional gap in the frontend. The Interactivity API aims to cover that gap.

Imagine providing user experiences like instant search, add to cart, or comments form without a page reload, in a way that is immediately familiar and compatible with the block ecosystem, without complex scaffolding or external tools, and without sacrificing PHP server rendering and the plugin ecosystem. That's what the Interactivity API is for.

The goal of these tasks is to provide a basic runtime to start experimenting with interactivity in some of the core blocks.

We will start shaping the version of the runtime on a branch of the block interactivity experiments repo, and once it's ready we'll move it to this repository:

• Remove the router and leave only the Island hydration block-interactivity-experiments#216
• 🎨 Switch toVdom from array iteration to createTreeWalker block-interactivity-experiments#103
• Remove components and everything related to them block-interactivity-experiments#217
• Remove wp-show and wp-text directives block-interactivity-experiments#220
• Remove _wrapped, expose directives and expose full store block-interactivity-experiments#223
• Solve bug of props passing to the next element (context) - won't fix! check this video
• Add wp-init and other small adjustments block-interactivity-experiments#225
• Fix evaluate so it is always the same function instance block-interactivity-experiments#224 (related issue)
• Add Interactivity API runtime #49994
  • Move the code to /packages/block-library/src/interactivity
  • Prepare a new webpack config with the runtime and the Navigation + Image lightbox view files, similar to this. Special attention to runtimeChunk
  • Enqueue runtime + vendors + views manually
  • Add defer manually to the runtime + vendors + views
  • Add wp-init directive
• Add a useSignalEffect implementation that behaves like useEffect block-interactivity-experiments#226
• Add priorities to directives block-interactivity-experiments#235
• Experimental: Navigation block with the Interactivity API #50041
• File: Add experimental integration with Interactivity API #50377
• Behaviors UI #49972
• Image: Add lightbox using directives. #50373 (includes wp-portal)
• Support negation operator in selectors in the Interactivity API #50732
• Merge vendors and runtime in a single file and rename the handle to wp-interactive

Navigation block

• Polish experimental navigation block #50670
• Submenu closes while focus is on parent link #50744
• Can't Close the Submenu with Click or Keypress on Chevron #50746
• Missing Navigation Submenu Chevron Button Missing aria-expanded Attribute on load #50752

[DAreRodz]

I've opened a PR that removes full hydration and client-side navigation. It is ready to be reviewed.

• Remove the router and leave only the Island hydration block-interactivity-experiments#216

[DAreRodz]

I've done the same for removing components.

• Remove components and everything related to them block-interactivity-experiments#217

[luisherranz]

I've asked the Preact team about this PR to know if they plan to merge it soon or not. If they don't, I'll add a new issue to incorporate that data-wp-effect fix/feature in our codebase. We need that to avoid having to resort to tick in cases like this.

[luisherranz]

Once we finish, I think the next step would be to introduce priorities because that's going to affect the code of the Directive component.

[luisherranz]

This is ready for review:

• 🎨 Switch toVdom from array iteration to createTreeWalker block-interactivity-experiments#103

[DAreRodz]

This one is merged:

• Remove the router and leave only the Island hydration block-interactivity-experiments#216

And this other one ready for review

• Remove wp-show and wp-text directives block-interactivity-experiments#220

[luisherranz]

I have updated the refactoring-for-gutenberg branch with the latest changes from the main one.

[luisherranz]

I've opened a PR for these items: WordPress/block-interactivity-experiments#223

• Switch _wrapper to runningDirectives
• Keep directives in the DOM (related conversation)
• Pass the whole store to evaluate (instead of just state)

---

I'll work on Solve bug of props passing to the next element now.

[luisherranz]

I'll work on Solve bug of props passing to the next element now.

I don't think there's anything to fix at this moment for this one.

It's a bit difficult to explain, so I made a video, but I'll mark the task as completed:

https://www.loom.com/share/c797fa787d5b4b2da1d19e832fc7205b

[luisherranz]

We've merged everything that was needed before moving this to Gutenberg.

We'll try to move it to Gutenberg now in a new PR.

[DAreRodz]

This is the PR that adds the Interactivity API to Gutenberg. It is ready to review.

• Add Interactivity API runtime #49994

[luisherranz]

I've added these additional items to the list:

• Implement directive priorities
• Add wp-portal directive
• Add wp-init directive

[artemiomorales]

I added the following to the list:

• WIP: Behaviors UI
• Experiment: Add lightbox to image using directives to the list.

[gziolo]

I added the following PRs to the list of tasks:

• Experimental: Navigation block with the Interactivity API #50041
• File: Add experimental integration with Interactivity API #50377

[luisherranz]

I've added three issues to the Tracking Issue discovered by @jeryj that contain accessibility discrepancies between this implementation and the previous one (thanks, Jerry!).

• Submenu closes while focus is on parent link #50744
• Can't Close the Submenu with Click or Keypress on Chevron #50746
• Missing Navigation Submenu Chevron Button Missing aria-expanded Attribute on load #50752

He also reported a problem with the register_block_script_handle function that we should look into.

[gziolo]

He also reported a problem with the register_block_script_handle function that we should look into.

I can't reproduce it with the latest version in trunk. I'm wondering whether there is anything different with the testing env. I'll also double-check if all files get correctly included in the plugin's zip file.

[luisherranz]

It looks like that one was just a problem with node_modules so there's nothing to fix 🙂

Also, @DAreRodz has been working on the priorities:

• Add priorities to directives block-interactivity-experiments#235

[luisherranz]

Closing this as finished, we'll keep working on the next steps on: #50866

[luisherranz]

Reopened to add an additional task to merge both vendors and runtime together in a single file, and use the wp-interactivity handle because that handle needs to be maintained if this is merged with Core.

[luisherranz]

Closed as we don't need to that anymore.