Revert back to the is-dark-theme

WordPress · Sep 17, 2021 · 3c46f07 · 3c46f07
1 parent fe9e994
commit 3c46f07
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 38 deletions.
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -212,56 +212,44 @@ 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.
- * @param {?Function} setAttributes Function to set attributes on the block.
+ *
+ * @return {boolean} True if the cover background is considered "dark" and false otherwise.
  */
-function useCoverIsDark(
-	url,
-	dimRatio = 50,
-	overlayColor = '#000000',
-	elementRef,
-	setAttributes
-) {
+function useCoverIsDark( url, dimRatio = 50, overlayColor, elementRef ) {
+	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 ) => {
-					setAttributes( {
-						isDark: color.isDark,
-					} );
+					setIsDark( color.isDark );
 				}
 			);
 		}
-	}, [ url, url && dimRatio <= 50 && elementRef.current, setAttributes ] );
+	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
 	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 )
-				setAttributes( {
-					isDark: true,
-				} );
+				setIsDark( true );
 				return;
 			}
-			setAttributes( {
-				isDark: tinycolor( overlayColor ).isDark(),
-			} );
+			setIsDark( tinycolor( overlayColor ).isDark() );
 		}
-	}, [ overlayColor, dimRatio > 50 || ! url, setAttributes ] );
+	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
 	useEffect( () => {
 		if ( ! url && ! overlayColor ) {
 			// Reset isDark
-			setAttributes( {
-				isDark: false,
-			} );
+			setIsDark( false );
 		}
-	}, [ ! url && ! overlayColor, setAttributes ] );
+	}, [ ! url && ! overlayColor, setIsDark ] );
+	return isDark;
 }
 
 function mediaPosition( { x, y } ) {
@@ -329,13 +317,13 @@ function CoverEdit( {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		minHeight,
 		minHeightUnit,
 		style: styleAttribute,
 		url,
 		alt,
-		isDark,
 	} = attributes;
 	const {
 		gradientClass,
@@ -392,14 +380,17 @@ function CoverEdit( {
 	};
 
 	const isDarkElement = useRef();
-	useCoverIsDark(
+	const isCoverDark = useCoverIsDark(
 		url,
 		dimRatio,
 		overlayColor.color,
-		isDarkElement,
-		setAttributes
+		isDarkElement
 	);
 
+	useEffect( () => {
+		setAttributes( { isDark: isCoverDark } );
+	}, [ isCoverDark ] );
+
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
@@ -660,6 +651,7 @@ function CoverEdit( {
 	const classes = classnames(
 		dimRatioToClass( dimRatio ),
 		{
+			'is-dark-theme': isDark,
 			'is-light': ! isDark,
 			'has-background-dim': dimRatio !== 0,
 			'is-transient': isUploadingMedia,

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -35,14 +35,14 @@ export default function save( { attributes } ) {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		overlayColor,
 		url,
 		alt,
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
-		isDark,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -70,8 +70,8 @@ export default function save( { attributes } ) {
 	const objectPosition =
 		// prettier-ignore
 		focalPoint && isImgElement
-			? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
-			: undefined;
+			 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+			 : undefined;
 
 	const classes = classnames(
 		dimRatioToClass( dimRatio ),

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -18,12 +18,12 @@
 		// Mobile Safari does not support fixed background attachment properly.
 		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
 		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-		@supports (-webkit-overflow-scrolling: touch) {
+		@supports ( -webkit-overflow-scrolling: touch ) {
 			background-attachment: scroll;
 		}
 
 		// Remove the appearance of scrolling based on OS-level animation preferences.
-		@media (prefers-reduced-motion: reduce) {
+		@media ( prefers-reduced-motion: reduce ) {
 			background-attachment: scroll;
 		}
 	}
@@ -63,7 +63,6 @@
 		opacity: 0.5;
 	}
 
-
 	@for $i from 1 through 10 {
 		&.has-background-dim.has-background-dim-#{ $i * 10 } {
 			&:not(.has-background-gradient)::before,
@@ -102,10 +101,9 @@
 	}
 
 	.wp-block-cover__inner-container {
-		color: $white;
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-
+		color: $white;
 	}
 
 	&.is-light {
@@ -218,8 +216,7 @@ section.wp-block-cover-image h2,
 	}
 }
 
-.wp-block-cover-image
-.wp-block-cover {
+.wp-block-cover-image .wp-block-cover {
 	&.has-left-content {
 		justify-content: flex-start;
 	}