Add text color block support to Cover block

WordPress · Dec 16, 2022 · b6dacd2 · b6dacd2
1 parent 0832dba
commit b6dacd2
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 60 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -230,7 +230,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 
 -	**Name:** core/cover
 -	**Category:** media
--	**Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, anchor, color (text, ~~background~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage
 
 ## Embed

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -90,7 +90,7 @@
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
-			"text": false,
+			"text": true,
 			"background": false
 		},
 		"typography": {

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -106,17 +106,11 @@
 	.wp-block-cover__inner-container {
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-		color: $white;
+		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
 	}
 
-	&.is-light {
-		.wp-block-cover__inner-container {
-			color: $black;
-		}
-	}
-
 	p,
 	h1,
 	h2,
@@ -285,3 +279,18 @@ section.wp-block-cover-image > h2,
 	padding: 0.44em;
 	text-align: center;
 }
+
+// If Cover block's text color has not been set adjust default color
+// based on if overlay is light or not. The following styles leverage
+// `:where` to allow for generic global styles that have a low specificity to
+// still take precedence.
+
+:where(.wp-block-cover:not(.has-text-color)),
+:where(.wp-block-cover-image:not(.has-text-color)) {
+	color: $white;
+}
+
+:where(.wp-block-cover.is-light:not(.has-text-color)),
+:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
+	color: $black;
+}
diff --git a/packages/block-library/src/media-text/transforms.js b/packages/block-library/src/media-text/transforms.js
@@ -42,6 +42,8 @@ const transforms = {
 					gradient,
 					id,
 					overlayColor,
+					style,
+					textColor,
 					url,
 				},
 				innerBlocks
@@ -66,6 +68,16 @@ const transforms = {
 					};
 				}
 
+				// Maintain custom text color block support value.
+				if ( style?.color?.text ) {
+					additionalAttributes.style = {
+						color: {
+							...additionalAttributes.style?.color,
+							text: style.color.text,
+						},
+					};
+				}
+
 				return createBlock(
 					'core/media-text',
 					{
@@ -77,6 +89,7 @@ const transforms = {
 						mediaId: id,
 						mediaType: backgroundType,
 						mediaUrl: url,
+						textColor,
 						...additionalAttributes,
 					},
 					innerBlocks
@@ -135,13 +148,22 @@ const transforms = {
 			) => {
 				const additionalAttributes = {};
 
+				// Migrate the background styles or gradient to Cover's custom
+				// gradient and overlay properties.
 				if ( style?.color?.gradient ) {
 					additionalAttributes.customGradient = style.color.gradient;
 				} else if ( style?.color?.background ) {
 					additionalAttributes.customOverlayColor =
 						style.color.background;
 				}
 
+				// Maintain custom text color support style.
+				if ( style?.color?.text ) {
+					additionalAttributes.style = {
+						color: { text: style.color.text },
+					};
+				}
+
 				const coverAttributes = {
 					align,
 					alt: mediaAlt,
@@ -152,64 +174,15 @@ const transforms = {
 					gradient,
 					id: mediaId,
 					overlayColor: backgroundColor,
+					textColor,
 					url: mediaUrl,
 					...additionalAttributes,
 				};
-				const customTextColor = style?.color?.text;
-
-				// Attempt to maintain any text color selection.
-				// Cover block's do not opt into color block support so we
-				// cannot directly copy the color attributes across.
-				if ( ! textColor && ! customTextColor ) {
-					return createBlock(
-						'core/cover',
-						coverAttributes,
-						innerBlocks
-					);
-				}
-
-				const coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => {
-					const {
-						attributes: { style: innerStyle },
-					} = innerBlock;
-
-					// Only apply the media and text color if the inner block
-					// doesn't set its own color block support selection.
-					if (
-						innerBlock.attributes.textColor ||
-						innerStyle?.color?.text
-					) {
-						return innerBlock;
-					}
-
-					const newAttributes = { textColor };
-
-					// Only add or extend inner block's style object if we have
-					// a custom text color from the media & text block.
-					if ( customTextColor ) {
-						newAttributes.style = {
-							...innerStyle,
-							color: {
-								...innerStyle?.color,
-								text: customTextColor,
-							},
-						};
-					}
-
-					return createBlock(
-						innerBlock.name,
-						{
-							...innerBlock.attributes,
-							...newAttributes,
-						},
-						innerBlock.innerBlocks
-					);
-				} );
 
 				return createBlock(
 					'core/cover',
 					coverAttributes,
-					coloredInnerBlocks
+					innerBlocks
 				);
 			},
 		},