Navigation: Refactor mobile overlay breakpoints to JS

lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

@@ -361,16 +361,24 @@ private static function get_classes( $attributes ) {
 		$text_decoration       = $attributes['style']['typography']['textDecoration'] ?? null;
 		$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
 
+		// is-collapsed class is added to the navigation block when the menu is collapsed.
+		$is_collapsed_class = static::is_always_overlay( $attributes ) ? array( 'is-collapsed' ) : array();
+
 		$classes = array_merge(
 			$colors['css_classes'],
 			$font_sizes['css_classes'],
 			$is_responsive_menu ? array( 'is-responsive' ) : array(),
 			$layout_class ? array( $layout_class ) : array(),
-			$text_decoration ? array( $text_decoration_class ) : array()
+			$text_decoration ? array( $text_decoration_class ) : array(),
+			$is_collapsed_class
 		);
 		return implode( ' ', $classes );
 	}
 
+	private static function is_always_overlay( $attributes ) {
+		return isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+	}
+
 	/**
 	 * Get styles for the navigation block.
 	 *
@@ -397,16 +405,12 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$colors                  = gutenberg_block_core_navigation_build_css_colors( $attributes );
 		$modal_unique_id         = wp_unique_id( 'modal-' );
 
-		$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
-
 		$responsive_container_classes = array(
 			'wp-block-navigation__responsive-container',
-			$is_hidden_by_default ? 'hidden-by-default' : '',
 			implode( ' ', $colors['overlay_css_classes'] ),
 		);
 		$open_button_classes          = array(
 			'wp-block-navigation__responsive-container-open',
-			$is_hidden_by_default ? 'always-shown' : '',
 		);
 
 		$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
@@ -504,7 +508,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 		);
 
 		if ( $is_responsive_menu ) {
-			$nav_element_directives = static::get_nav_element_directives( $should_load_view_script );
+			$nav_element_directives = static::get_nav_element_directives( $should_load_view_script, $attributes );
 			$wrapper_attributes    .= ' ' . $nav_element_directives;
 		}
 
@@ -517,7 +521,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 	 * @param bool $should_load_view_script Whether or not the view script should be loaded.
 	 * @return string the directives for the navigation element.
 	 */
-	private static function get_nav_element_directives( $should_load_view_script ) {
+	private static function get_nav_element_directives( $should_load_view_script, $attributes ) {
 		if ( ! $should_load_view_script ) {
 			return '';
 		}
@@ -531,10 +535,16 @@ private static function get_nav_element_directives( $should_load_view_script ) {
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
 		);
-		return '
+		$nav_element_directives = '
 			data-wp-interactive=\'{"namespace":"core/navigation"}\'
 			data-wp-context=\'' . $nav_element_context . '\'
 		';
+
+		if ( ! static::is_always_overlay( $attributes ) ) {
+			$nav_element_directives .= 'data-wp-watch="callbacks.initNav"';
+		}
+
+		return $nav_element_directives;
 	}
 
 	/**

packages/block-library/src/navigation/style.scss

@@ -611,18 +611,16 @@ button.wp-block-navigation-item__content {
 		}
 	}
 
-	@include break-small() {
-		&:not(.hidden-by-default) {
-			&:not(.is-menu-open) {
-				display: block;
-				width: 100%;
-				position: relative;
-				z-index: auto;
-				background-color: inherit;
-
-				.wp-block-navigation__responsive-container-close {
-					display: none;
-				}
+	:not(.is-collapsed) > & {
+		&:not(.is-menu-open) {
+			display: block;
+			width: 100%;
+			position: relative;
+			z-index: auto;
+			background-color: inherit;
+
+			.wp-block-navigation__responsive-container-close {
+				display: none;
 			}
 		}
 
@@ -686,10 +684,8 @@ button.wp-block-navigation-item__content {
 		font-size: inherit;
 	}
 
-	&:not(.always-shown) {
-		@include break-small {
-			display: none;
-		}
+	:not(.is-collapsed) > & {
+		display: none;
 	}
 }
 

packages/block-library/src/navigation/view.js

@@ -18,7 +18,7 @@ const focusableSelectors = [
 // capture the clicks, instead of relying on the focusout event.
 document.addEventListener( 'click', () => {} );
 
-const { state, actions } = store( 'core/navigation', {
+const { state, actions, callbacks } = store( 'core/navigation', {
 	state: {
 		get roleAttribute() {
 			const ctx = getContext();
@@ -177,6 +177,20 @@ const { state, actions } = store( 'core/navigation', {
 					focusableElements[ focusableElements.length - 1 ];
 			}
 		},
+		initNav() {
+			const { ref } = getElement();
+			callbacks.collapseNav( ref );
+			window.addEventListener( 'resize', () =>
+				callbacks.collapseNav( ref )
+			);
+		},
+		collapseNav( ref ) {
+			if ( window.innerWidth < 600 ) {
+				ref.classList.add( 'is-collapsed' );
+			} else {
+				ref.classList.remove( 'is-collapsed' );
+			}
+		},
 		focusFirstElement() {
 			const { ref } = getElement();
 			if ( state.isMenuOpen ) {