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/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/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)",