Blockbase: Update Blockbase and children to use flex (#4468)

* Blockbase: Update post meta to use flex
* move the blockGap config to styles
* Change the site header to use the new flex layout

Co-authored-by: Jason Crist <jcrist@pbking.com>

blockbase/assets/ponyfill.css

@@ -107,10 +107,7 @@ img {
 }
 
 .site-header {
-	align-items: center;
-	flex-wrap: wrap;
 	justify-content: space-between;
-	display: flex;
 	overflow: inherit;
 }
 
@@ -814,16 +811,11 @@ p.has-background {
 	margin-bottom: unset;
 }
 
-.post-meta {
-	display: flex;
-}
-
 .post-meta .wp-block-post-author,
 .post-meta .wp-block-post-date,
 .post-meta .taxonomy-post_tag,
 .post-meta .taxonomy-category {
 	display: flex;
-	margin-right: calc(2 * var(--wp--custom--margin--baseline));
 }
 
 .post-meta .wp-block-post-author:before,

blockbase/block-template-parts/header.html

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

blockbase/sass/base/_header.scss

@@ -1,9 +1,5 @@
-// This is needed until something like https://github.com/WordPress/gutenberg/issues/24473 exists
 .site-header {
-	align-items: center;
-	flex-wrap: wrap;
 	justify-content: space-between;
-	display: flex;
 	overflow: inherit;
 
 	.wp-block-site-title a {

blockbase/sass/base/_mixins.scss

@@ -15,7 +15,6 @@
 
 @mixin post-meta-icon {
 	display: flex;
-	margin-right: calc(2 * var(--wp--custom--margin--baseline) );
 	&:before {
 		align-self: center;
 		content: '';
@@ -29,4 +28,4 @@
 		-webkit-mask-repeat: no-repeat;
 		background-color: currentColor;
 	}
-}
+}

blockbase/sass/post/_meta.scss

@@ -1,7 +1,4 @@
 .post-meta {
-	// TODO - needed until https://github.com/WordPress/gutenberg/issues/24473
-	display: flex;
-
 	.wp-block-post-author,
 	.wp-block-post-date,
 	.taxonomy-post_tag,

blockbase/theme.json

@@ -563,6 +563,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "var(--wp--custom--margin--vertical)"
+		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
 			"fontFamily": "var(--wp--preset--font-family--system-font)",

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

@@ -1,8 +1,8 @@
-<!-- wp:group {"align":"full","className":"site-header"} -->
+<!-- wp:group {"align":"full","layout":{"type":"flex"},"className":"site-header"} -->
 <div class="wp-block-group alignfull site-header">
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
 <!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small","isResponsive":true,"__unstableLocation":"primary"} -->
 <!-- /wp:navigation -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

mayland-blocks/block-template-parts/post-meta.html

@@ -1,4 +1,4 @@
-<!-- wp:group {"textColor":"gray","className":"post-meta"} -->
+<!-- wp:group {"textColor":"gray","className":"post-meta","layout":{"type":"flex"}} -->
 <div class="post-meta wp-block-group post-meta has-gray-color has-text-color"><!-- wp:post-author {"showAvatar":false,"showBio":false,"fontSize":"small"} /-->
 
 <!-- wp:post-date {"fontSize":"small","isLink":true} /-->

mayland-blocks/theme.json

@@ -592,6 +592,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "var(--wp--custom--margin--vertical)"
+		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
 			"fontFamily": "var(--wp--preset--font-family--poppins)",

quadrat/assets/theme.css

@@ -647,18 +647,12 @@ textarea:focus {
 	display: none;
 }
 
-.post-meta > *,
-.post-meta .wp-block-post-date {
-	margin: 0 8px;
-}
-
 .post-meta > *::before,
 .post-meta .wp-block-post-date::before {
 	content: "";
 }
 
 .post-meta .wp-block-post-terms {
-	margin-left: 0;
 	color: transparent;
 }
 

quadrat/block-template-parts/header.html

@@ -1,8 +1,8 @@
-<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"bottom":"170px"}}},"className":"site-header"} -->
+<!-- wp:group {"tagName":"header","layout":{"type":"flex"},"style":{"spacing":{"padding":{"bottom":"170px"}}},"className":"site-header"} -->
 <header class="wp-block-group site-header" style="padding-bottom:170px">
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"20px"},"margin":{"right":"auto"}}},"fontSize":"tiny"} /-->
 	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
 </header>
