Cover block: background element's classname consistency

packages/block-library/src/cover/deprecated.js

@@ -14,6 +14,7 @@ import {
 	InnerBlocks,
 	__experimentalGetGradientClass,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -26,6 +27,7 @@ import {
 	backgroundImageStyles,
 	getPositionClassName,
 	isContentPositionCenter,
+	dimRatioToClass,
 } from './shared';
 
 /**
@@ -79,6 +81,214 @@ const blockAttributes = {
 	},
 };
 
+// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
+const v8 = {
+	attributes: {
+		url: {
+			type: 'string',
+		},
+		id: {
+			type: 'number',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		hasParallax: {
+			type: 'boolean',
+			default: false,
+		},
+		isRepeated: {
+			type: 'boolean',
+			default: false,
+		},
+		dimRatio: {
+			type: 'number',
+			default: 100,
+		},
+		overlayColor: {
+			type: 'string',
+		},
+		customOverlayColor: {
+			type: 'string',
+		},
+		backgroundType: {
+			type: 'string',
+			default: 'image',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+		minHeight: {
+			type: 'number',
+		},
+		minHeightUnit: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		customGradient: {
+			type: 'string',
+		},
+		contentPosition: {
+			type: 'string',
+		},
+		isDark: {
+			type: 'boolean',
+			default: true,
+		},
+		allowedBlocks: {
+			type: 'array',
+		},
+		templateLock: {
+			type: [ 'string', 'boolean' ],
+			enum: [ 'all', 'insert', false ],
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		html: false,
+		spacing: {
+			padding: true,
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		color: {
+			__experimentalDuotone:
+				'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+			text: false,
+			background: false,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight = minHeightUnit
+			? `${ minHeightProp }${ minHeightUnit }`
+			: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			...( isImageBackground && ! isImgElement
+				? backgroundImageStyles( url )
+				: {} ),
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+				 : undefined;
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position': ! isContentPositionCenter(
+					contentPosition
+				),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						'wp-block-cover__gradient-background',
+						gradientClass,
+						{
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient':
+								gradient || customGradient,
+							[ gradientClass ]: ! url && gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ isImageBackground && isImgElement && url && (
+					<img
+						className={ classnames(
+							'wp-block-cover__image-background',
+							id ? `wp-image-${ id }` : null
+						) }
+						alt={ alt }
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				{ 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',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 const v7 = {
 	attributes: {
 		...blockAttributes,
@@ -808,4 +1018,4 @@ const v1 = {
 	},
 };
 
-export default [ v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];

packages/block-library/src/cover/edit.js

@@ -726,14 +726,18 @@ function CoverEdit( {
 				<span
 					aria-hidden="true"
 					className={ classnames(
+						'wp-block-cover__background',
 						dimRatioToClass( dimRatio ),
-						{ [ overlayColor.class ]: overlayColor.class },
-						'wp-block-cover__gradient-background',
-						gradientClass,
 						{
+							[ 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 ]: ! url && gradientClass,
+							[ gradientClass ]: gradientClass,
 						}
 					) }
 					style={ { backgroundImage: gradientValue, ...bgStyle } }

packages/block-library/src/cover/save.js

@@ -88,19 +88,25 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
+	const gradientValue = gradient || customGradient;
+
 	return (
 		<div { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
 				className={ classnames(
+					'wp-block-cover__background',
 					overlayColorClass,
 					dimRatioToClass( dimRatio ),
-					'wp-block-cover__gradient-background',
-					gradientClass,
 					{
 						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradient || customGradient,
-						[ gradientClass ]: ! url && gradientClass,
+						// 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 }

packages/block-library/src/cover/style.scss

@@ -57,9 +57,11 @@
 		background-color: inherit;
 	}
 
-	// the first selector is required for old Cover markup
+	// 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,
 	.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
 		position: absolute;
 		top: 0;
@@ -77,14 +79,17 @@
 	@for $i from 1 through 10 {
 		&.has-background-dim.has-background-dim-#{ $i * 10 } {
 			&:not(.has-background-gradient)::before,
+			.wp-block-cover__background,
 			.wp-block-cover__gradient-background {
 				opacity: $i * 0.1;
 			}
 		}
 	}
 
 	@for $i from 0 through 10 {
-		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 } {
+		// Keep .wp-block-cover__gradient-background for v8 deprecation
+		.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 },
+		.wp-block-cover__background.has-background-dim.has-background-dim-#{ $i * 10 } {
 			opacity: $i * 0.1;
 		}
 	}

packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap

@@ -2,31 +2,31 @@
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
 "<!-- wp:cover -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<div class=\\"wp-block-cover\\"><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>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
 "<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-vivid-red-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-background-color 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>
 <!-- /wp:cover -->"
 `;
 
 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\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background 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…\\"} -->
+<div class=\\"wp-block-cover\\"><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>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
 "<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background 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…\\"} -->
+<div class=\\"wp-block-cover\\"><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>
 <!-- /wp:cover -->"

packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap

@@ -89,7 +89,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:cover {\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"></div></div>
+<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\\"></div></div>
 <!-- /wp:cover -->
 
 <!-- wp:heading -->

test/integration/fixtures/blocks/core__cover.html

@@ -1,13 +1,14 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
 <div class="wp-block-cover">
-    <span aria-hidden="true" class="has-background-dim-40 wp-block-cover__gradient-background has-background-dim"></span>
-    <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/>
+    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
+    <img class="wp-block-cover__image-background" alt="" 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>
+		<!-- 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 -->
+