Refactored to target mobile navigation styles exclusively for navigat…

…ion blocks in the header.
Automattic · Mar 16, 2021 · bd33898 · bd33898
1 parent b4b1fe0
commit bd33898
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/blank-canvas-blocks/assets/navigation.js b/blank-canvas-blocks/assets/navigation.js
@@ -28,7 +28,7 @@
 	}
 
 	window.addEventListener( 'load', () => {
-		Array.from( document.querySelectorAll( '.wp-block-navigation.is___experimental-mobile' ) )
+		Array.from( document.querySelectorAll( 'header .wp-block-navigation' ) )
 			.forEach( addMobileMenuButton );
 	});
 

diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css
diff --git a/blank-canvas-blocks/block-template-parts/header.html b/blank-canvas-blocks/block-template-parts/header.html
@@ -0,0 +1,2 @@
+<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- /wp:navigation -->
diff --git a/blank-canvas-blocks/block-templates/index.html b/blank-canvas-blocks/block-templates/index.html
@@ -1,5 +1,4 @@
-<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
-<!-- /wp:navigation -->
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:query -->
 	<!-- wp:query-loop -->

diff --git a/blank-canvas-blocks/sass/blocks/_navigation.scss b/blank-canvas-blocks/sass/blocks/_navigation.scss
@@ -46,26 +46,26 @@
 }
 
 @include media(mobile) {
-	.wp-block-navigation.is___experimental-mobile {
+	header .wp-block-navigation {
 		.wp-block-navigation__mobile-menu-open-button {
 			display:none;
 		}
 	}
 }
 
 @include media(mobile-only) {
-	.wp-block-navigation.is___experimental-mobile:not(.show) {
+	header .wp-block-navigation:not(.show) {
 		.wp-block-navigation__container {
 			display: none;
 		}
 	}
-	.wp-block-navigation.is___experimental-mobile:not(.show) {
+	header .wp-block-navigation:not(.show) {
 		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);
 		text-align: right;
 	}
-	.wp-block-navigation.is___experimental-mobile.show {
+	header .wp-block-navigation.show {
 		opacity: 1;
 		position:absolute;
 		top: 0;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
		<!-- /wp:navigation -->