Style quadrat mobile nav (#3921)

* Remove mobile navigation ponyfill

* Update default mobile theme styles to (more closely) match comps

* Removed opinionated mobile menu button positioning logic from BCB

blank-canvas-blocks/assets/ponyfill.css

@@ -361,20 +361,6 @@ ol {
 	padding-left: var(--wp--custom--list--padding--left);
 }
 
-body.admin-bar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
-	top: calc( 46px + 24px);
-}
-
-.wp-block-navigation.is-responsive {
-	position: static;
-}
-
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
-	position: absolute;
-	top: 24px;
-	right: 24px;
-}
-
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
 	background-color: var(--wp--custom--color--background);
 	color: var(--wp--custom--color--foreground);
@@ -384,6 +370,10 @@ body.admin-bar .wp-block-navigation.is-responsive .wp-block-navigation__responsi
 	color: var(--wp--custom--color--foreground) !important;
 }
 
+.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
+	display: revert;
+}
+
 p.has-text-color a {
 	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
 }

blank-canvas-blocks/sass/blocks/_navigation.scss

@@ -1,18 +1,4 @@
-body.admin-bar {
-	.wp-block-navigation.is-responsive {
-		.wp-block-navigation__responsive-container-open {
-			top: calc( 46px + 24px);
-		}
-	}	
-}
-
 .wp-block-navigation.is-responsive {
-	position: static;
-	.wp-block-navigation__responsive-container-open {
-		position: absolute;
-		top: 24px;
-		right: 24px;
-	}
 	.wp-block-navigation__responsive-container.is-menu-open {
 		background-color: var(--wp--custom--color--background);
 		color: var(--wp--custom--color--foreground);
@@ -20,4 +6,7 @@ body.admin-bar {
 	.wp-block-navigation-link__content {
 		color: var(--wp--custom--color--foreground) !important;
 	}
+	.has-child .wp-block-navigation-link__container{
+		display: revert;
+	}
 }

blockbase/assets/ponyfill.css

@@ -361,20 +361,6 @@ ol {
 	padding-left: var(--wp--custom--list--padding--left);
 }
 
-body.admin-bar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
-	top: calc( 46px + 24px);
-}
-
-.wp-block-navigation.is-responsive {
-	position: static;
-}
-
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
-	position: absolute;
-	top: 24px;
-	right: 24px;
-}
-
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
 	background-color: var(--wp--custom--color--background);
 	color: var(--wp--custom--color--foreground);
@@ -384,6 +370,10 @@ body.admin-bar .wp-block-navigation.is-responsive .wp-block-navigation__responsi
 	color: var(--wp--custom--color--foreground) !important;
 }
 
+.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
+	display: revert;
+}
+
 p.has-text-color a {
 	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
 }

blockbase/sass/blocks/_navigation.scss

@@ -1,18 +1,4 @@
-body.admin-bar {
-	.wp-block-navigation.is-responsive {
-		.wp-block-navigation__responsive-container-open {
-			top: calc( 46px + 24px);
-		}
-	}	
-}
-
 .wp-block-navigation.is-responsive {
-	position: static;
-	.wp-block-navigation__responsive-container-open {
-		position: absolute;
-		top: 24px;
-		right: 24px;
-	}
 	.wp-block-navigation__responsive-container.is-menu-open {
 		background-color: var(--wp--custom--color--background);
 		color: var(--wp--custom--color--foreground);
@@ -20,4 +6,7 @@ body.admin-bar {
 	.wp-block-navigation-link__content {
 		color: var(--wp--custom--color--foreground) !important;
 	}
+	.has-child .wp-block-navigation-link__container{
+		display: revert;
+	}
 }

quadrat/assets/navigation.js

@@ -1,76 +0,0 @@
-/**
- * File navigation.js.
- *
- * Required to open the mobile navigation.
- */
-( function () {
-	function mobilizeNavigationBlock( navMenu ) {
-		if ( ! navMenu ) {
-			return;
-		}
-		addMobileMenuOpenButton( navMenu );
-		addMobileMenuCloseButton( navMenu );
-	}
-
-	function addMobileMenuOpenButton( navMenu ) {
-		const menuContainer = navMenu.querySelector(
-			'.wp-block-navigation__container'
-		);
-		if ( ! menuContainer ) {
-			return;
-		}
-		const openButton = document.createElement( 'button' );
-		const openButtonLabel = getComputedStyle(
-			menuContainer
-		).getPropertyValue(
-			'--wp--custom--navigation--mobile--menu--open-label'
-		);
-		openButton.classList.add(
-			'wp-block-navigation__mobile-menu-open-button'
-		);
-		openButton.innerText = openButtonLabel;
-		openButton.addEventListener( 'click', ( clickEvent ) => {
-			navMenu.classList.add( 'show' );
-			menuContainer.scrollTop = 0;
-			if ( 0 === clickEvent.detail ) {
-				// Menu was opened with keyboard, apply focus to close button.
-				const firstButton = menuContainer.querySelector(
-					'.wp-block-navigation__mobile-menu-close-button'
-				);
-				if ( firstButton ) {
-					firstButton.focus();
-				}
-			}
-		} );
-		navMenu.appendChild( openButton );
-	}
-
-	function addMobileMenuCloseButton( navMenu ) {
-		const menuContainer = navMenu.querySelector(
-			'.wp-block-navigation__container'
-		);
-		if ( ! menuContainer ) {
-			return;
-		}
-		const closeButton = document.createElement( 'button' );
-		const closeButtonLabel = getComputedStyle(
-			menuContainer
-		).getPropertyValue(
-			'--wp--custom--navigation--mobile--menu--close-label'
-		);
-		closeButton.classList.add(
-			'wp-block-navigation__mobile-menu-close-button'
-		);
-		closeButton.innerText = closeButtonLabel;
-		closeButton.addEventListener( 'click', () => {
-			navMenu.classList.remove( 'show' );
-		} );
-		menuContainer.prepend( closeButton );
-	}
-
-	window.addEventListener( 'load', () => {
-		mobilizeNavigationBlock(
-			document.querySelector( 'header .wp-block-navigation' )
-		);
-	} );
-} )();

quadrat/assets/theme.css

@@ -159,7 +159,7 @@ ul ul {
 	}
 }
 
-.wp-block-navigation-link a:hover {
+.wp-block-navigation .wp-block-navigation-link a:hover {
 	background: transparent;
 }
 
@@ -173,113 +173,40 @@ ul ul {
 	border-color: var(--wp--custom--color--foreground);
 }
 
-.wp-block-navigation__mobile-menu-open-button {
+.wp-block-navigation .wp-block-navigation__mobile-menu-open-button {
 	color: var(--wp--custom--color--primary);
 }
 
-.wp-block-navigation a {
-	border-bottom: none;
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
+	background-color: var(--wp--custom--color--secondary);
 }
 
-.wp-block-navigation .wp-block-navigation-link {
-	padding: 0;
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link {
+	font-size: 20px;
+	line-height: 50px;
+	margin: 0;
+	align-items: flex-end;
 }
 
-.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
-	padding: var(--wp--custom--navigation--padding);
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__content {
+	margin-right: 0;
 }
 
-.wp-block-navigation .wp-block-navigation-link__submenu-icon {
-	padding: 0;
-	text-indent: -8px;
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container {
+	margin-right: -19px;
+	padding: 0 19px 0 0;
+	border-right: 1px solid var(--wp--custom--color--foreground);
 }
 
-.wp-block-navigation .wp-block-navigation__container {
-	padding: 20px;
-}
-
-.wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation-link__container {
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
 	padding: 0;
-	border-radius: var(--wp--custom--navigation--submenu--border--radius);
-	border-style: var(--wp--custom--navigation--submenu--border--style);
-	border-width: var(--wp--custom--navigation--submenu--border--width);
-	border-color: var(--wp--custom--navigation--submenu--border--color);
-	box-shadow: var(--wp--custom--navigation--submenu--shadow);
-}
-
-.wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
-	padding: var(--wp--custom--navigation--submenu--padding);
-}
-
-@media (min-width: 480px) {
-	header .wp-block-navigation .wp-block-navigation__mobile-menu-open-button,
-	header .wp-block-navigation .wp-block-navigation__mobile-menu-close-button {
-		display: none;
-	}
+	font-size: 15px;
+	line-height: 40px;
 }
 
-@media (max-width: 479px) {
-	header .wp-block-navigation:not(.show) {
-		text-align: right;
-		padding-left: var(--wp--custom--margin--horizontal);
-		padding-right: var(--wp--custom--margin--horizontal);
-	}
-	header .wp-block-navigation:not(.show) .wp-block-navigation__container {
-		display: none;
-	}
-	header .wp-block-navigation:not(.show) .wp-block-navigation__mobile-menu-open-button {
-		font-size: var(--wp--custom--navigation--mobile--menu--typography--font-size);
-		font-weight: var(--wp--custom--navigation--mobile--menu--typography--font-weight);
-		font-family: var(--wp--custom--navigation--mobile--menu--typography--font-family);
-		background-color: transparent;
-		border: none;
-	}
-	header .wp-block-navigation:not(.show) .wp-block-navigation__mobile-menu-close-button {
-		display: none;
-	}
-	header .wp-block-navigation.show {
-		opacity: 1;
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		width: 100%;
-	}
-	header .wp-block-navigation.show .wp-block-navigation__mobile-menu-close-button {
-		display: inline-block;
-		position: absolute;
-		top: var(--wp--custom--margin--vertical);
-		right: var(--wp--custom--margin--horizontal);
-		color: var(--wp--custom--navigation--mobile--menu--color--text);
-		font-size: var(--wp--custom--navigation--mobile--menu--typography--font-size);
-		font-weight: var(--wp--custom--navigation--mobile--menu--typography--font-weight);
-		font-family: var(--wp--custom--navigation--mobile--menu--typography--font-family);
-		background-color: transparent;
-		border: none;
-	}
-	header .wp-block-navigation.show .wp-block-navigation__container {
-		background-color: var(--wp--custom--navigation--submenu--color--background);
-		flex-direction: column;
-		align-items: var(--wp--custom--navigation--mobile--horizontal-alignment);
-		justify-content: var(--wp--custom--navigation--mobile--vertical-alignment);
-		position: fixed;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 99999;
-		overflow-y: scroll;
-	}
-	header .wp-block-navigation.show .wp-block-navigation-link {
-		padding: 0;
-	}
-	header .wp-block-navigation.show .wp-block-navigation-link .wp-block-navigation-link__content {
-		padding: var(--wp--custom--navigation--mobile--padding);
-		font-family: var(--wp--custom--navigation--mobile--typography--font-family);
-		font-size: var(--wp--custom--navigation--mobile--typography--font-size);
-		font-weight: var(--wp--custom--navigation--mobile--typography--font-weight);
-		line-height: var(--wp--custom--navigation--mobile--typography--line-height);
-	}
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
+	padding-top: 50px;
+	align-items: flex-end;
 }
 
 /**
@@ -744,6 +671,7 @@ textarea:focus {
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	overflow: inherit;
+	width: 100%;
 	padding: 10px 20px 60px;
 }
 

quadrat/child-experimental-theme.json

@@ -99,51 +99,6 @@
 				"horizontal": "20px",
 				"vertical": "30px"
 			},
-			"navigation": {
-				"mobile": {
-					"menu": {
-						"color": {
-							"text": "var(--wp--custom--color--foreground)"
-						},
-						"closeLabel": "╳",
-						"openLabel": "☰",
-						"typography": {
-							"fontWeight": 500,
-							"fontSize": "24px",
-							"fontFamily": "var(--wp--custom--font-family--base)"
-						}
-					},
-					"padding": "10px",
-					"typography": {
-						"fontWeight": 200,
-						"fontSize": "20px",
-						"lineHeight": "40px",
-						"fontFamily": "var(--wp--custom--font-family--base)"
-					},
-					"horizontalAlignment": "center",
-					"verticalAlignment": "center"
-				},
-				"padding": "10px",
-				"submenu": {
-					"color": {
-						"text": "var(--wp--custom--color--foreground)",
-						"background": "var(--wp--custom--color--background)",
-						"hoverText": "var(--wp--custom--color--secondary)",
-						"hoverBackground": "var(--wp--custom--color--background)"
-					},
-					"border": {
-						"color": "var(--wp--custom--color--foreground)",
-						"radius": "0",
-						"style": "solid",
-						"width": "2px"
-					},
-					"padding": "8px",
-					"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
-				},
-				"color": {
-					"hoverText": "var(--wp--custom--color--primary)"
-				}
-			},
 			"paragraph": {
 				"dropcap": {
 					"margin": "0 .2em .2em 0",

quadrat/experimental-theme.json

@@ -232,51 +232,6 @@
 					"h5": 1.4,
 					"h6": 1.4
 				}
-			},
-			"navigation": {
-				"mobile": {
-					"menu": {
-						"color": {
-							"text": "var(--wp--custom--color--foreground)"
-						},
-						"closeLabel": "╳",
-						"openLabel": "☰",
-						"typography": {
-							"fontWeight": 500,
-							"fontSize": "24px",
-							"fontFamily": "var(--wp--custom--font-family--base)"
-						}
-					},
-					"padding": "10px",
-					"typography": {
-						"fontWeight": 200,
-						"fontSize": "20px",
-						"lineHeight": "40px",
-						"fontFamily": "var(--wp--custom--font-family--base)"
-					},
-					"horizontalAlignment": "center",
-					"verticalAlignment": "center"
-				},
-				"padding": "10px",
-				"submenu": {
-					"color": {
-						"text": "var(--wp--custom--color--foreground)",
-						"background": "var(--wp--custom--color--background)",
-						"hoverText": "var(--wp--custom--color--secondary)",
-						"hoverBackground": "var(--wp--custom--color--background)"
-					},
-					"border": {
-						"color": "var(--wp--custom--color--foreground)",
-						"radius": "0",
-						"style": "solid",
-						"width": "2px"
-					},
-					"padding": "8px",
-					"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
-				},
-				"color": {
-					"hoverText": "var(--wp--custom--color--primary)"
-				}
 			}
 		},
 		"layout": {

quadrat/functions.php

@@ -43,7 +43,6 @@ endif;
 function quadrat_scripts() {
 	// Enqueue front-end styles.
 	wp_enqueue_style( 'quadrat-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array( 'blockbase-ponyfill' ), wp_get_theme()->get( 'Version' ) );
-	wp_enqueue_script( 'quadrat-navigation-script', get_stylesheet_directory_uri() . '/assets/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
 }
 add_action( 'wp_enqueue_scripts', 'quadrat_scripts' );
 

quadrat/sass/_header.scss

@@ -8,6 +8,7 @@
 		flex-wrap: wrap;
 		justify-content: flex-start;
 		overflow: inherit;
+		width: 100%;
 		padding: 10px 20px 60px; // TODO: Maybe replace with a responsive custom variable?
 
 		@include break-mobile() {

quadrat/sass/blocks/_navigation.scss

@@ -1,133 +1,54 @@
-.wp-block-navigation-link a:hover {
-	background: transparent;
-}
-
-.wp-block-navigation .wp-block-pages-list__item .wp-block-pages-list__item__link,
-.wp-block-navigation .wp-block-navigation-link__content {
-	&:hover {
-		text-decoration: underline;
-	}
-}
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
-	background-color: var(--wp--custom--color--background);
-	border-color: var(--wp--custom--color--foreground);
-}
-
-.wp-block-navigation__mobile-menu-open-button {
-	color: var(--wp--custom--color--primary);
-}
-
-// Ponyfill for mobile navigation.  Can be removed when this is resolved: https://github.com/WordPress/gutenberg/pull/31911
 .wp-block-navigation {
-	a {
-		border-bottom: none;
+	.wp-block-navigation-link a:hover {
+		background: transparent;
 	}
-	.wp-block-navigation-link {
-		padding: 0;
-		.wp-block-navigation-link__content {
-			padding: var(--wp--custom--navigation--padding);
+	.wp-block-pages-list__item .wp-block-pages-list__item__link,
+	.wp-block-navigation-link__content {
+		&:hover {
+			text-decoration: underline;
 		}
 	}
-	.wp-block-navigation-link__submenu-icon {
-		padding: 0;
-		text-indent: -8px;
-	}
-	.wp-block-navigation__container {
-		padding: 20px;
-		.has-child {
+	&:not(.has-background) { 
+		.wp-block-navigation__container { 
 			.wp-block-navigation-link__container {
-				padding: 0;
-				border-radius: var(--wp--custom--navigation--submenu--border--radius);
-				border-style: var(--wp--custom--navigation--submenu--border--style);
-				border-width: var(--wp--custom--navigation--submenu--border--width);
-				border-color: var(--wp--custom--navigation--submenu--border--color);
-				box-shadow: var(--wp--custom--navigation--submenu--shadow);
-
-				.wp-block-navigation-link__content {
-					padding: var(--wp--custom--navigation--submenu--padding);
-				}
+				background-color: var(--wp--custom--color--background);
+				border-color: var(--wp--custom--color--foreground);
 			}
 		}
 	}
-}
-
-@include break-mobile {
-	header .wp-block-navigation {
-		.wp-block-navigation__mobile-menu-open-button,
-		.wp-block-navigation__mobile-menu-close-button {
-			display:none;
-		}
-	}
-}
 
-@include break-mobile-only {
-	header .wp-block-navigation:not(.show) {
-		text-align: right;
-		padding-left: var(--wp--custom--margin--horizontal);
-		padding-right: var(--wp--custom--margin--horizontal);
-
-		.wp-block-navigation__container {
-			display: none;
-		}
-
-		.wp-block-navigation__mobile-menu-open-button {
-			font-size: var(--wp--custom--navigation--mobile--menu--typography--font-size);
-			font-weight: var(--wp--custom--navigation--mobile--menu--typography--font-weight);
-			font-family: var(--wp--custom--navigation--mobile--menu--typography--font-family);
-			background-color: transparent;
-			border: none;
-		}
-
-		.wp-block-navigation__mobile-menu-close-button {
-			display: none;
-		}
-	}
-
-	header .wp-block-navigation.show {
-		opacity: 1;
-		position:absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		width: 100%;
-
-		.wp-block-navigation__mobile-menu-close-button {
-			display: inline-block;
-			position: absolute;
-			top: var(--wp--custom--margin--vertical);
-			right: var(--wp--custom--margin--horizontal);
-			color: var(--wp--custom--navigation--mobile--menu--color--text);
-			font-size: var(--wp--custom--navigation--mobile--menu--typography--font-size);
-			font-weight: var(--wp--custom--navigation--mobile--menu--typography--font-weight);
-			font-family: var(--wp--custom--navigation--mobile--menu--typography--font-family);
-			background-color: transparent;
-			border: none;
-		}
-
-		.wp-block-navigation__container {
-			background-color: var(--wp--custom--navigation--submenu--color--background);
-			flex-direction: column;
-			align-items: var(--wp--custom--navigation--mobile--horizontal-alignment);
-			justify-content: var(--wp--custom--navigation--mobile--vertical-alignment);
-			position:fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			z-index: 99999;
-			overflow-y: scroll;
-		}
-		.wp-block-navigation-link {
-			padding: 0;
-			.wp-block-navigation-link__content {
-				padding: var(--wp--custom--navigation--mobile--padding);
-				font-family: var(--wp--custom--navigation--mobile--typography--font-family);
-				font-size: var(--wp--custom--navigation--mobile--typography--font-size);
-				font-weight: var(--wp--custom--navigation--mobile--typography--font-weight);
-				line-height: var(--wp--custom--navigation--mobile--typography--line-height);
+	.wp-block-navigation__mobile-menu-open-button {
+		color: var(--wp--custom--color--primary);
+	}
+
+	&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
+		background-color: var(--wp--custom--color--secondary);
+		&.has-modal-open {
+			.wp-block-navigation-link {
+				font-size: 20px;
+				line-height: 50px;
+				margin: 0;
+				align-items: flex-end;
+				&.has-child {
+					.wp-block-navigation-link__content {
+						margin-right: 0;
+					}
+					.wp-block-navigation-link__container{
+						margin-right: -19px;
+						padding: 0 19px 0 0;
+						border-right: 1px solid var(--wp--custom--color--foreground);
+						.wp-block-navigation-link__content {
+							padding: 0;
+							font-size: 15px;
+							line-height: 40px;
+						}
+					}
+				}
+			}
+			.wp-block-navigation__container{
+				padding-top: 50px;
+				align-items: flex-end;
 			}
 		}
 	}
 }
-
-//end mobile navigation