Update all navigation blocks to new markup (#5038)

* Update all vertical nav blocks to new markup

* Update Videomaker header nav

* Update Arbutus header nav

* Update Blockbase header nav

* Update Geologist nav blocks

* Update Kerr nav block

* Update Mayland Blocks nav blocks

* Update Payton nav block

* Update Quadrat nav block

* Update Russell nav block

* Update Seedlet Blocks nav block

* Update Skatepark header nav block

* Update Videomaker pattern nav blocks

* Update Zoologist nav block

* Fix Blockbase menu

* Add missing setCascadingProperties prop

* Reset top margin on header navigation

arbutus/block-template-parts/header.html

@@ -5,5 +5,5 @@
 
 <!-- wp:site-tagline {"fontSize":"small","fontFamily":"open-sans"} /-->
 
-<!-- wp:navigation {"itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","className":"is-style-blockbase-navigation-improved-responsive"} /--></div>
+<!-- wp:navigation {"__unstableLocation":"primary","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /--></div>
 <!-- /wp:group -->

blockbase/assets/ponyfill.css

@@ -151,6 +151,7 @@ pre {
 
 .wp-site-blocks .site-header .wp-block-navigation {
 	flex-grow: 1;
+	margin-top: 0;
 }
 
 @media (max-width: 599px) {

blockbase/block-template-parts/header.html

@@ -9,6 +9,6 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </div>
 <!-- /wp:group -->

blockbase/sass/base/_header.scss

@@ -5,6 +5,7 @@
 
 	.wp-block-navigation {
 		flex-grow: 1;
+		margin-top: 0;
 	}
 	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
 	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY

geologist/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->

geologist/inc/patterns/header-with-rounded-site-logo.php

@@ -13,7 +13,7 @@ return array(
 <header class="wp-block-group site-header" style="padding-bottom:90px">
 	<!-- wp:site-logo {"className":"is-style-rounded"} /-->
 	<!-- wp:site-title /-->
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->',
 );

kerr/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->

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

@@ -8,15 +8,14 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"verticalAlignment":"center"} -->
-<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small"} -->
-<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Services","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Portfolio","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
-<!-- /wp:navigation --></div>
+<div class="wp-block-column is-vertically-aligned-center">
+    <!-- wp:navigation {"textColor":"foreground-light","overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"fontSize":"small"} -->
+        <!-- wp:navigation-link {"label":"Home","url":"#"} /-->
+        <!-- wp:navigation-link {"label":"Services","url":"#"} /-->
+        <!-- wp:navigation-link {"label":"Portfolio","url":"#"} /-->
+        <!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+    <!-- /wp:navigation -->
+</div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 

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

@@ -9,6 +9,6 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </div>
 <!-- /wp:group -->

payton/block-template-parts/header.html

@@ -1,7 +1,6 @@
 <!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"10px"}}},"className":"site-header"} -->
 <header class="wp-block-group site-header" style="padding-top:10px">
-	<!-- wp:navigation {"itemsJustification":"center","overlayMenu":"mobile","__unstableLocation":"primary","style":{"typography":{"fontFamily":"var:preset|font-family|overpass"}},"fontSize":"small"} -->
-	<!-- /wp:navigation -->
+	<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"},"fontSize":"small","fontFamily":"overpass"} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"6vh","bottom":"6vh"}}}} -->
 	<div class="wp-block-group" style="padding-top:6vh;padding-bottom:6vh">

quadrat/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->

russell/block-template-parts/header.html

@@ -9,6 +9,6 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </div>
 <!-- /wp:group -->

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

@@ -8,7 +8,7 @@
 
 <!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
 
-<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"center","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->
 
 <!-- wp:spacer {"height":60} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

skatepark/block-template-parts/header.html

@@ -9,7 +9,7 @@
 
 <!-- wp:group {"className":"nav-links"} -->
 <div class="wp-block-group nav-links">
-	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","orientation":"horizontal","itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"},"spacing":{"blockGap":"40px"}},"__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"},"spacing":{"blockGap":"40px"}}} /-->
 </div>
 <!-- /wp:group -->
 </div>

skatepark/inc/patterns/pre-footer.php

@@ -31,7 +31,7 @@ return array(
 		<h3 style="font-size:14px;"><strong>' . esc_html__( 'More info', 'skatepark' ) . '</strong></h3>
 		<!-- /wp:heading -->
 
-		<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary","style":{"typography":{"textDecoration":"underline"}},"fontSize":"small"} /--></div>
+		<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"style":{"typography":{"textDecoration":"underline"}},"fontSize":"small"} /--></div>
 		<!-- /wp:column -->
 
 		<!-- wp:column -->

videomaker/block-template-parts/footer.html

@@ -1,8 +1,8 @@
-<!-- wp:group {"align":"wide","layout":{"type":"flex"},"style":{"spacing":{"padding":{"top":"170px","bottom":"var(--wp--custom--gap--horizontal"}}}} -->
-<div class="wp-block-group alignwide" style="padding-top: 170px;padding-bottom: var(--wp--custom--gap--horizontal);">
+<!-- wp:group {"align":"full","layout":{"type":"flex"},"style":{"spacing":{"padding":{"top":"170px","right":"var(--wp--custom--gap--horizontal)","bottom":"var(--wp--custom--gap--horizontal)","left":"var(--wp--custom--gap--horizontal)"}}}} -->
+<div class="wp-block-group alignfull" style="padding-top: 170px; padding-right: var(--wp--custom--gap--horizontal);padding-bottom: var(--wp--custom--gap--horizontal);padding-left: var(--wp--custom--gap--horizontal);">
 	<!-- wp:group -->
 	<div class="wp-block-group">
-	<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"footer","style":{"typography":{"textTransform":"uppercase"},"spacing":{"blockGap":"0px"}}} /-->
+		<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"footer","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"style":{"typography":{"textTransform":"uppercase"},"spacing":{"blockGap":"0px"}}} /-->
 	</div>
 	<!-- /wp:group -->
 	<!-- wp:group {"className":"footer-credit"} -->

videomaker/block-template-parts/header.html

@@ -7,6 +7,6 @@
 		<!-- wp:site-tagline /-->
 	</div>
 	<!-- /wp:group -->
-	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","overlayMenu":"always","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"overlayMenu":"always","__unstableLocation":"primary","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->

videomaker/inc/patterns/background-video.php

@@ -17,7 +17,7 @@ return array(
 
 	<!-- wp:column {"verticalAlignment":"center"} -->
 	<div class="wp-block-column is-vertically-aligned-center">
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"typography":{"textTransform":"uppercase"}}} /-->
 	</div>
 	<!-- /wp:column --></div>
 	<!-- /wp:columns -->

videomaker/inc/patterns/footer.php

@@ -11,7 +11,7 @@ return array(
 	'content'    => '<!-- wp:columns {"align":"wide"} -->
 	<div class="wp-block-columns alignwide"><!-- wp:column -->
 	<div class="wp-block-column">
-	<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"footer","style":{"typography":{"lineHeight":"1"}}} /-->
+	<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"footer","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"style":{"typography":{"lineHeight":"1"}}} /-->
 	</div>
 	<!-- /wp:column -->
 

videomaker/inc/patterns/full-width-homepage.php

@@ -15,7 +15,7 @@ return array(
 	<!-- /wp:column -->
 
 	<!-- wp:column {"verticalAlignment":"center"} -->
-	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /--></div>
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
 	<!-- /wp:column --></div>
 	<!-- /wp:columns -->
 

videomaker/inc/patterns/header-description-and-grid-of-projects.php

@@ -19,7 +19,7 @@ return array(
 		<h3 style="font-weight:300">' . esc_html__( 'Jonah is Creative Director of Hano, a production studio that specializes in combining storytelling with visual design.', 'videomaker' ) . '</h3>
 		<!-- /wp:heading -->
 
-		<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
+		<!-- wp:navigation {"overlayMenu":"never","__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"},"style":{"typography":{"textTransform":"uppercase"}}} /-->
 
 		</div>
 		<!-- /wp:column -->

zoologist/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:navigation {"itemsJustification":"right","overlayMenu":"mobile","__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->