From c5ea5a5f38d5808d5fee04a1196f65650b49cadc Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 19 Oct 2020 14:07:50 -0700
Subject: [PATCH] Cover block: improve overlay opacity handling (#26133)

* hide overlay opacity control if there is no overlay color or gradient

* remove default black background color of has-background-dim class

* combine selectors for overlay opacity

* make overlay opacity range step congruent with available styles
---
 packages/block-library/src/cover/edit.js    |  4 +++-
 packages/block-library/src/cover/style.scss | 14 ++++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 1329d7c93bd6f..f81c04382debf 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -314,6 +314,7 @@ function CoverEdit( {
 		}
 	}
 
+	const canDim = !! url && ( overlayColor.color || gradientValue );
 	const hasBackground = !! ( url || overlayColor.color || gradientValue );
 	const showFocalPointPicker =
 		isVideoBackground ||
@@ -425,7 +426,7 @@ function CoverEdit( {
 								},
 							] }
 						>
-							{ !! url && (
+							{ canDim && (
 								<RangeControl
 									label={ __( 'Opacity' ) }
 									value={ dimRatio }
@@ -436,6 +437,7 @@ function CoverEdit( {
 									}
 									min={ 0 }
 									max={ 100 }
+									step={ 10 }
 									required
 								/>
 							) }
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 9c37ecbd250c3..6d4030d5c918a 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -34,13 +34,9 @@
 		background-size: auto;
 	}
 
-	&.has-background-dim {
-		background-color: $black;
-
-		&::before {
-			content: "";
-			background-color: inherit;
-		}
+	&.has-background-dim::before {
+		content: "";
+		background-color: inherit;
 	}
 
 	&.has-background-dim:not(.has-background-gradient)::before,
@@ -57,9 +53,7 @@
 
 	@for $i from 1 through 10 {
 		&.has-background-dim.has-background-dim-#{ $i * 10 } {
-			&:not(.has-background-gradient)::before {
-				opacity: $i * 0.1;
-			}
+			&:not(.has-background-gradient)::before,
 			.wp-block-cover__gradient-background {
 				opacity: $i * 0.1;
 			}