Merge pull request #4737 from Automattic/try-quadrat-dynamic-pattern

Quadrat: created new query block pattern

quadrat/assets/theme.css

@@ -41,6 +41,59 @@
 	text-align: right;
 }
 
+.horizontal-query-pattern .wp-block-post-title a,
+.vertical-query-pattern .wp-block-post-title a {
+	text-decoration: none;
+}
+
+.vertical-query-pattern .wp-block-cover {
+	margin-top: 0;
+}
+
+.vertical-query-pattern img {
+	aspect-ratio: 16 / 9;
+	-o-object-fit: cover;
+	   object-fit: cover;
+}
+
+div.horizontal-query-pattern {
+	gap: 0;
+}
+
+@media (min-width: 600px) {
+	div.horizontal-query-pattern {
+		flex-wrap: nowrap;
+	}
+}
+
+div.horizontal-query-pattern .wp-block-cover,
+div.horizontal-query-pattern figure.wp-block-post-featured-image {
+	margin-top: 0;
+}
+
+div.horizontal-query-pattern figure.wp-block-post-featured-image {
+	align-self: stretch;
+}
+
+@media (min-width: 600px) {
+	div.horizontal-query-pattern figure.wp-block-post-featured-image {
+		width: 57%;
+	}
+}
+
+div.horizontal-query-pattern figure.wp-block-post-featured-image img {
+	aspect-ratio: 1.12;
+	-o-object-fit: cover;
+	   object-fit: cover;
+	height: 100%;
+}
+
+@media (min-width: 600px) {
+	div.horizontal-query-pattern figure.wp-block-post-featured-image img {
+		min-height: 360px;
+	}
+}
+
 .wp-block-cover.is-style-quadrat-cover-diamond::after {
 	background-image: url(rotated.svg);
 	background-position: center;

quadrat/inc/block-patterns.php

@@ -23,6 +23,7 @@ if ( ! function_exists( 'quadrat_register_block_patterns' ) ) :
 				'headline-button',
 				'headlines-and-buttons',
 				'query-diamond',
+				'query-episodes',
 				'latest-episodes',
 				'listen-to-the-podcast',
 				'media-text-button',

quadrat/inc/patterns/query-episodes.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Latest three episodes.
+ *
+ * @package Quadrat
+ */
+
+return array(
+	'title'      => __( 'Latest three episodes', 'quadrat' ),
+	'categories' => array( 'quadrat' ),
+	'blockTypes' => array( 'core/query' ),
+	'content'    => '<!-- wp:query {"query":{"perPage":"2","pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":2},"align":"wide"} -->
+	<div class="wp-block-query alignwide"><!-- wp:post-template -->
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"className":"vertical-query-pattern","layout":{"inherit":false}} -->
+	<div class="wp-block-group vertical-query-pattern" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-featured-image {"className":"image-no-margin mb-0"} /-->
+
+	<!-- wp:cover {"overlayColor":"tertiary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
+	<div class="wp-block-cover has-tertiary-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:post-title {"isLink":true,"linkTarget":"_blank","textColor":"primary"} /-->
+
+	<!-- wp:post-excerpt {"textColor":"primary","fontSize":"small"} /--></div></div>
+	<!-- /wp:cover --></div>
+	<!-- /wp:group -->
+	<!-- /wp:post-template --></div>
+	<!-- /wp:query -->
+	<!-- wp:query {"query":{"perPage":"1","pages":0,"offset":"2","postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide"} -->
+	<div class="wp-block-query alignwide"><!-- wp:post-template -->
+
+	<!-- wp:group {"className":"horizontal-query-pattern","layout":{"type":"flex"}} -->
+	<div class="wp-block-group horizontal-query-pattern">
+
+	<!-- wp:post-featured-image {"className":"image-no-margin mb-0"} /-->
+
+	<!-- wp:cover {"className":"horizontal-query-pattern","overlayColor":"tertiary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"30px","left":"40px"}}}} -->
+	<div class="wp-block-cover has-tertiary-background-color has-background-dim mt-0 horizontal-query-pattern" style="padding-top:30px;padding-right:40px;padding-bottom:30px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container">
+	<!-- wp:post-title {"isLink":true,"linkTarget":"_blank","textColor":"primary"} /-->
+	<!-- wp:post-excerpt {"textColor":"primary","fontSize":"small"} /--></div></div>
+	<!-- /wp:cover -->
+
+	</div>
+	<!-- /wp:group -->
+
+	<!-- /wp:post-template --></div>
+	<!-- /wp:query -->',
+);

quadrat/sass/block-patterns/_query.scss

@@ -0,0 +1,47 @@
+.horizontal-query-pattern,
+.vertical-query-pattern {
+	.wp-block-post-title a {
+		text-decoration: none;
+	}
+}
+
+.vertical-query-pattern {
+	.wp-block-cover {
+		margin-top: 0;
+	}
+	img {
+		aspect-ratio: 16 / 9;
+		object-fit: cover;
+	}
+}
+
+div.horizontal-query-pattern {
+	gap: 0;
+
+	@include break-small() {
+		flex-wrap: nowrap;
+	}
+
+	.wp-block-cover,
+	figure.wp-block-post-featured-image {
+		margin-top: 0;
+	}
+
+	figure.wp-block-post-featured-image {
+		align-self: stretch;
+		@include break-small() {
+			width: 57%; // I'm not sure why this number works but it does seem to!
+		}
+
+
+		img {
+			aspect-ratio: 1.12;
+			object-fit: cover;
+			height: 100%;
+
+			@include break-small() {
+				min-height: 360px;
+			}
+		}
+	}
+}

quadrat/sass/theme.scss

@@ -2,6 +2,7 @@
 @import "../../blockbase/sass/base/mixins";
 @import "block-patterns/headlines";
 @import "block-patterns/join";
+@import "block-patterns/query";
 @import "block-styles/cover";
 @import "block-styles/query";
 @import "../../blockbase/sass/blocks/_buttons-outline-style";