Cover block: add HTML element selection

docs/reference-guides/core-blocks.md

@@ -231,7 +231,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 -	**Name:** core/cover
 -	**Category:** media
 -	**Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage
+-	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
 
 ## Embed
 

packages/block-library/src/cover/block.json

@@ -74,6 +74,10 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

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

@@ -16,6 +16,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ import {
 	getPositionClassName,
 	isContentPositionCenter,
 	dimRatioToClass,
+	mediaPosition,
 } from './shared';
 
 function backgroundImageStyles( url ) {
@@ -53,6 +55,18 @@ function migrateDimRatio( attributes ) {
 	};
 }
 
+function migrateTag( attributes ) {
+	if ( ! attributes.tagName ) {
+		attributes = {
+			...attributes,
+			tagName: 'div',
+		};
+	}
+	return {
+		...attributes,
+	};
+}
+
 const blockAttributes = {
 	url: {
 		type: 'string',
@@ -168,6 +182,155 @@ const v7toV10BlockSupports = {
 	},
 };
 
+// Deprecation for blocks that does not have a HTML tag option.
+const v11 = {
+	attributes: v8ToV10BlockAttributes,
+	supports: v7toV10BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = 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 (
+			<div { ...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',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
 const v10 = {
 	attributes: v8ToV10BlockAttributes,
@@ -433,6 +596,7 @@ const v9 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
@@ -559,6 +723,7 @@ const v8 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 const v7 = {
@@ -707,7 +872,7 @@ const v7 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v6 = {
@@ -840,7 +1005,7 @@ const v6 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v5 = {
@@ -937,7 +1102,7 @@ const v5 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v4 = {
@@ -1034,7 +1199,7 @@ const v4 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v3 = {
@@ -1117,6 +1282,7 @@ const v3 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, ...restAttributes } = newAttribs;
@@ -1202,6 +1368,7 @@ const v2 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
@@ -1262,8 +1429,8 @@ const v1 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
-
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
 
 		return [
@@ -1280,4 +1447,4 @@ const v1 = {
 	},
 };
 
-export default [ v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

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

@@ -94,6 +94,7 @@ function CoverEdit( {
 		alt,
 		allowedBlocks,
 		templateLock,
+		tagName: TagName = 'div',
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -247,7 +248,7 @@ function CoverEdit( {
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				<div
+				<TagName
 					{ ...blockProps }
 					className={ classnames(
 						'is-placeholder',
@@ -286,7 +287,7 @@ function CoverEdit( {
 						} }
 						showHandle={ isSelected }
 					/>
-				</div>
+				</TagName>
 			</>
 		);
 	}
@@ -308,7 +309,7 @@ function CoverEdit( {
 		<>
 			{ blockControls }
 			{ inspectorControls }
-			<div
+			<TagName
 				{ ...blockProps }
 				className={ classnames( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
@@ -399,7 +400,7 @@ function CoverEdit( {
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				<div { ...innerBlocksProps } />
-			</div>
+			</TagName>
 		</>
 	);
 }