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
WordPress · Oct 19, 2020 · c5ea5a5 · c5ea5a5
1 parent 91514a5
commit c5ea5a5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git 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
@@ -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;
 			}