@wordpress/block-library 8.19.6 → 8.20.1

package/src/cover/edit/index.js

@@ -2,8 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
@@ -37,14 +35,17 @@ import {
 	isContentPositionCenter,
 	getPositionClassName,
 	mediaPosition,
-	getCoverIsDark,
 } from '../shared';
 import CoverInspectorControls from './inspector-controls';
 import CoverBlockControls from './block-controls';
 import CoverPlaceholder from './cover-placeholder';
 import ResizableCoverPopover from './resizable-cover-popover';
-
-extend( [ namesPlugin ] );
+import {
+	getMediaColor,
+	compositeIsDark,
+	DEFAULT_BACKGROUND_COLOR,
+	DEFAULT_OVERLAY_COLOR,
+} from './color-utils';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -83,6 +84,8 @@ function CoverEdit( {
 	const {
 		contentPosition,
 		id,
+		url: originalUrl,
+		backgroundType: originalBackgroundType,
 		useFeaturedImage,
 		dimRatio,
 		focalPoint,
@@ -95,6 +98,7 @@ function CoverEdit( {
 		allowedBlocks,
 		templateLock,
 		tagName: TagName = 'div',
+		isUserOverlayColor,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -114,23 +118,34 @@ function CoverEdit( {
 	);
 	const mediaUrl = media?.source_url;
 
+	// User can change the featured image outside of the block, but we still
+	// need to update the block when that happens. This effect should only
+	// run when the featured image changes in that case. All other cases are
+	// handled in their respective callbacks.
 	useEffect( () => {
-		async function setIsDark() {
-			__unstableMarkNextChangeAsNotPersistent();
-			const isDarkSetting = await getCoverIsDark(
-				mediaUrl,
+		( async () => {
+			if ( ! useFeaturedImage ) {
+				return;
+			}
+
+			const averageBackgroundColor = await getMediaColor( mediaUrl );
+
+			let newOverlayColor = overlayColor.color;
+			if ( ! isUserOverlayColor ) {
+				newOverlayColor = averageBackgroundColor;
+				__unstableMarkNextChangeAsNotPersistent();
+				setOverlayColor( newOverlayColor );
+			}
+
+			const newIsDark = compositeIsDark(
 				dimRatio,
-				overlayColor.color
+				newOverlayColor,
+				averageBackgroundColor
 			);
-			setAttributes( {
-				isDark: isDarkSetting,
-			} );
-		}
-		if ( useFeaturedImage ) {
-			setIsDark();
-		}
-		// We only ever want to run this effect if the mediaUrl changes.
-		// All other changes to the isDark state are handled in the appropriate event handlers.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { isDark: newIsDark } );
+		} )();
+		// Disable reason: Update the block only when the featured image changes.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ mediaUrl ] );
 
@@ -141,32 +156,62 @@ function CoverEdit( {
 	const url = useFeaturedImage
 		? mediaUrl
 		: // Ensure the url is not malformed due to sanitization through `wp_kses`.
-		  attributes.url?.replaceAll( '&', '&' );
+		  originalUrl?.replaceAll( '&', '&' );
 	const backgroundType = useFeaturedImage
 		? IMAGE_BACKGROUND_TYPE
-		: attributes.backgroundType;
+		: originalBackgroundType;
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { gradientClass, gradientValue } = __experimentalUseGradient();
-	const setMedia = attributesFromMedia( setAttributes, dimRatio );
 
 	const onSelectMedia = async ( newMedia ) => {
-		// Only pass the url to getCoverIsDark if the media is an image as video is not handled.
-		const newUrl = newMedia?.type === 'image' ? newMedia.url : undefined;
-		const isDarkSetting = await getCoverIsDark(
-			newUrl,
-			dimRatio,
-			overlayColor.color
+		const mediaAttributes = attributesFromMedia( newMedia );
+
+		const averageBackgroundColor = await getMediaColor(
+			newMedia?.type === IMAGE_BACKGROUND_TYPE ? newMedia?.url : undefined
+		);
+
+		let newOverlayColor = overlayColor.color;
+		if ( ! isUserOverlayColor ) {
+			newOverlayColor = averageBackgroundColor;
+			setOverlayColor( newOverlayColor );
+
+			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			__unstableMarkNextChangeAsNotPersistent();
+		}
+
+		const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+		const newIsDark = compositeIsDark(
+			newDimRatio,
+			newOverlayColor,
+			averageBackgroundColor
 		);
-		setMedia( newMedia, isDarkSetting );
+
+		setAttributes( {
+			...mediaAttributes,
+			focalPoint: undefined,
+			useFeaturedImage: undefined,
+			dimRatio: newDimRatio,
+			isDark: newIsDark,
+		} );
 	};
 
-	const onClearMedia = async () => {
-		const isDarkSetting = await getCoverIsDark(
-			undefined,
+	const onClearMedia = () => {
+		let newOverlayColor = overlayColor.color;
+		if ( ! isUserOverlayColor ) {
+			newOverlayColor = DEFAULT_OVERLAY_COLOR;
+			setOverlayColor( undefined );
+
+			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			__unstableMarkNextChangeAsNotPersistent();
+		}
+
+		const newIsDark = compositeIsDark(
 			dimRatio,
-			overlayColor.color
+			newOverlayColor,
+			DEFAULT_BACKGROUND_COLOR
 		);
+
 		setAttributes( {
 			url: undefined,
 			id: undefined,
@@ -174,39 +219,50 @@ function CoverEdit( {
 			focalPoint: undefined,
 			hasParallax: undefined,
 			isRepeated: undefined,
-			useFeaturedImage: false,
-			isDark: isDarkSetting,
+			useFeaturedImage: undefined,
+			isDark: newIsDark,
 		} );
 	};
 
-	const onSetOverlayColor = async ( colorValue ) => {
-		const isDarkSetting = await getCoverIsDark( url, dimRatio, colorValue );
-		setOverlayColor( colorValue );
+	const onSetOverlayColor = async ( newOverlayColor ) => {
+		const averageBackgroundColor = await getMediaColor( url );
+		const newIsDark = compositeIsDark(
+			dimRatio,
+			newOverlayColor,
+			averageBackgroundColor
+		);
+
+		setOverlayColor( newOverlayColor );
+
+		// Make undo revert the next setAttributes and the previous setOverlayColor.
 		__unstableMarkNextChangeAsNotPersistent();
+
 		setAttributes( {
-			isDark: isDarkSetting,
+			isUserOverlayColor: true,
+			isDark: newIsDark,
 		} );
 	};
 
 	const onUpdateDimRatio = async ( newDimRatio ) => {
-		const isDarkSetting = await getCoverIsDark(
-			url,
+		const averageBackgroundColor = await getMediaColor( url );
+		const newIsDark = compositeIsDark(
 			newDimRatio,
-			overlayColor.color
+			overlayColor.color,
+			averageBackgroundColor
 		);
 
 		setAttributes( {
 			dimRatio: newDimRatio,
-			isDark: isDarkSetting,
+			isDark: newIsDark,
 		} );
 	};
 
-	const isUploadingMedia = isTemporaryMedia( id, url );
-
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
+	const isUploadingMedia = isTemporaryMedia( id, url );
+
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
@@ -285,18 +341,43 @@ function CoverEdit( {
 	};
 
 	const toggleUseFeaturedImage = async () => {
-		const isDarkSetting = await ( useFeaturedImage
-			? getCoverIsDark( undefined, dimRatio, overlayColor.color )
-			: getCoverIsDark( mediaUrl, dimRatio, overlayColor.color ) );
+		const newUseFeaturedImage = ! useFeaturedImage;
+
+		const averageBackgroundColor = newUseFeaturedImage
+			? await getMediaColor( mediaUrl )
+			: DEFAULT_BACKGROUND_COLOR;
+
+		const newOverlayColor = ! isUserOverlayColor
+			? averageBackgroundColor
+			: overlayColor.color;
+
+		if ( ! isUserOverlayColor ) {
+			if ( newUseFeaturedImage ) {
+				setOverlayColor( newOverlayColor );
+			} else {
+				setOverlayColor( undefined );
+			}
+
+			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			__unstableMarkNextChangeAsNotPersistent();
+		}
+
+		const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+		const newIsDark = compositeIsDark(
+			newDimRatio,
+			newOverlayColor,
+			averageBackgroundColor
+		);
+
 		setAttributes( {
 			id: undefined,
 			url: undefined,
-			useFeaturedImage: ! useFeaturedImage,
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			useFeaturedImage: newUseFeaturedImage,
+			dimRatio: newDimRatio,
 			backgroundType: useFeaturedImage
 				? IMAGE_BACKGROUND_TYPE
 				: undefined,
-			isDark: isDarkSetting,
+			isDark: newIsDark,
 		} );
 	};
 

package/src/cover/edit.native.js

@@ -207,8 +207,15 @@ const Cover = ( {
 
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
-		const onSelect = attributesFromMedia( setAttributes, dimRatio );
-		onSelect( media );
+
+		const mediaAttributes = attributesFromMedia( media );
+		setAttributes( {
+			...mediaAttributes,
+			focalPoint: undefined,
+			useFeaturedImage: undefined,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			isDark: undefined,
+		} );
 	};
 
 	const onMediaPressed = () => {

package/src/cover/shared.js

@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import { FastAverageColor } from 'fast-average-color';
-import { colord } from 'colord';
-
 /**
  * WordPress dependencies
  */
 import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
-import { applyFilters } from '@wordpress/hooks';
 
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
@@ -41,50 +34,47 @@ export function dimRatioToClass( ratio ) {
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }
 
-export function attributesFromMedia( setAttributes, dimRatio ) {
-	return ( media, isDark ) => {
-		if ( ! media || ! media.url ) {
-			setAttributes( { url: undefined, id: undefined, isDark } );
-			return;
-		}
+export function attributesFromMedia( media ) {
+	if ( ! media || ! media.url ) {
+		return {
+			url: undefined,
+			id: undefined,
+		};
+	}
 
-		if ( isBlobURL( media.url ) ) {
-			media.type = getBlobTypeByURL( media.url );
-		}
+	if ( isBlobURL( media.url ) ) {
+		media.type = getBlobTypeByURL( media.url );
+	}
 
-		let mediaType;
-		// For media selections originated from a file upload.
-		if ( media.media_type ) {
-			if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
-				mediaType = IMAGE_BACKGROUND_TYPE;
-			} else {
-				// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
-				// Videos contain the media type of 'file' in the object returned from the rest api.
-				mediaType = VIDEO_BACKGROUND_TYPE;
-			}
+	let mediaType;
+	// For media selections originated from a file upload.
+	if ( media.media_type ) {
+		if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+			mediaType = IMAGE_BACKGROUND_TYPE;
 		} else {
-			// For media selections originated from existing files in the media library.
-			if (
-				media.type !== IMAGE_BACKGROUND_TYPE &&
-				media.type !== VIDEO_BACKGROUND_TYPE
-			) {
-				return;
-			}
-			mediaType = media.type;
+			// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+			// Videos contain the media type of 'file' in the object returned from the rest api.
+			mediaType = VIDEO_BACKGROUND_TYPE;
 		}
+	} else {
+		// For media selections originated from existing files in the media library.
+		if (
+			media.type !== IMAGE_BACKGROUND_TYPE &&
+			media.type !== VIDEO_BACKGROUND_TYPE
+		) {
+			return;
+		}
+		mediaType = media.type;
+	}
 
-		setAttributes( {
-			isDark,
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
-			url: media.url,
-			id: media.id,
-			alt: media?.alt,
-			backgroundType: mediaType,
-			focalPoint: undefined,
-			...( mediaType === VIDEO_BACKGROUND_TYPE
-				? { hasParallax: undefined }
-				: {} ),
-		} );
+	return {
+		url: media.url,
+		id: media.id,
+		alt: media?.alt,
+		backgroundType: mediaType,
+		...( mediaType === VIDEO_BACKGROUND_TYPE
+			? { hasParallax: undefined }
+			: {} ),
 	};
 }
 
@@ -117,86 +107,3 @@ export function getPositionClassName( contentPosition ) {
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }
-
-/**
- * Performs a Porter Duff composite source over operation on two rgba colors.
- *
- * @see https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover
- *
- * @param {import('colord').RgbaColor} source Source color.
- * @param {import('colord').RgbaColor} dest   Destination color.
- * @return {import('colord').RgbaColor} Composite color.
- */
-function compositeSourceOver( source, dest ) {
-	return {
-		r: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),
-		g: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),
-		b: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),
-		a: source.a + dest.a * ( 1 - source.a ),
-	};
-}
-
-function retrieveFastAverageColor() {
-	if ( ! retrieveFastAverageColor.fastAverageColor ) {
-		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
-	}
-	return retrieveFastAverageColor.fastAverageColor;
-}
-
-/**
- * This method evaluates if the cover block's background is dark or not and this boolean
- * can then be applied to the relevant attribute to help ensure that text is visible by default.
- * This needs to be recalculated in all of the following Cover block scenarios:
- * - When an overlay image is added, changed or removed
- * - When the featured image is selected as the overlay image, or removed from the overlay
- * - When the overlay color is changed
- * - When the overlay color is removed
- * - When the dimRatio is changed
- *
- * See the comments below for more details about which aspects take priority when
- * calculating the relative darkness of the Cover.
- *
- * @param {string} url
- * @param {number} dimRatio
- * @param {string} overlayColor
- * @return {Promise<boolean>} True if cover should be considered to be dark.
- */
-export async function getCoverIsDark( url, dimRatio = 50, overlayColor ) {
-	const overlay = colord( overlayColor )
-		.alpha( dimRatio / 100 )
-		.toRgb();
-
-	if ( url ) {
-		try {
-			const imgCrossOrigin = applyFilters(
-				'media.crossOrigin',
-				undefined,
-				url
-			);
-			const {
-				value: [ r, g, b, a ],
-			} = await retrieveFastAverageColor().getColorAsync( url, {
-				// Previously the default color was white, but that changed
-				// in v6.0.0 so it has to be manually set now.
-				defaultColor: [ 255, 255, 255, 255 ],
-				// Errors that come up don't reject the promise, so error
-				// logging has to be silenced with this option.
-				silent: process.env.NODE_ENV === 'production',
-				crossOrigin: imgCrossOrigin,
-			} );
-			// FAC uses 0-255 for alpha, but colord expects 0-1.
-			const media = { r, g, b, a: a / 255 };
-			const composite = compositeSourceOver( overlay, media );
-			return colord( composite ).isDark();
-		} catch ( error ) {
-			// If there's an error, just assume the image is dark.
-			return true;
-		}
-	}
-
-	// Assume a white background because it isn't easy to get the actual
-	// parent background color.
-	const background = { r: 255, g: 255, b: 255, a: 1 };
-	const composite = compositeSourceOver( overlay, background );
-	return colord( composite ).isDark();
-}

package/src/cover/test/__snapshots__/edit.native.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover {"isDark":false} -->
+"<!-- wp:cover {"isUserOverlayColor":true,"isDark":false} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
 <p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
@@ -17,7 +17,7 @@ exports[`color settings sets a color for the overlay background when the placeho
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+"<!-- wp:cover {"isUserOverlayColor":true,"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
 <p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
@@ -33,7 +33,7 @@ exports[`color settings toggles between solid colors and gradients 1`] = `
 `;
 
 exports[`minimum height settings changes the height value between units 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":50,"minHeightUnit":"px","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -41,7 +41,7 @@ exports[`minimum height settings changes the height value between units 1`] = `
 `;
 
 exports[`minimum height settings changes the height value to 20(vw) 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":20,"minHeightUnit":"vw","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":20,"minHeightUnit":"vw","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -49,7 +49,7 @@ exports[`minimum height settings changes the height value to 20(vw) 1`] = `
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Pixels (px) 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":50,"minHeightUnit":"px","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -57,7 +57,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to parent font size (em) 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"em","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"em","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:1em"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -65,7 +65,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to root font size (rem) 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"rem","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"rem","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:1rem"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -73,7 +73,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport height (vh) 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vh","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"vh","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:1vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -81,7 +81,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport width (vw) 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vw","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"vw","isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:1vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
@@ -89,9 +89,17 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 exports[`when an image is attached updates background opacity 1`] = `
-"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isDark":false} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isUserOverlayColor":true,"isDark":false} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" 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"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
+
+exports[`when no media is attached and overlay color is set adds image 1`] = `
+"<!-- wp:cover {"url":"https://test.files.wordpress.com/local-image-1.mp4","id":2000,"dimRatio":50,"overlayColor":"cyan-bluish-gray","isUserOverlayColor":true} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-2000" src="https://test.files.wordpress.com/local-image-1.mp4" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;

package/src/cover/test/__snapshots__/transforms.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Cover block transformations with Image to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
 <div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
@@ -14,7 +14,7 @@ exports[`Cover block transformations with Image to Columns block 1`] = `
 
 exports[`Cover block transformations with Image to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
 <div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
@@ -39,7 +39,7 @@ exports[`Cover block transformations with Image to Media & Text block 1`] = `
 exports[`Cover block transformations with Video to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
@@ -50,7 +50,7 @@ exports[`Cover block transformations with Video to Columns block 1`] = `
 
 exports[`Cover block transformations with Video to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
 <div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>

package/src/cover/test/edit.js

@@ -260,7 +260,7 @@ describe( 'Cover block', () => {
 				} )
 			);
 			expect(
-				within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
+				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
 					'img'
 				)
 			).not.toBeInTheDocument();