Skatepark: simplify nav (#5190)

* Skatepark: simplify nav

* Add a block gap between the logo and other branding

* align the mobile menu to the botton

* Simplify skatepark's header to just use the Blockbase one

* refactor the social navigation code to make it eassier to pinpoint errors

* Skatepark: simplify nav

* Add a block gap between the logo and other branding

* align the mobile menu to the botton

* Simplify skatepark's header to just use the Blockbase one

* Remove header css

* update skatepark to have a wide header

blockbase/block-template-parts/header-wide.html

@@ -0,0 +1,27 @@
+<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
+<div class="wp-block-group gapless-group">
+	<!-- wp:group {"align":"wide","className":"site-header","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--custom--gap--vertical)","top":"var(--wp--custom--gap--vertical)"}}}} -->
+	<div class="wp-block-group site-header alignwide" style="padding-bottom:var(--wp--custom--gap--vertical);padding-top:var(--wp--custom--gap--vertical)">
+
+		<!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
+		<div class="wp-block-group site-brand">
+			<!-- wp:site-logo {"width":64} /-->
+
+			<!-- wp:group -->
+			<div class="wp-block-group">
+				<!-- wp:site-title /-->
+				<!-- wp:site-tagline /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:template-part {"slug":"header-spacer"} /-->
+
+	</div>
+	<!-- /wp:group -->

blockbase/inc/social-navigation.php

@@ -21,6 +21,15 @@ function blockbase_condition_to_render_social_menu( $block_content, $block ) {
 	return true;
 }
 
