BCB + children: use nav block responsive control (#3870)

* Replace responsive logic + styles with the blocks native responsiveness.
* Added responsive flag and removed default links for navigation blocks
* Added backup solution to mobile nav to quadrat

Co-authored-by: Jason Crist <jcrist@pbking.com>

blank-canvas-blocks/assets/navigation.js

@@ -1,58 +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' ) );
-	});
-
-})();

blank-canvas-blocks/assets/ponyfill.css

@@ -349,103 +349,27 @@ ol {
 	padding-left: var(--wp--custom--list--padding--left);
 }
 
-.wp-block-navigation a {
-	border-bottom: none;
+body.admin-bar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
+	top: calc( 46px + 24px);
 }
 
-.wp-block-navigation .wp-block-navigation-link {
-	padding: 0;
-}
-
-.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
-	padding: var(--wp--custom--navigation--padding);
-}
-
-.wp-block-navigation .wp-block-navigation-link__submenu-icon {
-	padding: 0;
-	text-indent: -8px;
+.wp-block-navigation.is-responsive {
+	position: static;
 }
 
-.wp-block-navigation .wp-block-navigation__container .has-child .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.is-responsive .wp-block-navigation__responsive-container-open {
+	position: absolute;
+	top: 24px;
+	right: 24px;
 }
 
-.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;
-	}
+.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);
 }
 
-@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);
-		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);
-	}
+.wp-block-navigation.is-responsive .wp-block-navigation-link__content {
+	color: var(--wp--custom--color--foreground) !important;
 }
 
 p.has-text-color a {

blank-canvas-blocks/block-template-parts/navigation.html

@@ -1,4 +1,4 @@
-<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center"} -->
+<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center","isResponsive":true} -->
 <!-- /wp:navigation -->
 <!-- wp:spacer {"height":60} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

blank-canvas-blocks/experimental-theme.json

@@ -143,47 +143,6 @@
 				"horizontal": "30px",
 				"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",
-						"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": "0",
-						"radius": "0",
-						"style": "none",
-						"width": "1px"
-					},
-					"padding": "8px",
-					"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
-				}
-			},
 			"paragraph": {
 				"dropcap": {
 					"margin": ".1em .1em 0 0",
@@ -356,6 +315,11 @@
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
+			"core/navigation-link": {
+				"color": {
+					"background": "var(--wp--custom--color--background)"
+				}
+			},
 			"core/post-content": {
 				"spacing": {
 					"padding": {

blank-canvas-blocks/functions.php

@@ -49,7 +49,6 @@ add_action( 'admin_init', 'blank_canvas_editor_styles' );
 function blank_canvas_blocks_scripts() {
 	// Enqueue Google fonts
 	wp_enqueue_style( 'blank-canvas-blocks-fonts', blank_canvas_blocks_fonts_url(), array(), null );
-	wp_enqueue_script( 'blank-canvas-navigation-script', get_template_directory_uri() . '/assets/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
 	wp_enqueue_style( 'blank_canvas_blocks-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' ) );
 }
 add_action( 'wp_enqueue_scripts', 'blank_canvas_blocks_scripts' );

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

@@ -1,108 +1,23 @@
-.wp-block-navigation {
-	a {
-		border-bottom: none;
-	}
-	.wp-block-navigation-link {
-		padding: 0;
-		.wp-block-navigation-link__content {
-			padding: var(--wp--custom--navigation--padding);
-		}
-	}
-	.wp-block-navigation-link__submenu-icon {
-		padding: 0;
-		text-indent: -8px;
-	}
-	.wp-block-navigation__container {
-		.has-child {
-			.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);
-				}
-			}
+body.admin-bar {
+	.wp-block-navigation.is-responsive {
+		.wp-block-navigation__responsive-container-open {
+			top: calc( 46px + 24px);
 		}
-	}
+	}	
 }
 
-@include break-mobile {
-	header .wp-block-navigation {
-		.wp-block-navigation__mobile-menu-open-button,
-		.wp-block-navigation__mobile-menu-close-button {
-			display:none;
-		}
+.wp-block-navigation.is-responsive {
+	position: static;
+	.wp-block-navigation__responsive-container-open {
+		position: absolute;
+		top: 24px;
+		right: 24px;
 	}
-}
-
-@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;
-		}
+	.wp-block-navigation__responsive-container.is-menu-open {
+		background-color: var(--wp--custom--color--background);
+		color: var(--wp--custom--color--foreground);
 	}
-
-	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);
-			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);
-			}
-		}
+	.wp-block-navigation-link__content {
+		color: var(--wp--custom--color--foreground) !important;
 	}
-}
+}

mayland-blocks/block-template-parts/header.html

@@ -4,20 +4,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"verticalAlignment":"center"} -->
-<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
-<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"About","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
-
-<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","className":"is-style-logos-only"} -->
-<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"instagram.com/wordpress","service":"instagram"} /-->
-
-<!-- wp:social-link {"url":"twitter.com/wordpress","service":"twitter"} /--></ul>
-<!-- /wp:social-links -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true} -->
 <!-- /wp:navigation --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->

mayland-blocks/experimental-theme.json

@@ -150,47 +150,6 @@
 				"horizontal": "32px",
 				"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",
