@wordpress/block-library 9.11.0 → 9.12.0

package/src/cover/deprecated.js

@@ -164,7 +164,7 @@ const v8ToV11BlockAttributes = {
 	},
 };
 
-const v12BlockAttributes = {
+const v12toV13BlockAttributes = {
 	...v8ToV11BlockAttributes,
 	useFeaturedImage: {
 		type: 'boolean',
@@ -176,6 +176,20 @@ const v12BlockAttributes = {
 	},
 };
 
+const v14BlockAttributes = {
+	...v12toV13BlockAttributes,
+	isUserOverlayColor: {
+		type: 'boolean',
+	},
+	sizeSlug: {
+		type: 'string',
+	},
+	alt: {
+		type: 'string',
+		default: '',
+	},
+};
+
 const v7toV11BlockSupports = {
 	anchor: true,
 	align: true,
@@ -244,9 +258,173 @@ const v12BlockSupports = {
 	},
 };
 
+const v14BlockSupports = {
+	...v12BlockSupports,
+	shadow: true,
+	dimensions: {
+		aspectRatio: true,
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+// Deprecation for blocks that have z-index.
+const v14 = {
+	attributes: v14BlockAttributes,
+	supports: v14BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+			sizeSlug,
+		} = 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 = clsx(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = clsx(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ clsx(
+						'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={ alt ? 'img' : undefined }
+							aria-label={ alt ? alt : undefined }
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ clsx(
+							'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 the aria-label when the image background is fixed or repeated.
 const v13 = {
-	attributes: v12BlockAttributes,
+	attributes: v12toV13BlockAttributes,
 	supports: v12BlockSupports,
 	save( { attributes } ) {
 		const {
@@ -396,7 +574,7 @@ const v13 = {
 
 // Deprecation for blocks to prevent auto overlay color from overriding previously set values.
 const v12 = {
-	attributes: v12BlockAttributes,
+	attributes: v12toV13BlockAttributes,
 	supports: v12BlockSupports,
 	isEligible( attributes ) {
 		return (
@@ -1824,4 +2002,4 @@ const v1 = {
 	},
 };
 
-export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v14, v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit/block-controls.js

@@ -101,7 +101,7 @@ export default function CoverBlockControls( {
 					onSelect={ onSelectMedia }
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
-					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					name={ ! url ? __( 'Add media' ) : __( 'Replace' ) }
 					onReset={ onClearMedia }
 				/>
 			</BlockControls>

package/src/cover/edit/cover-placeholder.js

@@ -23,9 +23,6 @@ export default function CoverPlaceholder( {
 			icon={ <BlockIcon icon={ icon } /> }
 			labels={ {
 				title: __( 'Cover' ),
-				instructions: __(
-					'Drag and drop onto this block, upload, or select existing media from your library.'
-				),
 			} }
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"

package/src/cover/edit/index.js

@@ -206,12 +206,24 @@ function CoverEdit( {
 
 			// Try to use the previous selected image size if it's available
 			// otherwise try the default image size or fallback to full size.
-			if ( sizeSlug && newMedia?.sizes?.[ sizeSlug ] ) {
+			if (
+				sizeSlug &&
+				( newMedia?.sizes?.[ sizeSlug ] ||
+					newMedia?.media_details?.sizes?.[ sizeSlug ] )
+			) {
 				mediaAttributes.sizeSlug = sizeSlug;
-				mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url;
-			} else if ( newMedia?.sizes?.[ imageDefaultSize ] ) {
+				mediaAttributes.url =
+					newMedia?.sizes?.[ sizeSlug ]?.url ||
+					newMedia?.media_details?.sizes?.[ sizeSlug ]?.source_url;
+			} else if (
+				newMedia?.sizes?.[ imageDefaultSize ] ||
+				newMedia?.media_details?.sizes?.[ imageDefaultSize ]
+			) {
 				mediaAttributes.sizeSlug = imageDefaultSize;
-				mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url;
+				mediaAttributes.url =
+					newMedia?.sizes?.[ imageDefaultSize ]?.url ||
+					newMedia?.media_details?.sizes?.[ imageDefaultSize ]
+						?.source_url;
 			} else {
 				mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG;
 			}
@@ -459,7 +471,7 @@ function CoverEdit( {
 			setAttributes( { minHeight: newMinHeight } );
 		},
 		// Hide the resize handle if an aspect ratio is set, as the aspect ratio takes precedence.
-		showHandle: ! attributes.style?.dimensions?.aspectRatio ? true : false,
+		showHandle: ! attributes.style?.dimensions?.aspectRatio,
 		size: resizableBoxDimensions,
 		width,
 	};
@@ -527,27 +539,6 @@ function CoverEdit( {
 				data-url={ url }
 			>
 				{ resizeListener }
-				{ showOverlay && (
-					<span
-						aria-hidden="true"
-						className={ clsx(
-							'wp-block-cover__background',
-							dimRatioToClass( dimRatio ),
-							{
-								[ overlayColor.class ]: overlayColor.class,
-								'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={ { backgroundImage: gradientValue, ...bgStyle } }
-					/>
-				) }
 
 				{ ! url && useFeaturedImage && (
 					<Placeholder
@@ -589,7 +580,31 @@ function CoverEdit( {
 						style={ mediaStyle }
 					/>
 				) }
+
+				{ showOverlay && (
+					<span
+						aria-hidden="true"
+						className={ clsx(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'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={ { backgroundImage: gradientValue, ...bgStyle } }
+					/>
+				) }
+
 				{ isUploadingMedia && <Spinner /> }
+
 				<CoverPlaceholder
 					disableMediaButtons
 					onSelectMedia={ onSelectMedia }

package/src/cover/editor.scss

@@ -37,12 +37,15 @@
 			width: 100%;
 			z-index: 1;
 		}
+
+		.wp-block-cover__inner-container {
+			z-index: 2;
+		}
 	}
 
 	// Shown while media is being uploaded
 	.components-spinner {
 		position: absolute;
-		z-index: z-index(".wp-block-cover__inner-container");
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%); // Account for spinner dimensions
@@ -104,10 +107,6 @@
 	}
 }
 
-// When uploading background images, show a transparent overlay.
-.wp-block-cover > .components-drop-zone .components-drop-zone__content {
-	opacity: 0.8 !important;
-}
 
 // Remove the parallax fixed background when in the patterns preview panel as it
 // doesn't work with the transforms that are applied to resize the block in that context.

package/src/cover/save.js

@@ -106,26 +106,6 @@ export default function save( { attributes } ) {
 
 	return (
 		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
-			<span
-				aria-hidden="true"
-				className={ clsx(
-					'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 &&
@@ -162,6 +142,33 @@ export default function save( { attributes } ) {
 					data-object-position={ objectPosition }
 				/>
 			) }
+
+			{ /* The `wp-block-cover__background` needs to be immediately before
+			the `wp-block-cover__inner-container`, so the exclusion CSS selector
+			`.wp-block-cover__background + .wp-block-cover__inner-container`
+			works properly. If it needs to be changed in the future, the
+			selector for the backward compatibility for v14 deprecation also
+			needs change. */ }
+			<span
+				aria-hidden="true"
+				className={ clsx(
+					'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 }
+			/>
+
 			<div
 				{ ...useInnerBlocksProps.save( {
 					className: 'wp-block-cover__inner-container',

package/src/cover/style.scss

@@ -54,7 +54,6 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
-		z-index: z-index(".wp-block-cover.has-background-dim::before");
 		opacity: 0.5;
 	}
 
@@ -95,17 +94,11 @@
 	}
 
 	.wp-block-cover__inner-container {
+		position: relative; // Needed for the inner container to be positioned above other elements with absolute positioning.
 		width: 100%;
-		z-index: z-index(".wp-block-cover__inner-container");
 		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
-
-		// Reset the z-index to auto when the body has a modal open. So when the
-		// modal is inside the cover, it doesn't create a stacking context.
-		@at-root .has-modal-open & {
-			z-index: auto;
-		}
 	}
 
 	// Position: Top
@@ -215,14 +208,6 @@ video.wp-block-cover__video-background {
 	}
 }
 
-.wp-block-cover__video-background {
-	z-index: z-index(".wp-block-cover__video-background");
-}
-
-.wp-block-cover__image-background {
-	z-index: z-index(".wp-block-cover__image-background");
-}
-
 // Styles below only exist to support older versions of the block.
 // Versions that not had inner blocks and used an h2 heading had a section (and not a div) with a class wp-block-cover-image (and not a wp-block-cover).
 // We are using the previous referred differences to target old versions.
@@ -302,3 +287,42 @@ section.wp-block-cover-image > h2,
 		color: inherit;
 	}
 }
+
+// Backward compatibility for v14 deprecation. Only applied to the frontend.
+// Regarding the `.wp-block-cover__background + .wp-block-cover__inner-container`
+// selector: When the `.wp-block-cover__inner-container` comes right after the
+// `.wp-block-cover__background` , it means that it's using the new HTML
+// structure or that it's using the color background or gradient (even in
+// the deprecated version). In the color background or gradient option we don't
+// need the z-index because the elements are in the expected order.
+body:not(.editor-styles-wrapper) .wp-block-cover:not(
+.wp-block-cover:has(
+	.wp-block-cover__background + .wp-block-cover__inner-container
+)
+) {
+	.wp-block-cover__video-background {
+		z-index: z-index(".wp-block-cover__video-background");
+	}
+
+	.wp-block-cover__image-background {
+		z-index: z-index(".wp-block-cover__image-background");
+	}
+
+	// The first selector is required for old Cover markup/
+	// Keep .wp-block-cover__gradient-background for v8 deprecation.
+	&.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
+	.wp-block-cover__gradient-background {
+		z-index: z-index(".wp-block-cover.has-background-dim::before");
+	}
+
+	.wp-block-cover__inner-container {
+		z-index: z-index(".wp-block-cover__inner-container");
+
+		// Reset the z-index to auto when the body has a modal open. So when the
+		// modal is inside the cover, it doesn't create a stacking context.
+		@at-root .has-modal-open & {
+			z-index: auto;
+		}
+	}
+}

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

@@ -34,7 +34,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -42,7 +42,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:20vw"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -50,7 +50,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -58,7 +58,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:1em"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -66,7 +66,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:1rem"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -74,7 +74,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:1vh"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -82,7 +82,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:1vw"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><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 -->"
@@ -90,7 +90,7 @@ 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","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"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim"></span><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 -->"
@@ -98,7 +98,7 @@ exports[`when an image is attached updates background opacity 1`] = `
 
 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…"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-2000" src="https://test.files.wordpress.com/local-image-1.mp4" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color 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>
 <!-- /wp:cover -->"

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

@@ -4,7 +4,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","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"} -->
+<div class="wp-block-cover" style="min-height:219px"><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%"/><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><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>
 <!-- /wp:cover --></div>
@@ -15,7 +15,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","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"} -->
+<div class="wp-block-cover" style="min-height:219px"><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%"/><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><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>
 <!-- /wp:cover --></div>
@@ -40,7 +40,7 @@ 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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><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><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><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>
 <!-- /wp:cover --></div>
@@ -51,7 +51,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","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"} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><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><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><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>
 <!-- /wp:cover --></div>