+function blockbase_theme_has_navigation_social_links_settings( $theme_data ) {
+	return $theme_data
+		&& array_key_exists( 'settings', $theme_data )
+		&& array_key_exists( 'custom', $theme_data['settings'] )
+		&& array_key_exists( 'navigation/social-links', $theme_data['settings']['custom'] )
+		&& array_key_exists( 'color', $theme_data['settings']['custom']['navigation/social-links'] )
+		&& array_key_exists( 'text', $theme_data['settings']['custom']['navigation/social-links']['color'] );
+}
+
 function get_social_menu_as_social_links_block( $block ) {
 	if ( empty( $block['attrs']['__unstableSocialLinks'] ) ) {
 		return false;
@@ -38,7 +47,8 @@ function get_social_menu_as_social_links_block( $block ) {
 	$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
 	$social_links_icon_color_value = "var(--wp--custom--color--primary)";
 	$social_links_icon_color = 'primary';
-	if ( array_key_exists( 'settings', $theme_data ) && array_key_exists( 'custom', $theme_data['settings'] ) && array_key_exists( 'navigation/social-links', $theme_data['settings']['custom'] ) && array_key_exists( 'color', $theme_data['settings']['custom']['navigation/social-links'] ) && array_key_exists( 'text', $theme_data['settings']['custom']['navigation/social-links']['color'] ) ) {
+
+	if ( blockbase_theme_has_navigation_social_links_settings( $theme_data ) ) {
 		$social_links_icon_color_value = $theme_data['settings']['custom']['navigation/social-links']['color']['text'];
 		$social_links_icon_color = preg_replace( '/var\(--wp--custom--color--(.+)\)/', '$0 --> $2 $1', $social_links_icon_color_value );
 	}

skatepark/assets/theme.css

@@ -494,123 +494,6 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	mask-image: url(svg/post-tag.svg);
 }
 
-.wp-site-blocks .site-header-ollie {
-	max-width: var(--wp--custom--layout--wide-size);
-	margin: 0 auto;
-	width: 100%;
-	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
-	gap: 0;
-	justify-content: space-between;
-	align-items: flex-start;
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header-ollie {
-		grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical));
-		display: grid;
-		grid-template-areas: "brand menu" "social social";
-		border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
-	}
-}
-
-.wp-site-blocks .site-header-ollie > * {
-	flex-grow: 1;
-}
-
-.wp-site-blocks .site-header-ollie > * > * {
-	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
-	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header-ollie > * > * {
-		margin-top: calc( 0.125 * var(--wp--custom--gap--vertical));
-		margin-bottom: calc( 0.125 * var(--wp--custom--gap--vertical));
-	}
-}
-
-.wp-site-blocks .site-header-ollie .wp-block-social-links {
-	margin: 0;
-}
-
-.wp-site-blocks .site-header-ollie .wp-block-social-links.is-style-logos-only > .wp-social-link {
-	padding: 0;
-}
-
-.wp-site-blocks .site-header-ollie .wp-block-social-links.is-style-logos-only > .wp-social-link:last-child a {
-	padding-right: 0;
-}
-
-.wp-site-blocks .site-header-ollie .site-brand {
-	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
-	display: grid;
-	grid-template-areas: "logo title" "logo tagline";
-	grid-template-columns: auto 1fr;
-}
-
-@media (min-width: 600px) {
-	.wp-site-blocks .site-header-ollie .site-brand {
-		grid-template-rows: 35px auto;
-	}
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header-ollie .site-brand {
-		grid-template-areas: "logo" "title" "tagline";
-		grid-area: brand;
-	}
-}
-
-.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-logo {
-	grid-area: logo;
-	margin: 0 var(--wp--custom--gap--horizontal) 0 0;
-	max-width: 120px;
-	align-self: center;
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-logo {
-		margin-bottom: calc( 0.75 * var(--wp--custom--gap--vertical));
-	}
-}
-
-.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-title {
-	grid-area: title;
-	margin: 0 0 0.5em;
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-title {
-		margin: 0 0 0.25em;
-	}
-}
-
-.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-tagline {
-	grid-area: tagline;
-	margin: 0;
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header-ollie .site-brand .wp-block-site-tagline {
-		margin-bottom: calc( 0.25 * var(--wp--custom--gap--vertical));
-	}
-}
-
-@media (max-width: 599px) {
-	.nav-links {
-		display: contents;
-	}
-	.nav-links .wp-block-navigation__responsive-container-open {
-		margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) - 3px);
-	}
-	.nav-links .wp-block-navigation {
-		grid-area: menu;
-	}
-	.nav-links .wp-block-social-links {
-		justify-content: flex-start;
-	}
-}
-
 .archive .wp-block-post-excerpt__excerpt,
 .blog .wp-block-post-excerpt__excerpt,
 .home .wp-block-post-excerpt__excerpt {

skatepark/block-template-parts/header-ollie.html

@@ -1,16 +0,0 @@
-<!-- wp:group {"className":"site-header-ollie","layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group site-header-ollie">
-<!-- wp:group {"className":"site-brand"} -->
-<div class="wp-block-group site-brand">
-<!-- wp:site-logo /-->
-<!-- wp:site-title /-->
-<!-- wp:site-tagline {"fontSize":"small","style":{"typography":{"fontWeight":"500"}}} /--></div>
-<!-- /wp:group -->
-
-<!-- wp:group {"className":"nav-links"} -->
-<div class="wp-block-group nav-links">
-	<!-- wp:navigation {"__unstableLocation":"primary","__unstableSocialLinks":"social","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"},"spacing":{"blockGap":"40px"}}} /-->
-</div>
-<!-- /wp:group -->
-</div>
-<!-- /wp:group -->

skatepark/block-templates/404.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
 
 <!-- wp:spacer {"height":170} -->
 <div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>

skatepark/block-templates/archive.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"4em","bottom":"2.5em"}}},"layout":{"inherit":true}} -->
 <main class="wp-block-group" style="padding-top:4em;padding-bottom:2.5em">

skatepark/block-templates/index.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"4em","bottom":"2.5em"}}},"layout":{"inherit":true}} -->
 <main class="wp-block-group" style="padding-top:4em;padding-bottom:2.5em">

skatepark/block-templates/page.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"4em"}}}} -->
 <div class="wp-block-group" style="padding-top:4em"><!-- wp:post-title {"level":1,"align":"wide"} /--></div>

skatepark/block-templates/search.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true}, "tagName":"main"} -->
 <main class="wp-block-group">

skatepark/block-templates/single.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header-ollie","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header-wide","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"4em"}}}} -->
 <div class="wp-block-group" style="padding-top:4em"><!-- wp:post-title {"level":1,"align":"wide"} /--></div>