-<!-- /wp:group -->
+<!-- /wp:group -->

quadrat/block-templates/single.html

@@ -3,7 +3,7 @@
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"className":"post-meta"} -->
+	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
 	<div class="wp-block-group post-meta">
 		<!-- wp:post-date {"textAlign":"center","fontSize":"tiny","isLink":true} /-->
 		<!-- wp:post-terms {"term":"category","textAlign":"center","fontSize":"tiny"} /-->

quadrat/inc/patterns/query-diamond.php

@@ -13,7 +13,7 @@ return array(
 	<div class="wp-block-query alignwide is-style-quadrat-diamond-posts"><!-- wp:post-template -->
 	<!-- wp:columns -->
 	<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center"} -->
-	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"post-meta"} -->
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
 	<div class="wp-block-group post-meta"><!-- wp:post-date {"fontSize":"tiny","isLink":true} /-->
 
 	<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /--></div>

quadrat/sass/templates/_meta.scss

@@ -12,14 +12,12 @@
 
 	> *,
 	.wp-block-post-date {
-		margin: 0 8px;
 		&::before {
 			content: "";
 		}
 	}
 
 	.wp-block-post-terms {
-		margin-left: 0;
 		&::before {
 			color: var(--wp--custom--color--foreground);
 			content: "·";

quadrat/theme.json

@@ -668,6 +668,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "var(--wp--custom--margin--vertical)"
+		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
 			"fontFamily": "var(--wp--preset--font-family--dm-sans)",

seedlet-blocks/block-template-parts/post-meta.html

@@ -2,7 +2,7 @@
 <hr class="wp-block-separator is-style-wide"/>
 <!-- /wp:separator -->
 
-<!-- wp:group {"className":"post-meta"} -->
+<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
 <div class="wp-block-group post-meta"><!-- wp:post-author {"showAvatar":false,"showBio":false,"fontSize":"tiny"} /-->
 
 <!-- wp:post-date {"fontSize":"tiny","isLink":true} /-->

seedlet-blocks/theme.json

@@ -626,6 +626,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "var(--wp--custom--margin--vertical)"
+		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
 			"fontFamily": "var(--wp--preset--font-family--fira-sans)",

skatepark/assets/theme.css

@@ -507,8 +507,10 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	text-decoration: none;
 }
 
-.post-meta {
+.post-meta.wp-block-group {
 	flex-direction: column;
+	align-items: start;
+	gap: .5em;
 }
 
 .post-meta .wp-block-post-date,

skatepark/block-templates/single.html

@@ -29,7 +29,7 @@
 	<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
 	<hr class="wp-block-separator is-style-wide"/>
 	<!-- /wp:separator -->
-	<!-- wp:group {"className":"post-meta"} -->
+	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
 	<div class="wp-block-group post-meta">
 	<!-- wp:post-date {"fontSize":"tiny","isLink":true} /-->
 	<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /-->

skatepark/sass/elements/_post-meta.scss

@@ -1,5 +1,9 @@
 .post-meta {
-	flex-direction: column;
+	&.wp-block-group {
+		flex-direction: column;
+		align-items: start;
+		gap: .5em;
+	}
 
 	.wp-block-post-date,
 	.taxonomy-category,

skatepark/theme.json

@@ -649,6 +649,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "var(--wp--custom--margin--vertical)"
+		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
 			"fontFamily": "var(--wp--preset--font-family--red-hat-display)",