-						"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": "0",
-						"radius": "0",
-						"style": "none",
-						"width": "1px"
-					},
-					"padding": "8px",
-					"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
-				}
-			},
 			"paragraph": {
 				"dropcap": {
 					"margin": ".1em .1em 0 0",
@@ -385,6 +344,11 @@
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
+			"core/navigation-link": {
+				"color": {
+					"background": "var(--wp--custom--color--background)"
+				}
+			},
 			"core/post-content": {
 				"spacing": {
 					"padding": {

quadrat/assets/navigation.js

@@ -0,0 +1,76 @@
+/**
+ * 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

@@ -168,10 +168,120 @@ ul ul {
 	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);
 }
 
+.wp-block-navigation a {
+	border-bottom: none;
+}
+
+.wp-block-navigation .wp-block-navigation-link {
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
+	padding: var(--wp--custom--navigation--padding);
+}
+
+.wp-block-navigation .wp-block-navigation-link__submenu-icon {
+	padding: 0;
+	text-indent: -8px;
+}
+
+.wp-block-navigation .wp-block-navigation__container {
+	padding: 20px;
+}
+
+.wp-block-navigation .wp-block-navigation__container .has-child .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 .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;
+	}
+}
+
+@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-post-comments .reply a, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a:active {
 	font-size: 1em;
 	line-height: 1.2;

quadrat/child-experimental-theme.json

@@ -100,6 +100,46 @@
 				"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)"
 				}
@@ -224,6 +264,17 @@
 					"fontFamily": "var(--wp--preset--font-family--base)"
 				}
 			},
+			"core/navigation": {
+				"typography": {
+					"fontSize": "18px"
+				}
+			},
+			"core/navigation-link": {
+				"color": {
+					"background": "transparent",
+					"text": "var(--wp--custom--color--foreground)"
+				}
+			},
 			"core/post-title": {
 				"typography": {
 					"fontSize": "var(--wp--custom--heading--h1--font-size)",
@@ -288,11 +339,6 @@
 					"fontSize": "18px",
 					"fontWeight": 700
 				}
-			},
-			"core/navigation": {
-				"typography": {
-					"fontSize": "18px"
-				}
 			}
 		},
 		"elements": {

quadrat/experimental-theme.json

@@ -150,50 +150,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",
-						"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": "0",
-						"radius": "0",
-						"style": "none",
-						"width": "1px"
-					},
-					"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",
@@ -276,6 +232,51 @@
 					"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": {
@@ -394,6 +395,12 @@
 					"fontSize": "18px"
 				}
 			},
+			"core/navigation-link": {
+				"color": {
+					"background": "transparent",
+					"text": "var(--wp--custom--color--foreground)"
+				}
+			},
 			"core/post-content": {
 				"spacing": {
 					"padding": {

quadrat/functions.php

@@ -43,6 +43,7 @@ endif;
 function quadrat_scripts() {
 	// Enqueue front-end styles.
 	wp_enqueue_style( 'quadrat-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array( 'blank_canvas_blocks-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/inc/render-navigation-block.php

@@ -6,13 +6,17 @@ if ( ! function_exists( 'render_navigation_block' ) ) :
 			return;
 		}
 
+		$block_attributes                 = array();
+		$block_attributes['isResponsive'] = true;
+
 		$nav_items = wp_nav_menu(
 			array(
-				'echo'           => false,
-				'theme_location' => $menu_location,
-				'container'      => '',
-				'items_wrap'     => '%3$s',
-				'fallback_cb'    => false,
+				'echo'             => false,
+				'block_attributes' => $block_attributes,
+				'theme_location'   => $menu_location,
+				'container'        => '',
+				'items_wrap'       => '%3$s',
+				'fallback_cb'      => false,
 			)
 		);
 

quadrat/sass/blocks/_navigation.scss

@@ -8,7 +8,126 @@
 		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 {
+		padding: 0;
+		.wp-block-navigation-link__content {
+			padding: var(--wp--custom--navigation--padding);
+		}
+	}
+	.wp-block-navigation-link__submenu-icon {
+		padding: 0;
+		text-indent: -8px;
+	}
+	.wp-block-navigation__container {
+		padding: 20px;
+		.has-child {
+			.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);
+				}
+			}
+		}
+	}
+}
+
+@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);
+			}
+		}
+	}
+}
+
+//end mobile navigation

seedlet-blocks/block-template-parts/header.html

@@ -8,8 +8,7 @@
 
 <!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
 
-<!-- wp:navigation {"itemsJustification":"center"} -->
-<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
+<!-- wp:navigation {"itemsJustification":"center","isResponsive":true} -->
 <!-- /wp:navigation -->
 
 <!-- wp:spacer {"height":60} -->

seedlet-blocks/experimental-theme.json

@@ -188,47 +188,6 @@
 				"horizontal": "25px",
 				"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",
-						"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": "0",
-						"radius": "0",
-						"style": "none",
-						"width": "1px"
-					},
-					"padding": "8px",
-					"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)"
-				}
-			},
 			"paragraph": {
 				"dropcap": {
 					"margin": ".1em .1em 0 0",
@@ -415,6 +374,11 @@
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
+			"core/navigation-link": {
+				"color": {
+					"background": "var(--wp--custom--color--background)"
+				}
+			},
 			"core/post-content": {
 				"spacing": {
 					"padding": {