From ef5b5a7cb442c34d83efbff10e0fcc9847fbc4aa Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 13 Apr 2022 10:17:43 +1000
Subject: [PATCH] Cover: Always allow transform from Group block, add handling
 for Row and Stack variations (#40212)

* Cover: Always allow transform from Group block, add handling for Row and Stack variations

* Move background color or gradient settings to parent, preserve Group block for all variations
---
 .../block-library/src/cover/transforms.js     | 79 ++++++++++++-------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js
index d6465fe35be3f..25da343f18419 100644
--- a/packages/block-library/src/cover/transforms.js
+++ b/packages/block-library/src/cover/transforms.js
@@ -64,37 +64,60 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],
-			isMatch: ( { backgroundColor, gradient, style } ) => {
-				/*
-				 * Make this transformation available only if the Group has background
-				 * or gradient set, because otherwise `Cover` block displays a Placeholder.
-				 *
-				 * This helps avoid arbitrary decisions about the Cover block's background
-				 * and user confusion about the existence of previous content.
-				 */
-				return (
+			transform: ( attributes, innerBlocks ) => {
+				const {
+					align,
+					anchor,
+					backgroundColor,
+					gradient,
+					style,
+				} = attributes;
+
+				// If no background or gradient color is provided, default to 50% opacity.
+				// This matches the styling of a Cover block with a background image,
+				// in the state where a background image has been removed.
+				const dimRatio =
 					backgroundColor ||
+					gradient ||
 					style?.color?.background ||
-					style?.color?.gradient ||
-					gradient
-				);
-			},
-			transform: (
-				{ align, anchor, backgroundColor, gradient, style },
-				innerBlocks
-			) => {
-				return createBlock(
-					'core/cover',
-					{
-						align,
-						anchor,
-						overlayColor: backgroundColor,
-						customOverlayColor: style?.color?.background,
-						gradient,
-						customGradient: style?.color?.gradient,
+					style?.color?.gradient
+						? undefined
+						: 50;
+
+				// Move the background or gradient color to the parent Cover block.
+				const parentAttributes = {
+					align,
+					anchor,
+					dimRatio,
+					overlayColor: backgroundColor,
+					customOverlayColor: style?.color?.background,
+					gradient,
+					customGradient: style?.color?.gradient,
+				};
+
+				const attributesWithoutBackgroundColors = {
+					...attributes,
+					backgroundColor: undefined,
+					gradient: undefined,
+					style: {
+						...attributes?.style,
+						color: {
+							...attributes?.style?.color,
+							background: undefined,
+							gradient: undefined,
+						},
 					},
-					innerBlocks
-				);
+				};
+
+				// Preserve the block by nesting it within the Cover block,
+				// instead of converting the Group block directly to the Cover block.
+				return createBlock( 'core/cover', parentAttributes, [
+					createBlock(
+						'core/group',
+						attributesWithoutBackgroundColors,
+						innerBlocks
+					),
+				] );
 			},
 		},
 	],