Interactivity API: Add block supports for clientNavigation and interactive properties on block.json schema.

[cbravobernal]

What?

Add clientNavigation and interactive properties to block.json schema.

Why?

When the Interactivity API is public, developers will need to indicate if their blocks are client side navigation compatible and interactive in their respective block.json files.

Client navigation will be opt out. Developers will need to set it as true if they want their block to work in client side navigation. (This means there is no interactivity or the block uses the Interactivity API to add interactions).

Testing Instructions

• Point the schema to block.json schema instead of the default one.
• Create an interactive block.
• Check that schemas appear on the editor.
• Set your block to clientNavigation as true, put it inside a query block and disable "force reload". Check that client side navigation happens (browser does not reload).
• Set your block to clientNavigation as false, put it inside a query block and disable "force reload". Check that client side navigation does not happen (browser reloads).

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php
❔ phpunit/blocks/render-query-test.php

[github-actions]

Flaky tests detected in d2570a8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7630045565
📝 Reported issues:

• [Flaky Test] Create a pattern with overrides #58009 in /test/e2e/specs/editor/various/pattern-overrides.spec.js

[cbravobernal]

This is PHP 5.6 compatible.

This change would not work in < 7.0 :

	$is_interactive_bool   = (bool) ( $block_object->supports['interactivity'] ?? false );
	$is_interactive_object = (bool) ( $block_object->supports['interactivity']['interactive'] ?? false );
	$client_navigation     = (bool) ( $block_object->supports['interactivity']['clientNavigation'] ?? false );

[luisherranz]

WordPress does not support PHP 5.6 anymore.

[luisherranz]

I haven't checked the code of the Query block yet, so this is just preliminary.

[luisherranz]

Suggested change

	"description": "Indicates if a block is compatible with Interactivity API client side navigation.\n\nSet as false if the block is using vanilla JS or another framework to handle interactions.",
	"description": "Indicates whether a block is compatible with the Interactivity API client-side navigation.\n\nSet it to true only if the block is not interactive or if it is interactive using the Interactivity API. Set it to false if the block is interactive but uses vanilla JS, jQuery or another JS framework/library other than the Interactivity API.",

[luisherranz]

We could get help from a native speaker here. This is complex to understand 🙂

[cbravobernal]

Ping @sirreal, @ndiego or @ryanwelcher

[sirreal]

Tricky 🙂 I've read the descriptions and have questions:

interactivity: boolean|object - What does true mean here? Enable all the features?

true === { clientNavigation: true, interactive: true }
(omission) === false === {}

Should we include the default value for interactivity (which I think is false)?

Can we have clientNavigation without interactive, or does clientNavigation require interactive (if they're dependent we can reflect that in the schema itself instead of describing it).

---

What does "interactive" mean here?

Set it to true only if the block is not interactive or if it is interactive using the Interactivity API
Set it to false if the block is interactive but uses vanilla JS… other than the Interactivity API

Interactive sounds like interactivity.interactive, but are we talking about that? Or more generally that a block has client-side JavaScript to make it do things.

[cbravobernal]

interactivity: boolean|object - What does true mean here? Enable all the features?

Yes

(omission) === false === {}

I think in this case would be:

{
  clientNavigation: false,
  interactive: false
}

Should we include the default value for interactivity (which I think is false)?

Sure, done.

Interactive sounds like interactivity.interactive, but are we talking about that? Or more generally that a block has client-side JavaScript to make it do things.

Interactive means that a block is using the Interactivity API as alternative of JavaScript made things.

If the developer is using JS or other framework. clientNavigation should be false. interactive in this case would not affect anything on the code. And for that, reason, all options are opt-out. (usually in this case, the user will not update or know about this value)

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core SVN

If you're a Core Committer, use this list when committing to wordpress-develop in SVN:

Props: cbravobernal, luisherranz, jonsurrell.

GitHub Merge commits

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.