From ef7cf01e4fb7125056664cb2575980e3c208f0a7 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Apr 2022 16:19:47 +1000
Subject: [PATCH 1/2] Cover: Always allow transform from Group block, add
 handling for Row and Stack variations

---
 .../block-library/src/cover/transforms.js     | 70 ++++++++++++-------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js
index d6465fe35be3f9..afc55ad23d3669 100644
--- a/packages/block-library/src/cover/transforms.js
+++ b/packages/block-library/src/cover/transforms.js
@@ -64,36 +64,54 @@ 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,
+					layout,
+					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 ||
 					style?.color?.background ||
-					style?.color?.gradient ||
-					gradient
-				);
-			},
-			transform: (
-				{ align, anchor, backgroundColor, gradient, style },
-				innerBlocks
-			) => {
+					style?.color?.gradient
+						? undefined
+						: 50;
+
+				const newAttributes = {
+					align,
+					anchor,
+					dimRatio,
+					overlayColor: backgroundColor,
+					customOverlayColor: style?.color?.background,
+					gradient,
+					customGradient: style?.color?.gradient,
+				};
+
+				// For variations that use a flex layout (e.g. Row and Stack),
+				// wrap the block in a Cover instead of converting directly to the cover block.
+				if ( layout?.type === 'flex' ) {
+					return createBlock( 'core/cover', newAttributes, [
+						createBlock( 'core/group', attributes, innerBlocks ),
+					] );
+				}
+
 				return createBlock(
 					'core/cover',
-					{
-						align,
-						anchor,
-						overlayColor: backgroundColor,
-						customOverlayColor: style?.color?.background,
-						gradient,
-						customGradient: style?.color?.gradient,
-					},
-					innerBlocks
+					newAttributes,
+					innerBlocks?.length
+						? innerBlocks
+						: [
+								createBlock( 'core/paragraph', {
+									fontSize: 'large',
+									align: 'center',
+								} ),
+						  ]
 				);
 			},
 		},

From 6b05263fdf1458c5fea35e9e19823fc33e74d0c1 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:48:40 +1000
Subject: [PATCH 2/2] Move background color or gradient settings to parent,
 preserve Group block for all variations

---
 .../block-library/src/cover/transforms.js     | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js
index afc55ad23d3669..25da343f184195 100644
--- a/packages/block-library/src/cover/transforms.js
+++ b/packages/block-library/src/cover/transforms.js
@@ -70,20 +70,22 @@ const transforms = {
 					anchor,
 					backgroundColor,
 					gradient,
-					layout,
 					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
 						? undefined
 						: 50;
 
-				const newAttributes = {
+				// Move the background or gradient color to the parent Cover block.
+				const parentAttributes = {
 					align,
 					anchor,
 					dimRatio,
@@ -93,26 +95,29 @@ const transforms = {
 					customGradient: style?.color?.gradient,
 				};
 
-				// For variations that use a flex layout (e.g. Row and Stack),
-				// wrap the block in a Cover instead of converting directly to the cover block.
-				if ( layout?.type === 'flex' ) {
-					return createBlock( 'core/cover', newAttributes, [
-						createBlock( 'core/group', attributes, innerBlocks ),
-					] );
-				}
+				const attributesWithoutBackgroundColors = {
+					...attributes,
+					backgroundColor: undefined,
+					gradient: undefined,
+					style: {
+						...attributes?.style,
+						color: {
+							...attributes?.style?.color,
+							background: undefined,
+							gradient: undefined,
+						},
+					},
+				};
 
-				return createBlock(
-					'core/cover',
-					newAttributes,
-					innerBlocks?.length
-						? innerBlocks
-						: [
-								createBlock( 'core/paragraph', {
-									fontSize: 'large',
-									align: 'center',
-								} ),
-						  ]
-				);
+				// 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
+					),
+				] );
 			},
 		},
 	],