Add an 'is-light' class to the cover block when it's saved with a lig…

…ht background
WordPress · Aug 6, 2021 · fe659dc · fe659dc
1 parent 1cfe613
commit fe659dc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -51,6 +51,10 @@
 		},
 		"contentPosition": {
 			"type": "string"
+		},
+		"isDark": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -209,49 +209,56 @@ function ResizableCover( {
  *                               color are set, dimRatio is used to decide what is used
  *                               for background darkness checking purposes.
  * @param {?string} overlayColor String containing the overlay color value if one exists.
+ *                               The default is black to match the CSS.
  * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a
  *                               dom element that renders that media.
- *
- * @return {boolean} True if the cover background is considered "dark" and false otherwise.
+ * @param {?Function} setAttributes Function to set attributes on the block.
  */
 function useCoverIsDark(
 	url,
 	dimRatio = 50,
 	overlayColor = '#000000',
-	elementRef
+	elementRef,
+	setAttributes
 ) {
-	const [ isDark, setIsDark ] = useState( false );
 	useEffect( () => {
 		// If opacity is lower than 50 the dominant color is the image or video color,
 		// so use that color for the dark mode computation.
 		if ( url && dimRatio <= 50 && elementRef.current ) {
 			retrieveFastAverageColor().getColorAsync(
 				elementRef.current,
 				( color ) => {
-					setIsDark( color.isDark );
+					setAttributes( {
+						isDark: color.isDark,
+					} );
 				}
 			);
 		}
-	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
+	}, [ url, url && dimRatio <= 50 && elementRef.current, setAttributes ] );
 	useEffect( () => {
 		// If opacity is greater than 50 the dominant color is the overlay color,
 		// so use that color for the dark mode computation.
 		if ( dimRatio > 50 || ! url ) {
 			if ( ! overlayColor ) {
 				// If no overlay color exists the overlay color is black (isDark )
-				setIsDark( true );
+				setAttributes( {
+					isDark: true,
+				} );
 				return;
 			}
-			setIsDark( tinycolor( overlayColor ).isDark() );
+			setAttributes( {
+				isDark: tinycolor( overlayColor ).isDark(),
+			} );
 		}
-	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
+	}, [ overlayColor, dimRatio > 50 || ! url, setAttributes ] );
 	useEffect( () => {
 		if ( ! url && ! overlayColor ) {
 			// Reset isDark
-			setIsDark( false );
+			setAttributes( {
+				isDark: false,
+			} );
 		}
-	}, [ ! url && ! overlayColor, setIsDark ] );
-	return isDark;
+	}, [ ! url && ! overlayColor, setAttributes ] );
 }
 
 function mediaPosition( { x, y } ) {
@@ -324,6 +331,7 @@ function CoverEdit( {
 		minHeightUnit,
 		style: styleAttribute,
 		url,
+		isDark,
 	} = attributes;
 	const {
 		gradientClass,
@@ -380,11 +388,12 @@ function CoverEdit( {
 	};
 
 	const isDarkElement = useRef();
-	const isDark = useCoverIsDark(
+	useCoverIsDark(
 		url,
 		dimRatio,
 		overlayColor.color,
-		isDarkElement
+		isDarkElement,
+		setAttributes
 	);
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
@@ -609,7 +618,7 @@ function CoverEdit( {
 	const classes = classnames(
 		dimRatioToClass( dimRatio ),
 		{
-			'is-dark-theme': isDark,
+			'is-light': ! isDark,
 			'has-background-dim': dimRatio !== 0,
 			'is-transient': isUploadingMedia,
 			'has-parallax': hasParallax,

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -41,6 +41,7 @@ export default function save( { attributes } ) {
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		isDark,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -75,6 +76,7 @@ export default function save( { attributes } ) {
 		dimRatioToClass( dimRatio ),
 		overlayColorClass,
 		{
+			'is-light': ! isDark,
 			'has-background-dim': dimRatio !== 0,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -102,14 +102,15 @@
 	}
 
 	.wp-block-cover__inner-container {
+		color: $white;
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
 
 	}
 
-	&.is-dark-theme {
+	&.is-light {
 		.wp-block-cover__inner-container {
-			color: $white;
+			color: $black;
 		}
 	}