Videomaker: Add navigation styles (#4680)

* Videomaker: Add navigation styles

* Update font families

* Add colors to the submenus

* Make the navigation horizontal again

videomaker/assets/theme.css

@@ -47,4 +47,13 @@ a:active {
 	color: var(--wp--custom--color--background);
 }
 
+.is-vertical.items-justified-right ul.wp-block-navigation__container {
+	align-items: flex-end;
+}
+
+.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
+	background-color: var(--wp--custom--color--background);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+}
+
 /*# sourceMappingURL=theme.css.map */

videomaker/block-template-parts/header.html

@@ -1,6 +1,6 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}},"className":"site-header","layout":{"type":"flex"}} -->
 <div class="wp-block-group site-header" style="padding-top:40px;padding-bottom:40px">
-	<!-- wp:site-title /-->
-	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
+	<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}}} /-->
+	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
 </div>
 <!-- /wp:group -->

videomaker/child-theme.json

@@ -101,7 +101,7 @@
 		"typography": {
 			"fontFamilies": [
 				{
-					"fontFamily": "\"Inter\", sans-serif",
+					"fontFamily": "\"Inter\", serif",
 					"slug": "inter",
 					"name": "Inter",
 					"google": "family=Inter:wght@100..900"
@@ -148,6 +148,11 @@
 	},
 	"styles": {
 		"blocks": {
+			"core/button": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			},
 			"core/post-date": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
@@ -160,9 +165,45 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--xxl)"
+					"fontSize": "var(--wp--preset--font-size--xxl)",
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			}
+		},
+		"elements": {
+			"h1": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			},
+			"h2": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			},
+			"h4": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			},
+			"h5": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
+				}
+			},
+			"h6": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--inter)"
 				}
 			}
+		},
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--inter)"
 		}
 	}
 }

videomaker/sass/_navigation.scss

@@ -0,0 +1,12 @@
+// 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;
+}
+
+// See https://github.com/WordPress/gutenberg/issues/34648
+.wp-block-navigation.is-responsive {
+	.has-child .wp-block-navigation-link__container {
+		background-color: var(--wp--custom--color--background);
+		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+	}
+}

videomaker/sass/theme.scss

@@ -1,2 +1,3 @@
 @import "../../blockbase/sass/blocks/_buttons-outline-style";
 @import "links";
+@import "navigation";

videomaker/theme.json

@@ -329,7 +329,7 @@
 			"customLineHeight": true,
 			"fontFamilies": [
 				{
-					"fontFamily": "\"Inter\", sans-serif",
+					"fontFamily": "\"Inter\", serif",
 					"slug": "inter",
 					"name": "Inter",
 					"google": "family=Inter:wght@100..900"
@@ -417,6 +417,14 @@
 					}
 				}
 			},
+			"core/group": {
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
+				}
+			},
 			"core/navigation": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)"
@@ -598,4 +606,4 @@
 			"fontSize": "var(--wp--preset--font-size--normal)"
 		}
 	}
-}
+}