Blockbase: Add post-meta template part (#4565)

* Blockbase: add post-meta template part

* Blockbase: add post-tag icon

* Blockbase: remove tags from post meta

* Blockbase: add post tags to post meta

* Blockbase: add post tag SVG from Seedlet

* Blockbase: remove separator from post meta

* Blockbase: add spacer above post comments block

* Seedlet Blocks: add post tags to post meta

* Blockbase: enable blockGap & set gap size for all children

* Blockbase children: sync up child-theme.json files

They were all using --wp--custom--margin--vertical instead of --wp--custom--gap--vertical

* Blockbase children: change gap size to GB default of 0.5em

* Blockbase & co: use gap baseline across BB & all children

* Blockbase: add row-gap value to post-meta

* Skatepark: remove gap value

This is now applied via theme.json (as the same value)

* Blockbase: add comment next to use of !important

* Blockbase: add link to GB issue around block gaps

blockbase/assets/ponyfill.css

@@ -828,6 +828,10 @@ p.has-background {
 	margin-bottom: unset;
 }
 
+.post-meta {
+	row-gap: var(--wp--custom--gap--baseline) !important;
+}
+
 .post-meta .wp-block-post-author,
 .post-meta .wp-block-post-date,
 .post-meta .taxonomy-post_tag,

blockbase/assets/svg/post-tag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12.2045C3 12.5941 3.15158 12.9684 3.42267 13.2482L9.71878 19.747C11.0769 21.1489 13.3201 21.1667 14.7003 19.7865L19.7873 14.6995C21.1677 13.319 21.1497 11.0753 19.7471 9.71731L13.2459 3.42238C12.9661 3.15147 12.5919 3 12.2025 3H4.5C3.67157 3 3 3.67157 3 4.5V12.2045ZM12.2025 4.5H4.5V12.2045L10.7961 18.7033C11.5714 19.5035 12.8518 19.5137 13.6396 18.7258L18.7266 13.6388C19.5146 12.8509 19.5043 11.5701 18.7037 10.7949L12.2025 4.5ZM8.4975 9.495C9.0484 9.495 9.495 9.0484 9.495 8.4975C9.495 7.9466 9.0484 7.5 8.4975 7.5C7.9466 7.5 7.5 7.9466 7.5 8.4975C7.5 9.0484 7.9466 9.495 8.4975 9.495Z" fill="currentColor"/></svg>

blockbase/block-template-parts/post-meta.html

@@ -0,0 +1,8 @@
+<!-- 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} /-->
+    <!-- wp:post-terms {"term":"category","fontSize":"tiny"} /-->
+    <!-- wp:post-terms {"term": "post_tag", "fontSize":"tiny"} /-->
+</div>
+<!-- /wp:group -->

blockbase/block-templates/singular.html

@@ -11,11 +11,18 @@
 <!-- wp:post-featured-image {"align":"full"} /-->
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group"><!-- wp:post-comments /--></div>
+<div class="wp-block-group">
+    <!-- wp:spacer {"height":60} -->
+    <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+    <!-- wp:post-comments /-->
+</div>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/sass/post/_meta.scss

@@ -1,4 +1,7 @@
 .post-meta {
+	// We're setting row-gap here as currently, we can't specify separate vertical and horizontal block gaps.
+	// Tracking in Gutenberg here: https://github.com/WordPress/gutenberg/issues/34529
+	row-gap: var(--wp--custom--gap--baseline) !important; // !important is needed to override the unique .wp-container-ID classes
 	.wp-block-post-author,
 	.wp-block-post-date,
 	.taxonomy-post_tag,

blockbase/theme.json

@@ -311,6 +311,7 @@
 			"wideSize": "1000px"
 		},
 		"spacing": {
+			"blockGap": true,
 			"customPadding": true,
 			"units": [
 				"%",
@@ -571,7 +572,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--gap--vertical)"
+			"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

geologist/theme.json

@@ -335,6 +335,7 @@
 			"wideSize": "1128px"
 		},
 		"spacing": {
+			"blockGap": true,
 			"customPadding": true,
 			"units": [
 				"%",
@@ -641,7 +642,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--gap--vertical)"
+			"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

mayland-blocks/theme.json

@@ -323,6 +323,7 @@
 			"wideSize": "1000px"
 		},
 		"spacing": {
+			"blockGap": true,
 			"customPadding": true,
 			"units": [
 				"%",
@@ -593,7 +594,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--gap--vertical)"
+			"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

quadrat/theme.json

@@ -361,6 +361,7 @@
 			"wideSize": "1128px"
 		},
 		"spacing": {
+			"blockGap": true,
 			"customPadding": true,
 			"units": [
 				"%",
@@ -667,7 +668,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--gap--vertical)"
+			"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

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

@@ -7,5 +7,7 @@
 
 <!-- wp:post-date {"fontSize":"tiny","isLink":true} /-->
 
-<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /--></div>
+<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /-->
+
+<!-- wp:post-terms {"term": "post_tag", "fontSize":"tiny"} /--></div>
 <!-- /wp:group -->

seedlet-blocks/theme.json

@@ -352,6 +352,7 @@
 			"wideSize": "790px"
 		},
 		"spacing": {
+			"blockGap": true,
 			"customPadding": true,
 			"units": [
 				"%",
@@ -627,7 +628,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--gap--vertical)"
+			"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

skatepark/assets/theme.css

@@ -442,7 +442,6 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 .post-meta.wp-block-group {
 	flex-direction: column;
 	align-items: start;
-	gap: .5em;
 }
 
 .post-meta .wp-block-post-date,

skatepark/child-theme.json

@@ -379,6 +379,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "0.5em"
+		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
 			"fontWeight": "400"

skatepark/sass/elements/_post-meta.scss

@@ -2,7 +2,6 @@
 	&.wp-block-group {
 		flex-direction: column;
 		align-items: start;
-		gap: .5em;
 	}
 
 	.wp-block-post-date,

skatepark/theme.json

@@ -360,6 +360,7 @@
 			"wideSize": "1194px"
 		},
 		"spacing": {
+			"blockGap": true,
 			"customPadding": true,
 			"units": [
 				"%",
@@ -652,7 +653,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--gap--vertical)"
+			"blockGap": "0.5em"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",