Set custom color when applying initial background image (#54054)

* set overlay from image background average color and refactor code to compute it only once per URL and set is dark attribute correctly * don't reset the maually set overlay, stop redefining utility functions, improve featured image case, don't compute darkness for same color background and foreground * update test with the new default color being white * add the userOverlayColor attribute to keep track of system vs user color setting * Remove default value to fix integration tests * Update JSDoc comments * Consolidate all color functions into color-utils.js * Memoize the average color calculation with memize * Move await before setAttributes calls so they won't be spread out * Consolidate setAttributes calls * Refactor out setIsDark * Refactor attributesFromMedia to return the attributes rather than set them * Refactor out setOverlayFromAverageColor to merge more setAttribute calls * Refactor compositeIsDark to return early if second params are the same * Rename next* to new* for consistency with other existing functions * Move useEffect up near related code * Fix comment * Add check for fully opaque overlay colors * Fix clearMedia from not resetting overlayColor when not manually specified * Rename getAverageBackgroundColor to getMediaColor * Fix use newDimRatio on media select * Fix overlay color not resetting when clearing featured image * Fix missing averageBackgroundColor when toggling featured image * Rename userOverlayColor to isUserOverlayColor * Fix isDark calculation when clearing media * Fix undo states * Update docs with new attribute * Separate out compositeIsDark calls from setAttributes * Fix case where isDark wasn't correctly set when toggling off featured image * Move useFeaturedImage: false to index * Move focalPoint: undefined to index * Set useFeaturedImage to undefined instead of false for slightly cleaner attributes * Shorten #FFFFFF to #FFF * Fix overlayColor in onUpdateDimRatio * Fix use newDimRatio for isDark on updateDimRatio * Fix use newDimRatio for isDark on toggleUseFeaturedImage * Rename DEFAULT_AVERAGE_COLOR to DEFAULT_BACKGROUND_COLOR to better describe what it means in the contexts used * Better JSDoc comment * Fix DEFAULT_BACKGROUND_COLOR import * Update tests to use playwright toHaveCSS * Variable naming * Replace remaining instance of checking backgrounds with toHaveCSS * Update image upload test * Update image transform test * Add block deprecation for auto overlay color * Fix lint * Remove unnecessary expect for the default value * update mobile snapshots due to new attribute * updated snapshots for transforms on mobile tests due to new attribute --------- Co-authored-by: Alex Lende <[email protected]>
WordPress · Sep 22, 2023 · 6a258b3 · 6a258b3
1 parent 8a82a37
commit 6a258b3
Show file tree

Hide file tree

Showing 17 changed files with 651 additions and 254 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -239,7 +239,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
 -	**Name:** core/cover
 -	**Category:** media
 -	**Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
+-	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
 
 ## Details
 

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -42,6 +42,9 @@
 		"customOverlayColor": {
 			"type": "string"
 		},
+		"isUserOverlayColor": {
+			"type": "boolean"
+		},
 		"backgroundType": {
 			"type": "string",
 			"default": "image"

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
@@ -97,7 +97,7 @@ const blockAttributes = {
 	},
 };
 
-const v8ToV10BlockAttributes = {
+const v8ToV11BlockAttributes = {
 	url: {
 		type: 'string',
 	},
@@ -164,7 +164,19 @@ const v8ToV10BlockAttributes = {
 	},
 };
 
-const v7toV10BlockSupports = {
+const v12BlockAttributes = {
+	...v8ToV11BlockAttributes,
+	useFeaturedImage: {
+		type: 'boolean',
+		default: false,
+	},
+	tagName: {
+		type: 'string',
+		default: 'div',
+	},
+};
+
+const v7toV11BlockSupports = {
 	anchor: true,
 	align: true,
 	html: false,
@@ -182,10 +194,222 @@ const v7toV10BlockSupports = {
 	},
 };
 
+const v12BlockSupports = {
+	...v7toV11BlockSupports,
+	spacing: {
+		padding: true,
+		margin: [ 'top', 'bottom' ],
+		blockGap: true,
+		__experimentalDefaultControls: {
+			padding: true,
+			blockGap: true,
+		},
+	},
+	__experimentalBorder: {
+		color: true,
+		radius: true,
+		style: true,
+		width: true,
+		__experimentalDefaultControls: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+	},
+	color: {
+		__experimentalDuotone:
+			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+		heading: true,
+		text: true,
+		background: false,
+		__experimentalSkipSerialization: [ 'gradients' ],
+		enableContrastChecker: false,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+	layout: {
+		allowJustification: false,
+	},
+};
+
+// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
+const v12 = {
+	attributes: v12BlockAttributes,
+	supports: v12BlockSupports,
+	isEligible( attributes ) {
+		return (
+			attributes.customOverlayColor !== undefined ||
+			attributes.overlayColor !== undefined
+		);
+	},
+	migrate( attributes ) {
+		return {
+			...attributes,
+			isUserOverlayColor: true,
+		};
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+			  ? mediaPosition(focalPoint)
+			  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = classnames(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
 // Deprecation for blocks that does not have a HTML tag option.
 const v11 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -334,8 +558,8 @@ const v11 = {
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
 const v10 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -471,8 +695,8 @@ const v10 = {
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
 const v9 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -603,8 +827,8 @@ const v9 = {
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 const v8 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -758,7 +982,7 @@ const v7 = {
 			default: '',
 		},
 	},
-	supports: v7toV10BlockSupports,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -1449,4 +1673,4 @@ const v1 = {
 	},
 };
 
-export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];