Dalston: Fix Hover Reveal Cover Block Style to work with gradients.

dalston/block-extends/extend-cover-block.css

@@ -1,3 +1,92 @@
+/**
+ * Editor
+ */
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):before {
+	opacity: 0;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before {
+	opacity: .1;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before {
+	opacity: .2;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before {
+	opacity: .3;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before {
+	opacity: .4;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-50:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:not(.has-background-gradient):hover:before {
+	opacity: .5;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before {
+	opacity: .6;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before {
+	opacity: .7;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before {
+	opacity: .8;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before {
+	opacity: .9;
+}
+
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
+#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before {
+	opacity: 1;
+}
+
+/**
+ * Front End
+ */
+
 /* Inner Container */
 
 .wp-block-cover.is-style-hover-reveal:not(.has-parallax) {
@@ -24,54 +113,68 @@
 
 /* Dim */
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim:not(.has-background-gradient):before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient .wp-block-cover__gradient-background {
 	opacity: 0;
 	-webkit-transition: opacity 0.2s ease-in-out;
 	-moz-transition: opacity 0.2s ease-in-out;
 	transition: opacity 0.2s ease-in-out;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: 0;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .1;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .2;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .3;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .4;
 }
 
 .wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before,
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient:hover .wp-block-cover__gradient-background,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .5;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .6;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .7;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .8;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: .9;
 }
 
-.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before {
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before,
+.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100.has-background-gradient:hover .wp-block-cover__gradient-background {
 	opacity: 1;
 }