WIP: [Block Library - Cover]: Add opacity to every possible background

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

@@ -22,7 +22,7 @@
 		},
 		"dimRatio": {
 			"type": "number",
-			"default": 50
+			"default": 100
 		},
 		"overlayColor": {
 			"type": "string"

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

@@ -42,7 +42,7 @@ const blockAttributes = {
 	},
 	dimRatio: {
 		type: 'number',
-		default: 50,
+		default: 100,
 	},
 	overlayColor: {
 		type: 'string',
@@ -59,19 +59,208 @@ const blockAttributes = {
 	},
 };
 
+/**
+ * Before enabling opactiy on every background, `dimRatio`
+ * had default value `50`, so we need to migrate the data
+ * to full opacity(value:100), if a `url` was not set.
+ */
+
+const migrateDimRatio = ( attributes ) => {
+	if ( !! attributes.url ) {
+		return {
+			...attributes,
+			dimRatio: attributes.dimRatio ?? 50, // This is the previous default when `url` was set.
+		};
+	}
+	return { ...attributes, dimRatio: 100 };
+};
+
 const deprecated = [
+	// Enable opacity on every background, even without a url set.
 	{
 		attributes: {
-			...blockAttributes,
-			title: {
+			url: {
 				type: 'string',
-				source: 'html',
-				selector: 'p',
 			},
-			contentAlign: {
+			id: {
+				type: 'number',
+			},
+			hasParallax: {
+				type: 'boolean',
+				default: false,
+			},
+			isRepeated: {
+				type: 'boolean',
+				default: false,
+			},
+			dimRatio: {
+				type: 'number',
+				default: 100,
+			},
+			overlayColor: {
 				type: 'string',
-				default: 'center',
 			},
+			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',
+			},
+		},
+		supports: {
+			align: true,
+			spacing: {
+				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,
+				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>
+			);
+		},
+		migrate: migrateDimRatio,
+	},
+	{
+		attributes: {
+			...blockAttributes,
 			isRepeated: {
 				type: 'boolean',
 				default: false,
@@ -202,19 +391,11 @@ const deprecated = [
 				</div>
 			);
 		},
+		migrate: migrateDimRatio,
 	},
 	{
 		attributes: {
 			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-			contentAlign: {
-				type: 'string',
-				default: 'center',
-			},
 			minHeight: {
 				type: 'number',
 			},
@@ -308,19 +489,11 @@ const deprecated = [
 				</div>
 			);
 		},
+		migrate: migrateDimRatio,
 	},
 	{
 		attributes: {
 			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-			contentAlign: {
-				type: 'string',
-				default: 'center',
-			},
 			minHeight: {
 				type: 'number',
 			},
@@ -414,6 +587,7 @@ const deprecated = [
 				</div>
 			);
 		},
+		migrate: migrateDimRatio,
 	},
 	{
 		attributes: {
@@ -493,8 +667,11 @@ const deprecated = [
 			);
 		},
 		migrate( attributes ) {
+			const newAttributes = migrateDimRatio(
+				omit( attributes, [ 'title', 'contentAlign' ] )
+			);
 			return [
-				omit( attributes, [ 'title', 'contentAlign' ] ),
+				newAttributes,
 				[
 					createBlock( 'core/paragraph', {
 						content: attributes.title,
@@ -571,8 +748,11 @@ const deprecated = [
 			);
 		},
 		migrate( attributes ) {
+			const newAttributes = migrateDimRatio(
+				omit( attributes, [ 'title', 'contentAlign', 'align' ] )
+			);
 			return [
-				omit( attributes, [ 'title', 'contentAlign', 'align' ] ),
+				newAttributes,
 				[
 					createBlock( 'core/paragraph', {
 						content: attributes.title,
@@ -623,8 +803,11 @@ const deprecated = [
 			);
 		},
 		migrate( attributes ) {
+			const newAttributes = migrateDimRatio(
+				omit( attributes, [ 'title', 'contentAlign', 'align' ] )
+			);
 			return [
-				omit( attributes, [ 'title', 'contentAlign', 'align' ] ),
+				newAttributes,
 				[
 					createBlock( 'core/paragraph', {
 						content: attributes.title,