Experimental: Navigation block with the Interactivity API

lib/experimental/editor-settings.php

@@ -95,6 +95,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-interactivity-api-navigation-block', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableNavigationBlockInteractivity = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-theme-previews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableThemePreviews = true', 'before' );
 	}

lib/experimental/interactivity-api/navigation-block-interactivity.php

@@ -0,0 +1,240 @@
+<?php
+/**
+ * Extend WordPress core navigation block to use the Interactivity API.
+ * Interactivity API directives are added using the Tag Processor while it is experimental.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add Interactivity API directives to the navigation block markup using the Tag Processor
+ * The final HTML of the navigation block will look similar to this:
+ *
+ * <nav
+ *   data-wp-island
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }'
+ * >
+ *   <button
+ *     class="wp-block-navigation__responsive-container-open"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   >
+ *   <div
+ *     class="wp-block-navigation__responsive-container"
+ *     data-wp-class.has-modal-open="context.core.navigation.isMenuOpen"
+ *     data-wp-class.is-menu-open="context.core.navigation.isMenuOpen"
+ *     data-wp-bind.aria-hidden="!context.core.navigation.isMenuOpen"
+ *     data-wp-effect="effects.core.navigation.initModal"
+ *     data-wp-on.keydow="actions.core.navigation.handleMenuKeydown"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *     tabindex="-1"
+ *   >
+ *     <div class="wp-block-navigation__responsive-close">
+ *       <div
+ *         class="wp-block-navigation__responsive-dialog"
+ *         data-wp-bind.aria-modal="context.core.navigation.isMenuOpen"
+ *         data-wp-bind.role="selectors.core.navigation.roleAttribute"
+ *         data-wp-effect="effects.core.navigation.focusFirstElement"
+ *       >
+ *         <button
+ *           class="wp-block-navigation__responsive-container-close"
+ *           data-wp-on.click="actions.core.navigation.closeMenu"
+ *         >
+ *           <svg>
+ *         <button>
+ *         MENU ITEMS
+ *       </div>
+ *     </div>
+ *   </div>
+ * </nav>
+ *
+ * @param string $block_content Markup of the navigation block.
+ *
+ * @return string Navigation block markup with the proper directives
+ */
+function gutenberg_block_core_navigation_add_directives_to_markup( $block_content ) {
+	$w = new WP_HTML_Tag_Processor( $block_content );
+	// Add directives to the `<nav>` element.
+	if ( $w->next_tag( 'nav' ) ) {
+		$w->set_attribute( 'data-wp-island', '' );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }' );
+	};
+
+	// Add directives to the open menu button.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation__responsive-container-open',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->remove_attribute( 'data-micromodal-trigger' );
+	} else {
+		// If the open modal button not found, we handle submenus immediately.
+		$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );
+
+		// Add directives to the menu container.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+			$w->set_attribute( 'tabindex', '-1' );
+		};
+
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+
+		return $w->get_updated_html();
+	}
+
+	// Add directives to the menu container.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-container',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-class.has-modal-open', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+		$w->set_attribute( 'tabindex', '-1' );
+	};
+
+	// Remove micromodal attribute.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-close',
+		)
+	) ) {
+		$w->remove_attribute( 'data-micromodal-close' );
+	};
+
+	// Add directives to the dialog container.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-dialog',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-bind.aria-modal', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.role', 'selectors.core.navigation.roleAttribute' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.focusFirstElement' );
+	};
+
+	// Add directives to the close button.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation__responsive-container-close',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.closeMenu' );
+		$w->remove_attribute( 'data-micromodal-close' );
+	};
+
+	// Submenus.
+	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+
+	return $w->get_updated_html();
+};
+
+/**
+ * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
+ * The final HTML of the navigation-submenu and the page-list blocks will look similar to this:
+ *
+ * <li
+ *   class="has-child"
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
+ * >
+ *   <button
+ *     class="wp-block-navigation-submenu__toggle"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *   >
+ *   </button>
+ *   <span>Title</span>
+ *   <ul
+ *     class="wp-block-navigation__submenu-container"
+ *     data-wp-effect="effects.core.navigation.initModal"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   >
+ *     SUBMENU ITEMS
+ *   </ul>
+ * </li>
+ *
+ * @param string $w Markup of the navigation block.
+ *
+ * @return void
+ */
+function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
+	while ( $w->next_tag(
+		array(
+			'tag_name'   => 'LI',
+			'class_name' => 'has-child',
+		)
+	) ) {
+		// Add directives to the parent `<li>`.
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' );
+
+		// Add directives to the toggle submenu button.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'BUTTON',
+				'class_name' => 'wp-block-navigation-submenu__toggle',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+			$w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+		};
+
+		// Add directives to the `<ul>` containing the subitems.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		};
+		// Iterate through subitems if exist.
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+	}
+};
+
+add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 );
+
+// Enqueue the `interactivity.js` file with the store.
+add_filter(
+	'block_type_metadata',
+	function ( $metadata ) {
+		if ( 'core/navigation' === $metadata['name'] ) {
+			wp_register_script(
+				'wp-block-navigation-view',
+				gutenberg_url( 'build/block-library/interactive-blocks/navigation.min.js' ),
+				array( 'wp-interactivity-runtime' )
+			);
+			$metadata['viewScript'] = array( 'wp-block-navigation-view' );
+		}
+		return $metadata;
+	},
+	10,
+	1
+);

lib/experimental/interactivity-api/script-loader.php

@@ -34,17 +34,16 @@ function gutenberg_register_interactivity_scripts( $scripts ) {
  * Adds the "defer" attribute to all the interactivity script tags.
  *
  * @param string $tag    The generated script tag.
- * @param string $handle The script's registered handle.
  *
  * @return string The modified script tag.
  */
-function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
-	if ( str_starts_with( $handle, 'wp-interactivity-' ) ) {
+function gutenberg_interactivity_scripts_add_defer_attribute( $tag ) {
+	if ( str_contains( $tag, '/block-library/interactive-blocks/' ) ) {
 		$p = new WP_HTML_Tag_Processor( $tag );
 		$p->next_tag( array( 'tag' => 'script' ) );
 		$p->set_attribute( 'defer', true );
 		return $p->get_updated_html();
 	}
 	return $tag;
 }
-add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 2 );
+add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 1 );

lib/experiments-page.php

@@ -113,6 +113,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-interactivity-api-navigation-block',
+		__( 'Navigation block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the Navigation block using the Interactivity API', 'gutenberg' ),
+			'id'    => 'gutenberg-interactivity-api-navigation-block',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

lib/load.php

@@ -103,6 +103,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';
 require __DIR__ . '/experimental/navigation-fallback.php';
+if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-navigation-block' ) ) {
+	require __DIR__ . '/experimental/interactivity-api/navigation-block-interactivity.php';
+}
 
 // Fonts API.
 if ( ! class_exists( 'WP_Fonts' ) ) {