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

Quadrat: block styles for query block

quadrat/inc/block-patterns.php

@@ -18,13 +18,14 @@ function 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 @@ function 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;
+	}
 }