Videomaker: Update Videomaker navigation (#5059)

* Videomaker: Update navigation width

* Update font sizes

* change the jusificiation to be center

* add social links to the navigation

* prevent the navigation wrapping

blockbase/sass/blocks/_navigation.scss

@@ -35,6 +35,7 @@
 		.wp-block-navigation-item {
 			align-items: flex-start;
 		}
+
 		.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);

videomaker/assets/theme.css

@@ -103,12 +103,19 @@ 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 {
+	font-size: var(--wp--preset--font-size--large);
+	font-weight: 200;
+}
+
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container {
 	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 {
 	align-items: flex-start;
+	margin: 0 auto;
+	max-width: 800px;
 }
 
 .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 {
@@ -124,13 +131,18 @@ div.post-meta a {
 }
 
 .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;
+	flex-wrap: nowrap;
+	justify-content: center;
 }
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container ul.wp-block-social-links {
 	padding-bottom: calc( var(--wp--custom--gap--vertical) * 2);
 }
 
+.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 .has-child .wp-block-navigation__submenu-container {
+	font-size: var(--wp--preset--font-size--medium);
+}
+
 footer > .wp-block-group {
 	align-items: center;
 	justify-content: space-between;

videomaker/block-template-parts/header.html

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

videomaker/sass/_navigation.scss

@@ -5,12 +5,17 @@
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
 	&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
+		font-size: var(--wp--preset--font-size--large);
+		font-weight: 200;
+
 		.wp-block-navigation__container {
 			row-gap: 1rem;
 		}
 
 		.wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
 			align-items: flex-start;
+			margin: 0 auto;
+			max-width: 800px; // This should match the content width
 
 			.wp-block-navigation-item {
 				row-gap: 0rem;
@@ -25,10 +30,17 @@
 			}
 		}
 		.wp-block-navigation__responsive-container-content {
-			justify-content: space-between;
+			flex-wrap: nowrap;
+			justify-content: center;
 		}
 		ul.wp-block-social-links {
 			padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
 		}
+
+		.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--medium);
+			}
+		}
 	}
 }