Merge pull request #3828 from Automattic/fix-cover-block-hover

Quadrat: cover block pattern hover bug

quadrat/assets/theme.css

@@ -70,6 +70,7 @@
 	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 {

quadrat/inc/patterns/cover-with-heading.php

@@ -8,8 +8,8 @@
 return array(
 	'title'      => __( 'Cover block with heading', 'quadrat' ),
 	'categories' => array( 'quadrat' ),
-	'content'    => '<!-- wp:cover {"overlayColor":"darker-blue","minHeight":700,"align":"wide","className":"is-style-quadrat-cover-diamond"} -->
-	<div class="wp-block-cover alignwide has-darker-blue-background-color has-background-dim is-style-quadrat-cover-diamond" style="min-height:700px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","textColor":"pink"} -->
+	'content'    => '<!-- wp:cover {"overlayColor":"blue","minHeight":700,"align":"wide","className":"is-style-quadrat-cover-diamond"} -->
+	<div class="wp-block-cover alignwide has-blue-background-color has-background-dim is-style-quadrat-cover-diamond" style="min-height:700px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","textColor":"pink"} -->
 	<h2 class="has-text-align-center has-pink-color has-text-color">' . esc_html__( 'Episode 3: A Cycle of Emotions', 'quadrat' ) . '</h2>
 	<!-- /wp:heading --></div></div>
 	<!-- /wp:cover -->',

quadrat/sass/blocks/_cover.scss

@@ -12,6 +12,7 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
+		z-index: 0 !important; 
 	}
 
 	&.has-white-background-color,