Videomaker: Fix vertical spacing in and around posts (#5068)

* Tidy up spacing on index page. * Tidy up spacing on pages.
Automattic · Nov 24, 2021 · c1f51c9 · c1f51c9
1 parent aeafef5
commit c1f51c9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/videomaker/block-templates/index.html b/videomaker/block-templates/index.html
@@ -12,7 +12,7 @@
 <!-- wp:group -->
 <div class="wp-block-group">
 	<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"bottom":"45px"}}}} /-->
-	<!-- wp:post-featured-image {"isLink":true} /-->
+	<!-- wp:post-featured-image {"isLink":"true","style":{"spacing":{"margin":{"top":"var(--wp--style--block-gap,1em)","bottom":"calc(2.5 * var(--wp--style--block-gap,1em))"}}}} /-->
 	<!-- wp:post-excerpt /-->
 
 	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"},"style":{"spacing":{"padding":{"top":"var(--wp--style--block-gap,1em)","bottom":"var(--wp--style--block-gap,1em)"}}}} -->
@@ -22,8 +22,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:spacer {"height":40} -->
-	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":60} -->
+	<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 </div>
 <!-- /wp:group -->

diff --git a/videomaker/block-templates/page.html b/videomaker/block-templates/page.html
@@ -16,12 +16,12 @@
 			<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
 		</div>
 		<!-- /wp:group -->
-		<!-- wp:group {"className":"post-tags-container"} -->
-		<div class="wp-block-group post-tags-container">
+		<!-- wp:group {"className":"post-tags-container","style":{"spacing":{"margin":{"top":"var(--wp--style--block-gap,1em)","bottom":"calc(2 * var(--wp--style--block-gap,1em))"}}}} -->
+		<div class="wp-block-group post-tags-container" style="margin-top:var(--wp--style--block-gap,1em);margin-bottom:calc(2 * var(--wp--style--block-gap,1em))">
 			<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
 		</div>
 		<!-- /wp:group -->
-		<!-- wp:post-featured-image {"align":"full"} /-->
+		<!-- wp:post-featured-image {"align":"full","style":{"spacing":{"margin":{"top":"var(--wp--style--block-gap,1em)","bottom":"calc(2 * var(--wp--style--block-gap,1em))"}}}} /-->
 	</div>
 	<!-- /wp:group -->
 

diff --git a/videomaker/block-templates/single.html b/videomaker/block-templates/single.html
@@ -16,9 +16,9 @@
 			<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
 		</div>
 		<!-- /wp:group -->
-		<!-- wp:post-featured-image {"align":"full"} /-->
-		<!-- wp:group {"className":"post-tags-container"} -->
-		<div class="wp-block-group post-tags-container">
+		<!-- wp:post-featured-image {"align":"full","style":{"spacing":{"margin":{"top":"var(--wp--style--block-gap,1em)","bottom":"calc(2 * var(--wp--style--block-gap,1em))"}}}} /-->
+		<!-- wp:group {"className":"post-tags-container","style":{"spacing":{"margin":{"top":"var(--wp--style--block-gap,1em)","bottom":"calc(2 * var(--wp--style--block-gap,1em))"}}}} -->
+		<div class="wp-block-group post-tags-container" style="margin-top:var(--wp--style--block-gap,1em);margin-bottom:calc(2 * var(--wp--style--block-gap,1em))">
 			<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
 		</div>
 		<!-- /wp:group -->