try to get the mobile hiding mechanism to work

WordPress · Jan 3, 2024 · 25c89bb · 25c89bb
1 parent cef2e2c
commit 25c89bb
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -475,6 +475,17 @@ button.wp-block-navigation-item__content {
 	right: 0;
 	bottom: 0;
 
+	&:not(.hidden-by-default):not(.is-menu-open):not(.is-mobile) {
+		display: block;
+		position: static;
+	}
+
+	.is-mobile &:not(.hidden-by-default):not(.is-menu-open) {
+		display: none;
+		position: fixed;
+	}
+
+
 	// Low specificity so that themes can override.
 	& :where(.wp-block-navigation-item a) {
 		color: inherit;
@@ -611,7 +622,7 @@ button.wp-block-navigation-item__content {
 		}
 	}
 
-	@include break-small() {
+	/*@include break-small() {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
 				display: block;
@@ -632,7 +643,7 @@ button.wp-block-navigation-item__content {
 				left: 0;
 			}
 		}
-	}
+	}*/
 }
 
 // Default menu background and font color.
@@ -691,6 +702,10 @@ button.wp-block-navigation-item__content {
 			display: none;
 		}
 	}
+
+	.is-mobile & {
+		display: block !important;
+	}
 }
 
 // Button to close the menus.

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
@@ -176,8 +176,7 @@ const { state, actions, callbacks } = store( 'core/navigation', {
 				ctx.lastFocusableElement =
 					focusableElements[ focusableElements.length - 1 ];
 			}
-			window.addEventListener(
-				'resize',
+			window.addEventListener( 'resize', () =>
 				callbacks.isNavCollapsed( ref )
 			);
 		},
@@ -192,14 +191,17 @@ const { state, actions, callbacks } = store( 'core/navigation', {
 		},
 
 		isNavCollapsed( ref ) {
-			//test if the nav items are wrapping before testing if the actual nav is wrapping inside its parent to avoid the recursive function if possible
+			// remove the is-mobile class to avoid false positives.
+			ref.closest( 'nav' ).classList.remove( 'is-mobile' );
+
+			// test if the nav items are wrapping before testing if the actual nav is wrapping inside its parent to avoid the recursive function if possible
 			if (
 				areItemsWrapping( ref ) === true ||
 				isNavWrapping( ref ) === true
 			) {
-				//console.log( 'is mobile' );
+				ref.closest( 'nav' ).classList.add( 'is-mobile' );
 			} else {
-				//console.log( 'is not mobile' );
+				ref.closest( 'nav' ).classList.remove( 'is-mobile' );
 			}
 		},
 	},
@@ -235,19 +237,26 @@ function isNavWrapping( ref ) {
 	let isWrapping = false;
 	//how can we check if the nav element is wrapped inside its parent if we don't know anything about it (the parent)?
 	//for debugging purposes
-	const container = getFlexParent( ref );
+	const container = ref.closest( 'nav' ); //getFlexParent( ref );
 	if ( container !== null ) {
-		isWrapping = areItemsWrapping(
-			container,
-			Array.from(
-				container.querySelector( 'ul.wp-block-navigation' ).children
-			)
+		const childrenWrapper = container.querySelector(
+			'ul.wp-block-navigation'
 		);
+		isWrapping =
+			childrenWrapper &&
+			childrenWrapper.children &&
+			areItemsWrapping(
+				container,
+				Array.from(
+					container.querySelector( 'ul.wp-block-navigation' ).children
+				)
+			);
 	}
 
 	return isWrapping;
 }
 
+/* I'm not sure we still need this - can we just get the nearest nav element?
 function getFlexParent( elem ) {
 	if ( elem === document.body ) {
 		// Base case: Stop recursion once we go all the way to the body to avoid infinite recursion
@@ -261,7 +270,7 @@ function getFlexParent( elem ) {
 		return parent;
 	}
 	return getFlexParent( parent );
-}
+}*/
 
 function getItemWidths( items ) {
 	const itemsWidths = [];