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

This reverts commit 1b75cf6.
WordPress · Feb 19, 2024 · cd4e8da · cd4e8da
1 parent 280c5d7
commit cd4e8da
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 58 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/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 }