Add filter to turn off Interactivity API for a block (#52579)

* Add filter to turn off Interactivity API for a block

* Dynamically opt-in to interactivity support in File and Navigation blocks

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

docs/reference-guides/core-blocks.md

@@ -266,7 +266,7 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/file
 -	**Category:** media
--	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity
+-	**Supports:** align, anchor, color (background, gradients, link, ~~text~~)
 -	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
 ## Footnotes
@@ -421,7 +421,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 
 -	**Name:** core/navigation
 -	**Category:** theme
--	**Supports:** align (full, wide), inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), inserter, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
 
 ## Custom Link

lib/experimental/blocks.php

@@ -5,6 +5,27 @@
  * @package gutenberg
  */
 
+/**
+ * Checks whether the experimental Interactivity API should be used for a block.
+ *
+ * Note: This function is located here instead of in interactivity-api/blocks.php because it has to be available earler.
+ *
+ * @param string $block_name Block name.
+ * @return bool Whether Interactivity API is used for block.
+ */
+function gutenberg_should_block_use_interactivity_api( $block_name ) {
+
+	/**
+	 * Filters whether the experimental Interactivity API should be used for a block.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param bool   $enabled    Whether Interactivity API is used for block.
+	 * @param string $block_name Block name.
+	 */
+	return (bool) apply_filters( 'gutenberg_should_block_use_interactivity_api', true, $block_name );
+}
+
 if ( ! function_exists( 'wp_enqueue_block_view_script' ) ) {
 	/**
 	 * Enqueues a frontend script for a specific block.

packages/block-library/src/file/block.json

@@ -65,8 +65,7 @@
 				"background": true,
 				"link": true
 			}
-		},
-		"interactivity": true
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

packages/block-library/src/file/index.php

@@ -5,7 +5,7 @@
  * @package WordPress
  */
 
-if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) ) {
 	/**
 	 * Replaces view script for the File block with version using Interactivity API.
 	 *
@@ -15,7 +15,8 @@
 	 */
 	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
 		if ( 'core/file' === $metadata['name'] ) {
-			$metadata['viewScript'] = array( 'file:./view-interactivity.min.js' );
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
 		}
 		return $metadata;
 	}
@@ -71,7 +72,7 @@ static function ( $matches ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) && $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );

packages/block-library/src/navigation/block.json

@@ -123,7 +123,15 @@
 				"type": "flex"
 			}
 		},
-		"interactivity": true
+		"__experimentalStyle": {
+			"elements": {
+				"link": {
+					"color": {
+						"text": "inherit"
+					}
+				}
+			}
+		}
 	},
 	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",

packages/block-library/src/navigation/index.php

@@ -65,6 +65,9 @@ function block_core_navigation_sort_menu_items_by_parent_id( $menu_items ) {
 
 		return $menu_items_by_parent_id;
 	}
+}
+
+if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) ) {
 
 	/**
 	 * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
@@ -148,15 +151,15 @@ function block_core_navigation_add_directives_to_submenu( $w, $block_attributes
 	 */
 	function gutenberg_block_core_navigation_update_interactive_view_script( $metadata ) {
 		if ( 'core/navigation' === $metadata['name'] ) {
-			$metadata['viewScript'] = array( 'file:./view-interactivity.min.js' );
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
 		}
 		return $metadata;
 	}
 	add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 );
 }
 
 
-
 /**
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
@@ -685,7 +688,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	// Add directives to the submenu if needed.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $has_submenus && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) && $has_submenus && $should_load_view_script ) {
 		$w                 = new WP_HTML_Tag_Processor( $inner_blocks_html );
 		$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $w, $attributes );
 	}
@@ -733,7 +736,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_directives = '';
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) && $should_load_view_script ) {
 		$nav_element_directives          = '
 			data-wp-interactive
 			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'