Skatepark: Fix title spacing (#4624)

* Skatepark: replace image padding with spacer

* Skatepark: adjust featured image spacing

* Skatepark: tweak single spacer height

* Skatepark: apply spacing changes to page template

* Moved spacing from a spacer to margin-top

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

skatepark/assets/theme.css

@@ -177,12 +177,21 @@
 	text-decoration: none;
 }
 
+.wp-block-post-featured-image {
+	margin-bottom: 0;
+}
+
 h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 	border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
-	padding-bottom: calc( var(--wp--custom--gap--vertical) * 2);
+	padding-bottom: calc(var(--wp--custom--gap--vertical) * 3);
 	margin-bottom: 0;
 }
 
+.is-root-container,
+.wp-block-post-content {
+	margin-top: calc(var(--wp--custom--gap--vertical) * 3);
+}
+
 .wp-block-query-pagination .wp-block-query-pagination-numbers .current {
 	text-decoration-thickness: 0.07em;
 	text-underline-offset: 0.46ex;

skatepark/block-templates/page.html

@@ -7,8 +7,8 @@
 <!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"bottom":"5em"}}}} -->
 <main class="wp-block-group" style="padding-bottom:5em">
 
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"5em"}}}} -->
-<div class="wp-block-group" style="padding-bottom:5em">
+<!-- wp:group {"align":"full"} -->
+<div class="wp-block-group">
 <!-- wp:post-featured-image {"align":"full","style":{"color":{"duotone":["#000","#B9FB9C"]}}} /--></div>
 <!-- /wp:group -->
 

skatepark/block-templates/single.html

@@ -7,8 +7,8 @@
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"5em"}}}} -->
-<div class="wp-block-group alignfull" style="padding-bottom:5em">
+<!-- wp:group {"align":"full"} -->
+<div class="wp-block-group alignfull">
 <!-- wp:post-featured-image {"align":"full","style":{"color":{"duotone":["#000","#B9FB9C"]}}} /--></div>
 <!-- /wp:group -->
 

skatepark/sass/blocks/_post-content.scss

@@ -0,0 +1,4 @@
+.is-root-container,
+.wp-block-post-content {
+	margin-top: calc(var(--wp--custom--gap--vertical) * 3);
+}

skatepark/sass/blocks/_post-featured-image.scss

@@ -0,0 +1,3 @@
+.wp-block-post-featured-image {
+	margin-bottom: 0;
+}

skatepark/sass/blocks/_post-title.scss

@@ -1,5 +1,6 @@
 h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
-	border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
-	padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
+	border-bottom: var(--wp--custom--form--border--width)
+		var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+	padding-bottom: calc(var(--wp--custom--gap--vertical) * 3);
 	margin-bottom: 0;
-}
+}

skatepark/sass/theme.scss

@@ -8,7 +8,9 @@
 @import "blocks/cover";
 @import "blocks/navigation";
 @import "blocks/post-comments";
+@import "blocks/post-featured-image";
 @import "blocks/post-title";
+@import "blocks/post-content";
 @import "blocks/query";
 @import "blocks/search";
 @import "blocks/separator";