Add Navigation styling to BCB (#3460)

* Add navigation style configuration to theme.json & add drop-shadow to submenu as an option.

* Adding mobile menu option to target mobile navigation styles exclusively for navigation blocks in the header.

blank-canvas-blocks/assets/navigation.js

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

@@ -344,6 +344,7 @@ p.has-drop-cap:not(:focus):first-letter {
 
 .wp-block-navigation .wp-block-navigation-link__submenu-icon {
 	padding: 0;
+	text-indent: -8px;
 }
 
 .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link {
@@ -364,6 +365,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	border-color: var(--wp--custom--navigation--submenu--border--color);
 	color: var(--wp--custom--navigation--submenu--color--text);
 	background-color: var(--wp--custom--navigation--submenu--color--background);
+	box-shadow: var(--wp--custom--navigation--submenu--shadow);
 }
 
 .wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation-link__container :hover {
@@ -375,6 +377,75 @@ p.has-drop-cap:not(:focus):first-letter {
 	padding: var(--wp--custom--navigation--submenu--padding);
 }
 
+@media only screen and (min-width: 482px) {
+	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 only screen and (max-width: 481px) {
+	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-quote {
 	border-left: var(--wp--custom--quote--border--width) solid var(--wp--custom--quote--border--color);
 	padding-left: var(--wp--custom--padding--horizontal);

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

@@ -0,0 +1,2 @@
+<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- /wp:navigation -->

blank-canvas-blocks/block-templates/index.html

@@ -1,3 +1,5 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
 <!-- wp:query -->
 	<!-- wp:query-loop -->
 		<!-- wp:post-title {"isLink":true} /-->

blank-canvas-blocks/experimental-theme.json

@@ -179,6 +179,53 @@
 					"padding": {
 						"left": "calc( 2 * var(--wp--custom--padding--horizontal) )"
 					}
+				},
+				"navigation": {
+					"mobile": {
+						"menu": {
+							"openLabel": "☰",
+							"closeLabel": "╳",
+							"color": {
+								"text": "var(--wp--custom--color--foreground)"
+							},
+							"typography": {
+								"fontWeight": 500,
+								"fontSize": "24px",
+								"fontFamily": "var(--wp--custom--font-family--base)"
+							}
+						},
+						"padding": "10px",
+						"verticalAlignment": "center",
+						"horizontalAlignment": "center",
+						"typography": {
+							"fontWeight": 200,
+							"fontSize": "20px",
+							"fontFamily": "var(--wp--custom--font-family--base)"
+						}
+					},
+					"padding": "10px",
+					"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)"
+					},
+					"submenu": {
+						"padding": "8px",
+						"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)",
+						"border": {
+							"radius": "0",
+							"color": "0",
+							"width": "1px",
+							"style": "none"
+						},
+						"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)"
+						}
+					}
 				}
 			}
 		}

blank-canvas-blocks/functions.php

@@ -36,6 +36,7 @@ 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', 11 );

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

@@ -1,34 +1,27 @@
-.wp-block-navigation {
 
+
+.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 {
 		.wp-block-navigation-link {
-
-				color: var(--wp--custom--navigation--color--text);
-				background-color: var(--wp--custom--navigation--color--background);
-				:hover {
-					color: var(--wp--custom--navigation--color--hover-text);
-					background-color: var(--wp--custom--navigation--color--hover-background);
-				}
-	
+			color: var(--wp--custom--navigation--color--text);
+			background-color: var(--wp--custom--navigation--color--background);
+			:hover {
+				color: var(--wp--custom--navigation--color--hover-text);
+				background-color: var(--wp--custom--navigation--color--hover-background);
+			}
 		}	
 		.has-child {
 			.wp-block-navigation-link__container {
@@ -39,6 +32,7 @@
 				border-color: var(--wp--custom--navigation--submenu--border--color);
 				color: var(--wp--custom--navigation--submenu--color--text);
 				background-color: var(--wp--custom--navigation--submenu--color--background);
+				box-shadow: var(--wp--custom--navigation--submenu--shadow);
 				:hover {
 					color: var(--wp--custom--navigation--submenu--color--hover-text);
 					background-color: var(--wp--custom--navigation--submenu--color--hover-background);
@@ -49,5 +43,81 @@
 			}
 		}
 	}
+}
+
+@include media(mobile) {
+	header .wp-block-navigation {
+		.wp-block-navigation__mobile-menu-open-button,
+		.wp-block-navigation__mobile-menu-close-button {
+			display:none;
+		}
+	}
+}
+
+@include media(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);
+			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);
+			}
+		}
+	}
 }