From 31283eaf92e67cffa26be01a7429a117d8c09c69 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 19 Jul 2021 11:46:43 +0100
Subject: [PATCH 01/13] Cover block: Adjust the color of the text based on the
 background

---
 packages/block-library/src/cover/edit.js    | 2 +-
 packages/block-library/src/cover/style.scss | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 500cdd37838a82..094a122eb7d8e3 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -217,7 +217,7 @@ function ResizableCover( {
  *
  * @return {boolean} True if the cover background is considered "dark" and false otherwise.
  */
-function useCoverIsDark( url, dimRatio = 50, overlayColor, elementRef ) {
+function useCoverIsDark( url, dimRatio = 50, overlayColor = '#000000', elementRef ) {
 	const [ isDark, setIsDark ] = useState( false );
 	useEffect( () => {
 		// If opacity is lower than 50 the dominant color is the image or video color,
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 43155f41d9ebf6..80e258c13259f9 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -104,7 +104,13 @@
 	.wp-block-cover__inner-container {
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-		color: $white;
+
+	}
+
+	&.is-dark-theme {
+		.wp-block-cover__inner-container {
+			color: $white;
+		}
 	}
 
 	p,

From 88a3fb6cdeb351d492cdd5b14613f3258e624abb Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 19 Jul 2021 11:52:03 +0100
Subject: [PATCH 02/13] formatting change

---
 packages/block-library/src/cover/edit.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 094a122eb7d8e3..67db6796df4d0d 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -217,7 +217,12 @@ function ResizableCover( {
  *
  * @return {boolean} True if the cover background is considered "dark" and false otherwise.
  */
-function useCoverIsDark( url, dimRatio = 50, overlayColor = '#000000', elementRef ) {
+function useCoverIsDark(
+	url,
+	dimRatio = 50,
+	overlayColor = '#000000',
+	elementRef
+) {
 	const [ isDark, setIsDark ] = useState( false );
 	useEffect( () => {
 		// If opacity is lower than 50 the dominant color is the image or video color,

From 23435c2df685c559902e8209d064f7bc795afae0 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Tue, 14 Sep 2021 16:28:14 +1200
Subject: [PATCH 03/13] Add an 'is-light' class to the cover block when it's
 saved with a light background

---
 packages/block-library/src/cover/block.json |  4 +++
 packages/block-library/src/cover/edit.js    | 39 +++++++++++++--------
 packages/block-library/src/cover/save.js    |  2 ++
 packages/block-library/src/cover/style.scss |  5 +--
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 214a485a942514..096cade78b1664 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -58,6 +58,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
index 67db6796df4d0d..8d5ba4e308a39c 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -212,18 +212,18 @@ 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.
@@ -231,30 +231,37 @@ function useCoverIsDark(
 			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 } ) {
@@ -328,6 +335,7 @@ function CoverEdit( {
 		style: styleAttribute,
 		url,
 		alt,
+		isDark,
 	} = attributes;
 	const {
 		gradientClass,
@@ -384,11 +392,12 @@ function CoverEdit( {
 	};
 
 	const isDarkElement = useRef();
-	const isDark = useCoverIsDark(
+	useCoverIsDark(
 		url,
 		dimRatio,
 		overlayColor.color,
-		isDarkElement
+		isDarkElement,
+		setAttributes
 	);
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
@@ -651,7 +660,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
index 1b1de52e075214..50a0aba7308961 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -42,6 +42,7 @@ export default function save( { attributes } ) {
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		isDark,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -76,6 +77,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
index 80e258c13259f9..433310451c3716 100644
--- 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;
 		}
 	}
 

From dc1208cafe88e06b04949a0196552f77014b4810 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Fri, 17 Sep 2021 15:32:25 +1200
Subject: [PATCH 04/13] Revert back to the is-dark-theme

---
 packages/block-library/src/cover/edit.js    | 48 +++++++++------------
 packages/block-library/src/cover/save.js    |  6 +--
 packages/block-library/src/cover/style.scss | 11 ++---
 3 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 8d5ba4e308a39c..5740c07562a607 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -212,18 +212,13 @@ 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.
@@ -231,37 +226,30 @@ function useCoverIsDark(
 			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
index 50a0aba7308961..ce96a76d2ba794 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -35,6 +35,7 @@ export default function save( { attributes } ) {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		overlayColor,
 		url,
@@ -42,7 +43,6 @@ export default function save( { attributes } ) {
 		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
index 433310451c3716..81fa2ae205fc25 100644
--- 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;
 	}

From 6b12ec3bc7425d63dec63b0d86d48d40c03ad458 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Fri, 17 Sep 2021 16:00:54 +1200
Subject: [PATCH 05/13] fix css linting issues

---
 packages/block-library/src/cover/style.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 81fa2ae205fc25..b50a0fcd07d652 100644
--- 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;
 		}
 	}
@@ -216,7 +216,8 @@ 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;
 	}

From 0a346421ec8428456544e7b550692105eabe6170 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 20 Sep 2021 12:39:29 +1200
Subject: [PATCH 06/13] Add some additional selectors to get around specificity
 issues with TwentyTwentyOne theme

---
 packages/block-library/src/cover/editor.scss | 11 +++++++++++
 packages/block-library/src/cover/style.scss  |  8 ++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index a2a0455b3d30ec..d2a620db2d370d 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -41,6 +41,17 @@
 		text-align: left;
 		margin-left: 0;
 		margin-right: 0;
+		.block-editor-block-list__block:not(.has-text-color) {
+			color: $white;
+		}
+	}
+
+	&.is-light {
+		.wp-block-cover__inner-container {
+			.block-editor-block-list__block:not(.has-text-color) {
+				color: $black;
+			}
+		}
 	}
 
 	.wp-block-cover__placeholder-background-options {
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index b50a0fcd07d652..7a9e1d5bea657c 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -103,12 +103,16 @@
 	.wp-block-cover__inner-container {
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-		color: $white;
+		*:not(.has-text-color) {
+			color: $white;
+		}
 	}
 
 	&.is-light {
 		.wp-block-cover__inner-container {
-			color: $black;
+			*:not(.has-text-color) {
+				color: $black;
+			}
 		}
 	}
 

From aadb54356a167d9f508e68f84c66ba1c18960fc6 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 20 Sep 2021 13:20:12 +1200
Subject: [PATCH 07/13] Regenerate the cover block fixtures

---
 test/integration/fixtures/blocks/core__cover.json             | 3 ++-
 .../fixtures/blocks/core__cover__deprecated-1.serialized.html | 2 +-
 .../fixtures/blocks/core__cover__deprecated-2.serialized.html | 2 +-
 .../fixtures/blocks/core__cover__deprecated-3.serialized.html | 2 +-
 .../fixtures/blocks/core__cover__deprecated-4.serialized.html | 2 +-
 .../fixtures/blocks/core__cover__deprecated-5.serialized.html | 2 +-
 .../fixtures/blocks/core__cover__deprecated-6.json            | 3 ++-
 .../fixtures/blocks/core__cover__deprecated-6.serialized.html | 4 ++--
 .../fixtures/blocks/core__cover__gradient-image.json          | 3 ++-
 .../fixtures/blocks/core__cover__gradient-video.json          | 3 ++-
 test/integration/fixtures/blocks/core__cover__gradient.json   | 3 ++-
 .../integration/fixtures/blocks/core__cover__solid-color.json | 3 ++-
 .../fixtures/blocks/core__cover__video-overlay.json           | 3 ++-
 test/integration/fixtures/blocks/core__cover__video.json      | 3 ++-
 14 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/test/integration/fixtures/blocks/core__cover.json b/test/integration/fixtures/blocks/core__cover.json
index cfe2fc497d833a..2d4fd0ffede218 100644
--- a/test/integration/fixtures/blocks/core__cover.json
+++ b/test/integration/fixtures/blocks/core__cover.json
@@ -9,7 +9,8 @@
 			"hasParallax": false,
 			"isRepeated": false,
 			"dimRatio": 40,
-			"backgroundType": "image"
+			"backgroundType": "image",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
index 57143dcc57fcc9..f2ff32ce15567e 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34} -->
-<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Image</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
index 908d376db6d78f..623d9313edc553 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34} -->
-<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
index d398f77561a7d7..33c9c0cbf4d044 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35} -->
-<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
index 4e455dc180f654..8ddb7566feaf31 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"focalPoint":{"x":"0.07","y":"0.07"}} -->
-<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
index edaa52301e112a..4f110f17bce4fc 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","gradient":"midnight"} -->
-<div class="wp-block-cover has-background-dim has-background-gradient"><span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-background-dim has-background-gradient"><span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Cover</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.json b/test/integration/fixtures/blocks/core__cover__deprecated-6.json
index 992f6d7892d699..bc3c84f2f37a77 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-6.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-6.json
@@ -74,7 +74,8 @@
 			"isRepeated": false,
 			"dimRatio": 50,
 			"backgroundType": "image",
-			"contentPosition": "bottom right"
+			"contentPosition": "bottom right",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
index 4da8ec2748281e..d49a8e328beaac 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
-<div class="wp-block-cover has-background-dim-40 has-background-dim"><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover has-background-dim-40 is-light has-background-dim"><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
@@ -7,7 +7,7 @@
 <!-- /wp:cover -->
 
 <!-- wp:cover {"url":"https://example.com/some-background-image.png","id":1933,"dimRatio":0,"focalPoint":{"x":"0.50","y":"0.40"},"minHeight":48,"minHeightUnit":"vw","align":"full"} -->
-<div class="wp-block-cover alignfull" style="min-height:48vw"><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
+<div class="wp-block-cover alignfull is-light" style="min-height:48vw"><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-image.json b/test/integration/fixtures/blocks/core__cover__gradient-image.json
index 6f56615b5f7af6..929f65374caebb 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-image.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-image.json
@@ -10,7 +10,8 @@
 			"isRepeated": false,
 			"dimRatio": 30,
 			"backgroundType": "image",
-			"customGradient": "linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"
+			"customGradient": "linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-video.json b/test/integration/fixtures/blocks/core__cover__gradient-video.json
index a71f345cadf227..a7de6527076d0e 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-video.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-video.json
@@ -10,7 +10,8 @@
 			"isRepeated": false,
 			"dimRatio": 70,
 			"backgroundType": "video",
-			"customGradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
+			"customGradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__gradient.json b/test/integration/fixtures/blocks/core__cover__gradient.json
index 5728150c46b0c5..756c96b44a6670 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient.json
@@ -9,7 +9,8 @@
 			"isRepeated": false,
 			"dimRatio": 50,
 			"backgroundType": "image",
-			"customGradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
+			"customGradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__solid-color.json b/test/integration/fixtures/blocks/core__cover__solid-color.json
index ed5442cd7e8d15..e79359c1367442 100644
--- a/test/integration/fixtures/blocks/core__cover__solid-color.json
+++ b/test/integration/fixtures/blocks/core__cover__solid-color.json
@@ -9,7 +9,8 @@
 			"isRepeated": false,
 			"dimRatio": 50,
 			"overlayColor": "primary",
-			"backgroundType": "image"
+			"backgroundType": "image",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.json b/test/integration/fixtures/blocks/core__cover__video-overlay.json
index 7e3d1e3e4193a9..61c90de1e7ed5d 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.json
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.json
@@ -10,7 +10,8 @@
 			"isRepeated": false,
 			"dimRatio": 10,
 			"customOverlayColor": "#3615d9",
-			"backgroundType": "video"
+			"backgroundType": "video",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__video.json b/test/integration/fixtures/blocks/core__cover__video.json
index 2f46f1e5884ce7..d690fe3b723f2f 100644
--- a/test/integration/fixtures/blocks/core__cover__video.json
+++ b/test/integration/fixtures/blocks/core__cover__video.json
@@ -9,7 +9,8 @@
 			"hasParallax": false,
 			"isRepeated": false,
 			"dimRatio": 40,
-			"backgroundType": "video"
+			"backgroundType": "video",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{

From 5cd2c8dc9d3ef597b992a4f786a861083ef11729 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 20 Sep 2021 13:54:13 +1200
Subject: [PATCH 08/13] Fix e2e test

---
 .../editor/various/__snapshots__/inserting-blocks.test.js.snap  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
index ec465386aaf05d..6f1dc37b542804 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
@@ -89,7 +89,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:cover -->
-<div class=\\"wp-block-cover has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
+<div class=\\"wp-block-cover is-light has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
 <!-- /wp:cover -->
 
 <!-- wp:heading -->

From 028f59b5e03d4d1153bab0db87fb3d6320da0b5c Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 20 Sep 2021 14:20:57 +1200
Subject: [PATCH 09/13] Another e2e fix

---
 .../editor/various/__snapshots__/inserting-blocks.test.js.snap  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
index 6f1dc37b542804..e0f9cf29b24edf 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
@@ -88,7 +88,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover -->
+<!-- wp:cover {"isDark":false} -->
 <div class=\\"wp-block-cover is-light has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
 <!-- /wp:cover -->
 

From e9c1ccbbffc3ee383f1eff7a3e60d74860b5840b Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 20 Sep 2021 16:29:24 +1200
Subject: [PATCH 10/13] Another attempt to fix e2e

---
 .../editor/various/__snapshots__/inserting-blocks.test.js.snap  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
index e0f9cf29b24edf..f356747b05a226 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
@@ -88,7 +88,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover {"isDark":false} -->
+<!-- wp:cover {\\"isDark\\":false} -->
 <div class=\\"wp-block-cover is-light has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
 <!-- /wp:cover -->
 

From b7c6727884973f213edc5b12d200dd6549ecc351 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Tue, 21 Sep 2021 09:21:08 +1200
Subject: [PATCH 11/13] Revert "Add some additional selectors to get around
 specificity issues with TwentyTwentyOne theme"

This reverts commit 68675e222ffb15696f9e52e78c740e48e353ce11.
---
 packages/block-library/src/cover/editor.scss | 11 -----------
 packages/block-library/src/cover/style.scss  |  8 ++------
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index d2a620db2d370d..a2a0455b3d30ec 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -41,17 +41,6 @@
 		text-align: left;
 		margin-left: 0;
 		margin-right: 0;
-		.block-editor-block-list__block:not(.has-text-color) {
-			color: $white;
-		}
-	}
-
-	&.is-light {
-		.wp-block-cover__inner-container {
-			.block-editor-block-list__block:not(.has-text-color) {
-				color: $black;
-			}
-		}
 	}
 
 	.wp-block-cover__placeholder-background-options {
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 7a9e1d5bea657c..b50a0fcd07d652 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -103,16 +103,12 @@
 	.wp-block-cover__inner-container {
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-		*:not(.has-text-color) {
-			color: $white;
-		}
+		color: $white;
 	}
 
 	&.is-light {
 		.wp-block-cover__inner-container {
-			*:not(.has-text-color) {
-				color: $black;
-			}
+			color: $black;
 		}
 	}
 

From 198c4d18aae49e88e138f19a1b33a84b234f1188 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Wed, 22 Sep 2021 11:36:03 +1200
Subject: [PATCH 12/13] Remove default for isDark attribute

---
 packages/block-library/src/cover/block.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 096cade78b1664..75f880313cbe02 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -60,8 +60,7 @@
 			"type": "string"
 		},
 		"isDark": {
-			"type": "boolean",
-			"default": true
+			"type": "boolean"
 		}
 	},
 	"supports": {

From ae9212b5d8e60f13d922546a11ccc84e480e8c34 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Wed, 22 Sep 2021 11:56:45 +1200
Subject: [PATCH 13/13] Put attribute default back

---
 packages/block-library/src/cover/block.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 75f880313cbe02..096cade78b1664 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -60,7 +60,8 @@
 			"type": "string"
 		},
 		"isDark": {
-			"type": "boolean"
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {