diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 43703b61e5ac44..395b56757690be 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -95,9 +95,9 @@ function gutenberg_render_background_support( $block_content, $block ) {
 
 			// Remove any existing background color if a background image and gradient is set.
 			if ( ! empty( $background_gradient_styles['gradient'] ) && ! empty( $background_styles ) ) {
-                // This is just testing. The style engine should be smart enough to remove the classname for a preset, where
-                // it's used in the CSS string.
-                // And this is done in the site editor when editing the block.
+				// This is just testing. The style engine should be smart enough to remove the classname for a preset, where
+				// it's used in the CSS string.
+				// And this is done in the site editor when editing the block.
 				if ( ! empty( $styles['classnames'] ) && $preset_gradient_color ) {
 					foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
 						if ( 'has-background' !== $class_name ) {
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index fcc2b249d2229f..37bacaf1b050a0 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -42,6 +42,139 @@ const migrateAttributes = ( attributes ) => {
 };
 
 const deprecated = [
+	// Version with preset gradient color and background image.
+	// If there is a background image and gradient preset, remove the gradient classname.
+	{
+		attributes: {
+			tagName: {
+				type: 'string',
+				default: 'div',
+			},
+			templateLock: {
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', 'contentOnly', false ],
+			},
+			allowedBlocks: {
+				type: 'array',
+			},
+		},
+		supports: {
+			__experimentalOnEnter: true,
+			__experimentalOnMerge: true,
+			__experimentalSettings: true,
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			ariaLabel: true,
+			html: false,
+			background: {
+				backgroundImage: true,
+				backgroundSize: true,
+				__experimentalDefaultControls: {
+					backgroundImage: true,
+				},
+			},
+			color: {
+				gradients: true,
+				heading: true,
+				button: true,
+				link: true,
+				__experimentalDefaultControls: {
+					background: true,
+					text: true,
+				},
+			},
+			spacing: {
+				margin: [ 'top', 'bottom' ],
+				padding: true,
+				blockGap: true,
+				__experimentalDefaultControls: {
+					padding: true,
+					blockGap: true,
+				},
+			},
+			dimensions: {
+				minHeight: true,
+			},
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+				__experimentalDefaultControls: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+				},
+			},
+			position: {
+				sticky: true,
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontFamily: true,
+				__experimentalFontWeight: true,
+				__experimentalFontStyle: true,
+				__experimentalTextTransform: true,
+				__experimentalTextDecoration: true,
+				__experimentalLetterSpacing: true,
+				__experimentalDefaultControls: {
+					fontSize: true,
+				},
+			},
+			layout: {
+				allowSizingOnChildren: true,
+			},
+			interactivity: {
+				clientNavigation: true,
+			},
+		},
+		save( { attributes: { tagName: Tag } } ) {
+			return (
+				<Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />
+			);
+		},
+		isEligible( { gradient, style } ) {
+			return (
+				gradient &&
+				( typeof style?.background?.backgroundImage === 'string' ||
+					typeof style?.background?.backgroundImage?.url ===
+						'string' )
+			);
+		},
+		migrate( attributes ) {
+			const { style = null, gradient } = attributes;
+
+			const hasBackgroundImage =
+				typeof style?.background?.backgroundImage === 'string' ||
+				typeof style?.background?.backgroundImage?.url === 'string';
+
+			if ( hasBackgroundImage && gradient ) {
+				let newClassName = attributes?.className;
+				if ( newClassName ) {
+					const regex = new RegExp(
+						`has-${ gradient }-gradient-background[\\s]?`,
+						'g'
+					);
+					newClassName = newClassName.replace( regex, '' ).trim();
+				}
+				return {
+					...attributes,
+					className: newClassName ? newClassName : undefined,
+					style: {
+						...style,
+						color: {
+							...style.color,
+							gradient: `var(--wp--preset--gradient--${ gradient })`,
+						},
+					},
+					gradient: null,
+				};
+			}
+			return attributes;
+		},
+	},
 	// Version with default layout.
 	{
 		attributes: {