WDSBT-23 - Adjust related posts pattern and styles

Author: khleomix

assets/scss/patterns/_index.scss

@@ -1,2 +1,3 @@
 // 'patterns/' houses styles for custom patterns.
 // @import './pattern-name';
+@import './related-posts';

assets/scss/patterns/related-posts.scss

@@ -0,0 +1,73 @@
+/** cards **/
+
+.related-posts-query {
+
+	.wp-block-post {
+		border-radius: 10px;
+		box-shadow: 0 8px 16px 0 rgba(48, 49, 51, 0.1), 0 0 1px 0 rgba(48, 49, 51, 0.05);
+
+		> *:not(.wp-block-post-featured-image):not(hr) {
+			padding: 0.5rem 1.875rem;
+		}
+
+		.wp-block-post-featured-image {
+			border-top-left-radius: 10px;
+		}
+
+		.wp-block-post-terms {
+			padding-bottom: 0;
+
+			a {
+				color: var(--wp--preset--color--grey-400);
+				padding-bottom: 0;
+				text-transform: none;
+
+				&:hover,
+				&:focus {
+					color: var(--wp--preset--color--primary-500);
+				}
+			}
+
+		}
+
+		.wp-block-post-title {
+			margin: 0;
+
+			a {
+				color: var(--wp--preset--color--black);
+				font-size: var(--wp--preset--font-size--l);
+				line-height: 1.3;
+
+				&:hover,
+				&:focus {
+					color: var(--wp--preset--color--primary-500);
+				}
+			}
+		}
+
+		hr {
+			border-top: 1px;
+			margin: 0;
+		}
+
+		.wp-block-post-excerpt {
+			color: var(--wp--preset--color--grey-500);
+			margin-top: 0;
+			padding: 0 0 1.25rem 0;
+		}
+
+		.wp-block-read-more {
+			color: var(--wp--preset--color--primary-500);
+			font-size: var(--wp--preset--font-size--xxs);
+			font-weight: 300;
+			margin-bottom: 0.75rem;
+			margin-top: 0.75rem;
+			text-decoration: underline;
+
+			&:hover,
+			&:focus {
+				color: var(--wp--preset--color--primary-300);
+			}
+		}
+	}
+}

inc/hooks/register-block-patterns.php

@@ -20,7 +20,7 @@ function register_custom_block_pattern() {
 				'templateTypes' => array( 'single-post' ),
 				'postTypes'     => array( '' ),
 				'description'   => _x( 'Related Posts query variation', 'Block pattern description', 'wdsbt' ),
-				'content'       => "<!-- wp:group {\"tagName\":\"aside\",\"metadata\":{\"name\":\"Recent Posts\"},\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|40\"},\"padding\":{\"bottom\":\"var:preset|spacing|50\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<aside class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)\"><!-- wp:query {\"queryId\":0,\"query\":{\"perPage\":10,\"pages\":0,\"offset\":0,\"postType\":\"post\",\"order\":\"desc\",\"orderBy\":\"date\",\"author\":\"\",\"search\":\"\",\"exclude\":[],\"sticky\":\"\",\"inherit\":true,\"taxQuery\":null,\"parents\":[]}} -->\n<div class=\"wp-block-query\"><!-- wp:post-template {\"className\":\"related-posts-query\",\"layout\":{\"type\":\"grid\",\"columnCount\":3}} -->\n<!-- wp:post-featured-image {\"isLink\":true} /-->\n\n<!-- wp:post-terms {\"term\":\"category\"} /-->\n\n<!-- wp:post-title {\"isLink\":true,\"fontSize\":\"small\"} /-->\n\n<!-- wp:read-more {\"content\":\"\"} /-->\n<!-- /wp:post-template --></div>\n<!-- /wp:query --></aside>\n<!-- /wp:group -->",
+				'content'       => "<!-- wp:group {\"className\":\"related-posts\",\"tagName\":\"aside\",\"metadata\":{\"name\":\"Recent Posts\"},\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|40\"},\"padding\":{\"bottom\":\"var:preset|spacing|50\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<aside class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)\"><!-- wp:query {\"queryId\":0,\"query\":{\"perPage\":10,\"pages\":0,\"offset\":0,\"postType\":\"post\",\"order\":\"desc\",\"orderBy\":\"date\",\"author\":\"\",\"search\":\"\",\"exclude\":[],\"sticky\":\"\",\"inherit\":true,\"taxQuery\":null,\"parents\":[]}} -->\n<div class=\"wp-block-query\"><!-- wp:post-template {\"className\":\"related-posts-query is-style-shadow-light\",\"layout\":{\"type\":\"grid\",\"columnCount\":3}} -->\n<!-- wp:post-featured-image {\"aspectRatio\":\"16/9\",\"isLink\":true} /-->\n\n<!-- wp:group {\"className\":\"query-content\",\"layout\":{\"type\":\"constrained\"}} -->\n\n<!-- wp:post-terms {\"term\":\"category\"} /-->\n\n<!-- wp:post-title {\"isLink\":true,\"fontSize\":\"small\"} /-->\n\n<!-- wp:post-excerpt {\"excerptLength\":20} /-->\n\n<hr /><!-- wp:read-more {} /-->\n<!-- /wp:post-template --></div>\n<!-- /wp:query --></aside>\n<!-- /wp:group -->",
 			)
 		);
 }