skatepark/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "skatepark",
-  "version": "1.0.16",
+  "version": "1.0.25",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

skatepark/sass/templates/_header.scss

@@ -1,103 +0,0 @@
-.wp-site-blocks .site-header-ollie {
-
-	max-width: var(--wp--custom--layout--wide-size); // Layouts can be flex OR flow/default (inherit), not both. So we need to mimick the wide width alignment supplied by Gutenberg here.
-	margin: 0 auto;
-	width: 100%;
-	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
-	gap: 0;
-	justify-content: space-between; // Apply a cluster (flex?) layout
-	align-items: flex-start;
-
-	@include break-small-only(){
-		grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical) );
-		display: grid;
-		grid-template-areas:
-			"brand menu"
-			"social social";
-		border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
-	}
-	> * {
-		flex-grow: 1; // Needed to maintain alignment when the containers stack
-		> * { // Apply a stack layout (page 69 of the every-layout.dev PDF)
-			margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
-			margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
-			@include break-small-only(){
-				margin-top: calc( 0.125 * var(--wp--custom--gap--vertical) );
-				margin-bottom: calc( 0.125 * var(--wp--custom--gap--vertical) );
-			}
-		}
-	}
-
-	.wp-block-social-links {
-		margin: 0;
-
-		&.is-style-logos-only {
-			> .wp-social-link {
-				padding: 0; // Needed to override Gutenberg default padding on this block style variation
-
-				&:last-child a {
-					padding-right: 0;
-				}
-			}
-		}
-	}
-
-	.site-brand {
-		margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
-		display: grid;
-		grid-template-areas:
-			"logo title"
-			"logo tagline";
-		grid-template-columns: auto 1fr;
-
-		@include break-small(){
-			grid-template-rows: 35px auto;
-		}
-
-		@include break-small-only(){
-			grid-template-areas:
-				"logo"
-				"title"
-				"tagline";
-			grid-area: brand;
-		}
-		.wp-block-site-logo {
-			grid-area: logo;
-			margin: 0 var(--wp--custom--gap--horizontal) 0 0;
-			max-width: 120px;
-			align-self: center;
-			@include break-small-only(){
-				margin-bottom: calc( 0.75 * var(--wp--custom--gap--vertical) );
-			}
-		}
-		.wp-block-site-title {
-			grid-area: title;
-			margin: 0 0 0.5em;
-			@include break-small-only(){
-				margin: 0 0 0.25em;
-			}
-		}
-		.wp-block-site-tagline {
-			grid-area: tagline;
-			margin: 0;
-			@include break-small-only(){
-				margin-bottom: calc( 0.25 * var(--wp--custom--gap--vertical) );
-			}
-		}
-	}
-}
-
-@include break-small-only(){
-	.nav-links {
-		display: contents;
-		.wp-block-navigation__responsive-container-open {
-			margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) - 3px );
-		}
-		.wp-block-navigation {
-			grid-area: menu;
-		}
-		.wp-block-social-links {
-			justify-content: flex-start;
-		}
-	}
-}

skatepark/sass/theme.scss

@@ -23,5 +23,4 @@
 @import "elements/headings";
 @import "elements/links";
 @import "elements/post-meta";
-@import "templates/header";
 @import "templates/index";

skatepark/theme.json

@@ -287,6 +287,16 @@
 					"duotone": "var(--wp--preset--duotone--default-filter)"
 				}
 			},
+			"core/navigation": {
+				"typography": {
+					"letterSpacing": "0.05em",
+					"fontWeight": "900",
+					"textTransform": "uppercase"
+				},
+				"spacing": {
+					"blockGap": "var(--wp--custom--gap--horizontal)"
+				}
+			},
 			"core/post-author": {
 				"filter": {
 					"duotone": "var(--wp--preset--duotone--default-filter)"
@@ -341,11 +351,6 @@
 					"letterSpacing": "0.05em",
 					"textTransform": "uppercase"
 				}
-			},
-			"core/navigation": {
-				"typography": {
-					"letterSpacing": "0.05em"
-				}
 			}
 		},
 		"elements": {