Cover block: Only use white text when the background of the cover blo…

…ck is dark. (#33541) * Cover block: Adjust the color of the text based on the background * formatting change * Add an 'is-light' class to the cover block when it's saved with a light background * Revert back to the is-dark-theme * fix css linting issues * Add some additional selectors to get around specificity issues with TwentyTwentyOne theme * Regenerate the cover block fixtures * Fix e2e test * Another e2e fix * Another attempt to fix e2e * Revert "Add some additional selectors to get around specificity issues with TwentyTwentyOne theme" This reverts commit 68675e2. * Remove default for isDark attribute * Put attribute default back Co-authored-by: Glen Davies <glen.davies@a8c.com>
WordPress · Oct 8, 2021 · ed8a5c8 · ed8a5c8
1 parent 56a64b1
commit ed8a5c8
Show file tree

Hide file tree

Showing 19 changed files with 46 additions and 21 deletions.
diff --git 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
@@ -318,6 +318,7 @@ function CoverEdit( {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		minHeight,
 		minHeightUnit,
@@ -380,13 +381,17 @@ function CoverEdit( {
 	};
 
 	const isDarkElement = useRef();
-	const isDark = useCoverIsDark(
+	const isCoverDark = useCoverIsDark(
 		url,
 		dimRatio,
 		overlayColor.color,
 		isDarkElement
 	);
 
+	useEffect( () => {
+		setAttributes( { isDark: isCoverDark } );
+	}, [ isCoverDark ] );
+
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
@@ -655,6 +660,7 @@ function CoverEdit( {
 		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
@@ -35,6 +35,7 @@ export default function save( { attributes } ) {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isDark,
 		isRepeated,
 		overlayColor,
 		url,
@@ -69,13 +70,14 @@ 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 ),
 		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
@@ -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,
@@ -107,6 +106,12 @@
 		color: $white;
 	}
 
+	&.is-light {
+		.wp-block-cover__inner-container {
+			color: $black;
+		}
+	}
+
 	p,
 	h1,
 	h2,

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
@@ -88,8 +88,8 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover -->
-<div class=\\"wp-block-cover has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
+<!-- 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 -->
 
 <!-- wp:heading -->

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,13 +1,13 @@
 <!-- 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>
 <!-- /wp:paragraph --></div></div>
 <!-- /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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,7 +9,8 @@
 			"hasParallax": false,
 			"isRepeated": false,
 			"dimRatio": 40,
-			"backgroundType": "video"
+			"backgroundType": "video",
+			"isDark": true
 		},
 		"innerBlocks": [
 			{