Videomaker: Navigation styles (#4876)

* Videomaker: center nav items

* Videomaker: remove uppercase from nav block

* Videomaker: center social links

* Videomaker: add current-menu-item styles

* Videomaker: add underline to parent menu item

* Videomaker: increase nav spacing

* Videomaker: tweak spacing again

* Videomaker: style current menu item

* Videomaker: fix submenu centering

* Videomaker: make all pattern navs uppercase

* Blockbase: Remove ! important rules from navigation CSS

* Always show submenu items

* Remove another ! important

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blockbase/assets/ponyfill.css

@@ -476,26 +476,26 @@ ol {
 }
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open {
-	font-size: var(--wp--preset--font-size--medium) !important;
+	font-size: var(--wp--preset--font-size--medium);
 }
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__container {
-	row-gap: 0.5rem !important;
-	align-items: flex-start !important;
+	row-gap: 0.5rem;
+	align-items: flex-start;
 	flex: unset;
 	padding-bottom: 0;
 }
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation-item {
-	align-items: flex-start !important;
+	align-items: flex-start;
 }
 
-.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__submenu-container {
-	font-size: var(--wp--preset--font-size--normal) !important;
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
+	font-size: var(--wp--preset--font-size--normal);
 	padding-bottom: 0;
-	padding-left: var(--wp--custom--gap--horizontal) !important;
+	padding-left: var(--wp--custom--gap--horizontal);
 	padding-top: 0.5rem;
-	row-gap: 0.5rem !important;
+	row-gap: 0.5rem;
 }
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open ul.wp-block-social-links {

blockbase/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","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </div>
 <!-- /wp:group -->

blockbase/sass/blocks/_navigation.scss

@@ -19,23 +19,28 @@
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
 	&.is-responsive .is-menu-open {
-		font-size: var(--wp--preset--font-size--medium) !important;
+		font-size: var(--wp--preset--font-size--medium);
+
 		.wp-block-navigation__container {
-			row-gap: 0.5rem !important;
-			align-items: flex-start !important;
+			row-gap: 0.5rem;
+			align-items: flex-start;
 			flex: unset;
 			padding-bottom: 0;
 		}
+
 		.wp-block-navigation-item {
-			align-items: flex-start !important;
+			align-items: flex-start;
 		}
-		.wp-block-navigation__submenu-container {
-			font-size: var(--wp--preset--font-size--normal) !important;
-			padding-bottom: 0;
-			padding-left: var(--wp--custom--gap--horizontal) !important;
-			padding-top: 0.5rem;
-			row-gap: 0.5rem !important;
+		.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
+			.wp-block-navigation__submenu-container {
+				font-size: var(--wp--preset--font-size--normal);
+				padding-bottom: 0;
+				padding-left: var(--wp--custom--gap--horizontal);
+				padding-top: 0.5rem;
+				row-gap: 0.5rem;
+			}
 		}
+
 		ul.wp-block-social-links {
 			justify-content: flex-start;
 		}

videomaker/assets/theme.css

@@ -64,6 +64,34 @@ div.post-meta a {
 	align-items: flex-end;
 }
 
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container {
+	align-items: center;
+	row-gap: 1rem;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
+	align-items: center;
+	row-gap: 0.8rem;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item.current-menu-item > a {
+	text-decoration: underline;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
+	justify-content: space-between;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container ul.wp-block-social-links {
+	justify-content: center;
+	padding-bottom: calc( var(--wp--custom--gap--vertical) * 2);
+}
+
 footer > .wp-block-group {
 	align-items: center;
 	justify-content: space-between;

videomaker/child-theme.json

@@ -155,11 +155,6 @@
 					"fontFamily": "var(--wp--preset--font-family--inter)"
 				}
 			},
-			"core/navigation": {
-				"typography": {
-					"textTransform": "uppercase"
-				}
-			},
 			"core/navigation-link": {
 				"color": {
 					"background": "transparent",

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"} /-->
+	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
 	</div>
 	<!-- /wp:column --></div>
 	<!-- /wp:columns -->

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"} /--></div>
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","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"} /-->
+		<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
 
 		</div>
 		<!-- /wp:column -->

videomaker/sass/_navigation.scss

@@ -1,4 +1,38 @@
 // Needed until this is merged: https://github.com/WordPress/gutenberg/issues/35040
 .is-vertical.items-justified-right ul.wp-block-navigation__container {
 	align-items: flex-end;
-}
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
+	&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
+		.wp-block-navigation__container {
+			align-items: center;
+			row-gap: 1rem;
+		}
+
+		.wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
+			.wp-block-navigation-item {
+				align-items: center;
+				row-gap: 0.8rem;
+
+				&.current-menu-item > a {
+					text-decoration: underline;
+				}
+
+				&.has-child {
+					.wp-block-navigation__submenu-container {
+						padding-left: 0;
+						padding-right: 0;
+					}
+				}
+			}
+		}
+		.wp-block-navigation__responsive-container-content {
+			justify-content: space-between;
+		}
+		ul.wp-block-social-links {
+			justify-content: center;
+			padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
+		}
+	}
+}

videomaker/theme.json

@@ -411,8 +411,7 @@
 			},
 			"core/navigation": {
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)",
-					"textTransform": "uppercase"
+					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
 			},
 			"core/post-title": {