Revert "Navigation: Refactor mobile overlay breakpoints to JS (#57520)…

…" (#59149) Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> Co-authored-by: DAreRodz <darerodz@git.wordpress.org> Co-authored-by: huubl <huubl@git.wordpress.org> Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org> Co-authored-by: tomxygen <tomxygen@git.wordpress.org>
WordPress · Feb 20, 2024 · 27da58c · 27da58c
1 parent 302d96f
commit 27da58c
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 80 deletions.
diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js
@@ -23,5 +23,3 @@ export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'wp_navigation',
 	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];
-
-export const NAVIGATION_MOBILE_COLLAPSE = '600px';
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -42,7 +42,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
-import { useInstanceId, useMediaQuery } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,7 +71,6 @@ import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
-import { NAVIGATION_MOBILE_COLLAPSE } from '../constants';
 import { unlock } from '../../lock-unlock';
 
 function Navigation( {
@@ -298,14 +297,6 @@ function Navigation( {
 		[ clientId ]
 	);
 	const isResponsive = 'never' !== overlayMenu;
-	const isMobileBreakPoint = useMediaQuery(
-		`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
-	);
-
-	const isCollapsed =
-		( 'mobile' === overlayMenu && isMobileBreakPoint ) ||
-		'always' === overlayMenu;
-
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames(
@@ -319,7 +310,6 @@ function Navigation( {
 				'is-vertical': orientation === 'vertical',
 				'no-wrap': flexWrap === 'nowrap',
 				'is-responsive': isResponsive,
-				'is-collapsed': isCollapsed,
 				'has-text-color': !! textColor.color || !! textColor?.class,
 				[ getColorClassName( 'color', textColor?.slug ) ]:
 					!! textColor?.slug,

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -429,7 +429,7 @@ $color-control-label-height: 20px;
 // These needs extra specificity in the editor.
 .wp-block-navigation__responsive-container:not(.is-menu-open) {
 	.components-button.wp-block-navigation__responsive-container-close {
-		.is-collapsed & {
+		@include break-small {
 			display: none;
 		}
 	}

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -390,25 +390,16 @@ private static function get_classes( $attributes ) {
 		$text_decoration       = $attributes['style']['typography']['textDecoration'] ?? null;
 		$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
 
-		// Sets the is-collapsed class when the navigation is set to always use the overlay.
-		// This saves us from needing to do this check in the view.js file (see the collapseNav function).
-		$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(),
-			$is_collapsed_class
+			$text_decoration ? array( $text_decoration_class ) : array()
 		);
 		return implode( ' ', $classes );
 	}
 
-	private static function is_always_overlay( $attributes ) {
-		return isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
-	}
-
 	/**
 	 * Get styles for the navigation block.
 	 *
@@ -435,12 +426,16 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$colors          = 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'];
@@ -538,7 +533,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 		);
 
 		if ( $is_responsive_menu ) {
-			$nav_element_directives = static::get_nav_element_directives( $is_interactive, $attributes );
+			$nav_element_directives = static::get_nav_element_directives( $is_interactive );
 			$wrapper_attributes    .= ' ' . $nav_element_directives;
 		}
 
@@ -552,7 +547,7 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 	 * @param array $attributes     The block attributes.
 	 * @return string the directives for the navigation element.
 	 */
-	private static function get_nav_element_directives( $is_interactive, $attributes ) {
+	private static function get_nav_element_directives( $is_interactive ) {
 		if ( ! $is_interactive ) {
 			return '';
 		}
@@ -569,16 +564,6 @@ private static function get_nav_element_directives( $is_interactive, $attributes
 		 data-wp-interactive="core/navigation"'
 		. $nav_element_context;
 
-		/*
-		* When the navigation's 'overlayMenu' attribute is set to 'always', JavaScript
-		* is not needed for collapsing the menu because the class is set manually.
-		*/
-		if ( ! static::is_always_overlay( $attributes ) ) {
-			$nav_element_directives .= 'data-wp-init="callbacks.initNav"';
-			$nav_element_directives .= ' '; // space separator
-			$nav_element_directives .= 'data-wp-class--is-collapsed="context.isCollapsed"';
-		}
-
 		return $nav_element_directives;
 	}
 

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -611,19 +611,18 @@ button.wp-block-navigation-item__content {
 		}
 	}
 
-	// When the menu is collapsed, the menu button is visible.
-	// We are using the > selector combined with the :not(is-collapsed) selector
-	// as a way to target the class being added to the parent nav element.
-	: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;
+	@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;
+				}
 			}
 		}
 
@@ -687,11 +686,10 @@ button.wp-block-navigation-item__content {
 		font-size: inherit;
 	}
 
-	// When the menu is collapsed, the menu button is visible.
-	// We are using the > selector combined with the :not(is-collapsed) selector
-	// as a way to target the class being added to the parent nav element.
-	:not(.is-collapsed) > & {
-		display: none;
+	&:not(.always-shown) {
+		@include break-small {
+			display: none;
+		}
 	}
 }
 

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
@@ -3,11 +3,6 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
-/**
- * Internal dependencies
- */
-import { NAVIGATION_MOBILE_COLLAPSE } from './constants';
-
 const focusableSelectors = [
 	'a[href]',
 	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
@@ -201,27 +196,6 @@ const { state, actions } = store(
 					focusableElements?.[ 0 ]?.focus();
 				}
 			},
-			initNav() {
-				const context = getContext();
-				const mediaQuery = window.matchMedia(
-					`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
-				);
-
-				// Run once to set the initial state.
-				context.isCollapsed = mediaQuery.matches;
-
-				function handleCollapse( event ) {
-					context.isCollapsed = event.matches;
-				}
-
-				// Run on resize to update the state.
-				mediaQuery.addEventListener( 'change', handleCollapse );
-
-				// Remove the listener when the component is unmounted.
-				return () => {
-					mediaQuery.removeEventListener( 'change', handleCollapse );
-				};
-			},
 		},
 	},
 	{ lock: true }