Videomaker: Fix category trailing slash (#4889)

* Videomaker: fix category trailing slash

Co-authored-by: @danieldudzic

* Videomaker: simplify post meta styles

* Fix RTL styles

* Use gap variable for padding values

* Use the block-gap variable and add a fallback

Co-authored-by: Ben Dwyer <ben@scruffian.com>

videomaker/assets/theme.css

@@ -48,13 +48,20 @@ a:active {
 }
 
 div.post-meta {
-	gap: 1ch;
+	gap: 0;
 }
 
 div.post-meta a {
 	text-decoration: none;
 }
 
+div.post-meta > *:not(:first-child):before {
+	color: var(--wp--custom--color--foreground);
+	content: "/";
+	margin-left: var(--wp--custom--gap--baseline);
+	margin-right: var(--wp--custom--gap--baseline);
+}
+
 .is-vertical.items-justified-right ul.wp-block-navigation__container {
 	align-items: flex-end;
 }
@@ -88,14 +95,14 @@ footer > .wp-block-group p {
 	margin-bottom: 0;
 }
 
-.taxonomy-post_tag.wp-block-post-terms a {
+.post-tags-container .taxonomy-post_tag.wp-block-post-terms a {
 	background: var(--wp--custom--color--tertiary);
 	border-radius: 20px;
 	font-weight: 600;
 	padding: 10px 20px;
 }
 
-.taxonomy-post_tag.wp-block-post-terms .wp-block-post-terms__separator {
+.post-tags-container .taxonomy-post_tag.wp-block-post-terms .wp-block-post-terms__separator {
 	visibility: hidden;
 }
 

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

@@ -1,10 +1,12 @@
-<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
-<div class="wp-block-group post-meta">
+<!-- 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)"}}}} -->
+<div class="wp-block-group post-meta" style="padding-top:var(--wp--style--block-gap,1em);padding-bottom:var(--wp--style--block-gap,1em)">
     <!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-    <!-- wp:paragraph -->
-	<p>/</p>
-	<!-- /wp:paragraph -->
     <!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
 </div>
 <!-- /wp:group -->
-<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+
+<!-- wp:group {"className":"post-tags-container"} -->
+<div class="wp-block-group post-tags-container">
+    <!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+</div>
+<!-- /wp:group -->

videomaker/sass/_meta.scss

@@ -1,7 +1,16 @@
 div.post-meta {
-	gap: 1ch;
+	gap: 0;
 
 	a {
 		text-decoration: none;
 	}
+
+	> * {
+		&:not(:first-child):before {
+			color: var(--wp--custom--color--foreground);
+			content: "/";
+			margin-left: var(--wp--custom--gap--baseline);
+			margin-right: var(--wp--custom--gap--baseline);
+		}
+	}
 }

videomaker/sass/blocks/_post-terms.scss

@@ -1,12 +1,14 @@
-.taxonomy-post_tag.wp-block-post-terms {
-	a {
-		background: var(--wp--custom--color--tertiary);
-		border-radius: 20px;
-		font-weight: 600;
-		padding: 10px 20px;
-	}
+.post-tags-container {
+	.taxonomy-post_tag.wp-block-post-terms {
+		a {
+			background: var(--wp--custom--color--tertiary);
+			border-radius: 20px;
+			font-weight: 600;
+			padding: 10px 20px;
+		}
 
-	.wp-block-post-terms__separator {
-		visibility: hidden;
+		.wp-block-post-terms__separator {
+			visibility: hidden;
+		}
 	}
-}
+}