block styles for query block

quadrat/assets/theme.css

@@ -41,6 +41,90 @@
 	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 .wp-block-column {
+	flex-basis: auto;
+}
+
+.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: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 +193,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;
 }

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/sass/block-styles/_query.scss

@@ -0,0 +1,40 @@
+.is-style-quadrat-diamond-posts {
+	.wp-block-column {
+		flex-basis: auto;
+	}
+	.wp-block-post-template {
+		li {
+			display: flex;
+			align-items: center;
+			min-height: 400px;
+			position: relative;
+			&: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/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";