Merge pull request #4171 from Automattic/quadrat-query-block-styles

Quadrat: block styles for query block

quadrat/assets/theme.css

@@ -41,6 +41,135 @@
 	text-align: right;
 }
 
+.wp-block-cover.is-style-quadrat-cover-diamond::after {
+	background-image: url(rotated.svg);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: auto 70%;
+	content: "";
+	mix-blend-mode: soft-light;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 0 !important;
+}
+
+.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
+	opacity: 0;
+}
+
+.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
+	mix-blend-mode: normal;
+	-webkit-mask-image: url(rotated.svg);
+	        mask-image: url(rotated.svg);
+	-webkit-mask-repeat: no-repeat;
+	        mask-repeat: no-repeat;
+	-webkit-mask-size: auto 70%;
+	        mask-size: auto 70%;
+	-webkit-mask-position: center;
+	        mask-position: center;
+	opacity: 0.25;
+}
+
+.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after {
+	background: #000;
+}
+
+.wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
+	background: #fff;
+}
+
+.is-style-quadrat-diamond-posts .post-meta {
+	justify-content: flex-start;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-query-pagination a,
+.is-style-quadrat-diamond-posts .post-meta a {
+	text-decoration: none;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-query-pagination a:hover,
+.is-style-quadrat-diamond-posts .post-meta a:hover {
+	text-decoration: underline;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-column {
+	flex-basis: auto;
+}
+
+@media (min-width: 600px) {
+	.is-style-quadrat-diamond-posts .wp-block-column:last-child {
+		max-width: 300px;
+		flex-shrink: 0;
+	}
+	.is-style-quadrat-diamond-posts .wp-block-column:first-child {
+		padding-right: 2em;
+	}
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-featured-image {
+	width: 300px;
+}
+
+@media (max-width: 599px) {
+	.is-style-quadrat-diamond-posts .wp-block-post-featured-image {
+		width: 100%;
+	}
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-featured-image img {
+	-o-object-fit: cover;
+	   object-fit: cover;
+	width: 100%;
+	height: 300px;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li {
+	display: flex;
+	align-items: center;
+	min-height: 400px;
+	position: relative;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li > * {
+	flex-basis: 100%;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:before {
+	content: "";
+	background: var(--wp--preset--color--secondary);
+	width: 375px;
+	height: 375px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+	opacity: 0;
+	transition: all 0.4s ease-in;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:hover:before {
+	opacity: 1;
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):before {
+	transform: rotate(16deg) translate(-130px, -20px);
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):hover:before {
+	transform: rotate(-8deg) translate(-110px, 0);
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):before {
+	transform: rotate(24deg) translate(-130px, 20px);
+}
+
+.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):hover:before {
+	transform: rotate(16deg) translate(-110px, 40px);
+}
+
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -109,46 +238,6 @@
 	border-color: var(--wp--custom--color--secondary);
 }
 
-.wp-block-cover.is-style-quadrat-cover-diamond::after {
-	background-image: url(rotated.svg);
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: auto 70%;
-	content: "";
-	mix-blend-mode: soft-light;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	z-index: 0 !important;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
-	opacity: 0;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
-	mix-blend-mode: normal;
-	-webkit-mask-image: url(rotated.svg);
-	        mask-image: url(rotated.svg);
-	-webkit-mask-repeat: no-repeat;
-	        mask-repeat: no-repeat;
-	-webkit-mask-size: auto 70%;
-	        mask-size: auto 70%;
-	-webkit-mask-position: center;
-	        mask-position: center;
-	opacity: 0.25;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after {
-	background: #000;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
-	background: #fff;
-}
-
 ul ul {
 	list-style-type: disc;
 }
@@ -399,10 +488,16 @@ ul ul {
 	margin-left: 20%;
 }
 
-.wp-block-query-loop .wp-block-post-title {
+.wp-block-query-loop .wp-block-post-title,
+.wp-block-query .wp-block-post-title {
 	font-size: var(--wp--custom--heading--h3--font-size);
 }
 
+.wp-block-query-loop .wp-block-post-excerpt__more-text,
+.wp-block-query .wp-block-post-excerpt__more-text {
+	font-size: var(--wp--preset--font-size--tiny) !important;
+}
+
 .wp-block-query-pagination {
 	border-top: 1px solid var(--wp--custom--color--primary);
 }
@@ -630,6 +725,11 @@ textarea:focus {
 	margin: 0 8px;
 }
 
+.post-meta > *::before,
+.post-meta .wp-block-post-date::before {
+	content: "";
+}
+
 .post-meta .wp-block-post-terms {
 	margin-left: 0;
 	color: transparent;
@@ -645,6 +745,10 @@ textarea:focus {
 	color: var(--wp--custom--color--foreground);
 }
 
+.post-meta .wp-block-post-terms a:not(:last-child):after {
+	content: ",";
+}
+
 .wp-block-query .wp-block-post-featured-image {
 	margin-top: calc( var(--wp--custom--margin--vertical) / 2);
 }

quadrat/inc/block-patterns.php

@@ -18,13 +18,14 @@ if ( ! function_exists( 'quadrat_register_block_patterns' ) ) :
 
 		if ( function_exists( 'register_block_pattern' ) ) {
 			$block_patterns = array(
-				'headline-button',
-				'media-text-button',
-				'latest-episodes',
-				'episode',
 				'cover-with-heading',
+				'episode',
+				'headline-button',
 				'headlines-and-buttons',
+				'query-diamond',
+				'latest-episodes',
 				'listen-to-the-podcast',
+				'media-text-button',
 			);
 
 			if ( class_exists( 'WP_Block_Type_Registry' ) && \WP_Block_Type_Registry::get_instance()->is_registered( 'jetpack/subscriptions' ) ) {

quadrat/inc/block-styles.php

@@ -23,6 +23,15 @@ if ( ! function_exists( 'quadrat_register_block_styles' ) ) :
 					'style_handle' => 'quadrat-cover-diamond',
 				)
 			);
+
+			register_block_style(
+				'core/query',
+				array(
+					'name'         => 'quadrat-diamond-posts',
+					'label'        => __( 'Diamond Posts', 'quadrat' ),
+					'style_handle' => 'quadrat-diamond-posts',
+				)
+			);
 		}
 	}
 endif;

quadrat/inc/patterns/query-diamond.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Blog posts with hover effect.
+ *
+ * @package Quadrat
+ */
+
+return array(
+	'title'      => __( 'List of blog posts', 'quadrat' ),
+	'categories' => array( 'quadrat' ),
+	'blockTypes' => array( 'core/query' ),
+	'content'    => '<!-- wp:query {"query":{"perPage":4,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":3},"align":"wide","className":"is-style-quadrat-diamond-posts"} -->
+	<div class="wp-block-query alignwide is-style-quadrat-diamond-posts"><!-- wp:post-template -->
+	<!-- wp:columns -->
+	<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center"} -->
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"post-meta"} -->
+	<div class="wp-block-group post-meta"><!-- wp:post-date {"fontSize":"tiny"} /-->
+	
+	<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /--></div>
+	<!-- /wp:group -->
+	
+	<!-- wp:post-title {"textAlign":"left","isLink":true,"fontSize":"extra-large"} /-->
+	
+	<!-- wp:post-excerpt {"moreText":"Read more","fontSize":"normal"} /--></div>
+	<!-- /wp:column -->
+	
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:post-featured-image /--></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+	<!-- /wp:post-template -->
+	
+	<!-- wp:query-pagination -->
+	<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
+	
+	<!-- wp:query-pagination-numbers /-->
+	
+	<!-- wp:query-pagination-next {"label":"Next Page"} /--></div>
+	<!-- /wp:query-pagination --></div>
+	<!-- /wp:query -->',
+);

quadrat/sass/block-styles/_query.scss

@@ -0,0 +1,75 @@
+.is-style-quadrat-diamond-posts {
+	.post-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-query-pagination,
+	.post-meta {
+		a {
+			text-decoration: none;
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	} 
+	.wp-block-column {
+		flex-basis: auto;
+		@media (min-width: #{ $break-small }) {
+			&:last-child {
+				max-width: 300px;
+				flex-shrink: 0;
+			}
+			&:first-child {
+				padding-right: 2em;
+			}
+		}
+	}
+	.wp-block-post-featured-image {
+		width: 300px;
+		@media (max-width: #{ ($break-small - 1) }) {
+			width: 100%;
+		}
+		img {
+			object-fit: cover;
+			width: 100%;
+			height: 300px;
+		}
+	}
+	.wp-block-post-template {
+		li {
+			display: flex;
+			align-items: center;
+			min-height: 400px;
+			position: relative;
+			& > * {
+				flex-basis: 100%;
+			}
+			&:before {
+				content: "";
+				background: var(--wp--preset--color--secondary);
+				width: 375px;
+				height: 375px;
+				position: absolute;
+				top: 0;
+				left: 0;
+				z-index: -1;
+				opacity:0;
+				transition: all 0.4s ease-in; 
+			}
+			&:hover:before {
+				opacity:1;
+			}
+			&:nth-child(2n+1):before {
+				transform: rotate(16deg) translate(-130px, -20px);
+			}
+			&:nth-child(2n+1):hover:before {
+				transform: rotate(-8deg) translate(-110px, 0);
+			}
+			&:nth-child(2n+2):before {
+				transform: rotate(24deg) translate(-130px, 20px);
+			}
+			&:nth-child(2n+2):hover:before {
+				transform: rotate(16deg) translate(-110px, 40px);
+			}
+		}
+	}
+}

quadrat/sass/blocks/_query.scss

@@ -1,5 +1,11 @@
-.wp-block-query-loop {
+.wp-block-query-loop,
+.wp-block-query {
 	.wp-block-post-title {
 		font-size: var(--wp--custom--heading--h3--font-size);
 	}
+
+	// Important is necessary to override any other font size rules applied to the exerpt.
+	.wp-block-post-excerpt__more-text {
+		font-size: var(--wp--preset--font-size--tiny) !important;
+	}
 }

quadrat/sass/templates/_meta.scss

@@ -13,6 +13,9 @@
 	> *,
 	.wp-block-post-date {
 		margin: 0 8px;
+		&::before {
+			content: "";
+		}
 	}
 
 	.wp-block-post-terms {
@@ -27,6 +30,10 @@
 		color: transparent;
 		a {
 			color: var(--wp--custom--color--foreground);
+			&:not(:last-child):after {
+				// to be removed after https://github.com/WordPress/gutenberg/pull/32812 lands
+				content: ",";
+			}
 		}
 	}
 }

quadrat/sass/theme.scss

@@ -2,9 +2,10 @@
 @import "../../blockbase/sass/base/mixins";
 @import "block-patterns/headlines";
 @import "block-patterns/join";
+@import "block-styles/cover";
+@import "block-styles/query";
 @import "blocks/buttons";
 @import "blocks/calendar";
-@import "blocks/cover";
 @import "blocks/list";
 @import "blocks/media-text";
 @import "blocks/navigation";