From 6ec0e93e565e0add7e2db60c1ae0bcbf4e4be943 Mon Sep 17 00:00:00 2001
From: Mike Schroder <mschrode@umich.edu>
Date: Fri, 19 Mar 2021 21:34:07 +0900
Subject: [PATCH] Add `has-custom-padding` class to cover block when custom
 padding is used.

---
 .../block-library/src/cover/deprecated.js     | 159 ++++++++++++++++++
 packages/block-library/src/cover/save.js      |   4 +
 2 files changed, 163 insertions(+)

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index 64b80bd1925959..93310f840de816 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -60,6 +60,165 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'html',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
+			isRepeated: {
+				type: 'boolean',
+				default: false,
+			},
+			minHeight: {
+				type: 'number',
+			},
+			minHeightUnit: {
+				type: 'string',
+			},
+			gradient: {
+				type: 'string',
+			},
+			customGradient: {
+				type: 'string',
+			},
+			contentPosition: {
+				type: 'string',
+			},
+		},
+		supports: {
+			anchor: true,
+			align: true,
+			html: false,
+			spacing: {
+				padding: true,
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundType,
+				gradient,
+				contentPosition,
+				customGradient,
+				customOverlayColor,
+				dimRatio,
+				focalPoint,
+				hasParallax,
+				isRepeated,
+				overlayColor,
+				url,
+				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 )
+					: {} ),
+				backgroundColor: ! overlayColorClass
+					? customOverlayColor
+					: undefined,
+				background:
+					customGradient && ! url ? customGradient : undefined,
+				minHeight: minHeight || undefined,
+			};
+
+			const objectPosition =
+				// prettier-ignore
+				focalPoint && isImgElement
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+					: undefined;
+
+			const classes = classnames(
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					'is-repeated': isRepeated,
+					'has-background-gradient': gradient || customGradient,
+					[ gradientClass ]: ! url && gradientClass,
+					'has-custom-content-position': ! isContentPositionCenter(
+						contentPosition
+					),
+				},
+				getPositionClassName( contentPosition )
+			);
+
+			return (
+				<div { ...useBlockProps.save( { className: classes, style } ) }>
+					{ url &&
+						( gradient || customGradient ) &&
+						dimRatio !== 0 && (
+							<span
+								aria-hidden="true"
+								className={ classnames(
+									'wp-block-cover__gradient-background',
+									gradientClass
+								) }
+								style={
+									customGradient
+										? { background: customGradient }
+										: undefined
+								}
+							/>
+						) }
+					{ isImageBackground && isImgElement && url && (
+						<img
+							className={ classnames(
+								'wp-block-cover__image-background',
+								id ? `wp-image-${ id }` : null
+							) }
+							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 className="wp-block-cover__inner-container">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index d9f1bb0def0323..b86119a35911d0 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -41,6 +41,7 @@ export default function save( { attributes } ) {
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		style: styleAttribute,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -56,6 +57,8 @@ export default function save( { attributes } ) {
 
 	const isImgElement = ! ( hasParallax || isRepeated );
 
+	const hasCustomPadding = !! styleAttribute?.spacing?.padding;
+
 	const style = {
 		...( isImageBackground && ! isImgElement
 			? backgroundImageStyles( url )
@@ -76,6 +79,7 @@ export default function save( { attributes } ) {
 		overlayColorClass,
 		{
 			'has-background-dim': dimRatio !== 0,
+			'has-custom-padding': hasCustomPadding,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
 			'has-background-gradient': gradient || customGradient,