Skip enforcing inline color styles and fix gradients

packages/block-editor/src/hooks/color.js

@@ -611,13 +611,19 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 		}
 		const extraStyles = {};
 
-		if ( textColor ) {
+		if (
+			textColor &&
+			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
+		) {
 			extraStyles.color = getColorObjectByAttributeValues(
 				colors,
 				textColor
 			)?.color;
 		}
-		if ( backgroundColor ) {
+		if (
+			backgroundColor &&
+			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
+		) {
 			extraStyles.backgroundColor = getColorObjectByAttributeValues(
 				colors,
 				backgroundColor

packages/block-editor/src/hooks/style.js

@@ -218,6 +218,19 @@ const skipSerializationPathsSave = {
 	[ `${ SPACING_SUPPORT_KEY }` ]: [ 'spacing.blockGap' ],
 };
 
+/**
+ * A dictionary used to normalize feature names between support flags, style
+ * object properties and __experimentSkipSerialization configuration arrays.
+ *
+ * This allows not having to provide a migration for a support flag and possible
+ * backwards compatibility bridges, while still achieving consistency between
+ * the support flag and the skip serialization array.
+ *
+ * @constant
+ * @type {Record<string, string>}
+ */
+const renamedFeatures = { gradients: 'gradient' };
+
 /**
  * Override props assigned to save component to inject the CSS variables definition.
  *
@@ -248,7 +261,8 @@ export function addSaveProps(
 		}
 
 		if ( Array.isArray( skipSerialization ) ) {
-			skipSerialization.forEach( ( feature ) => {
+			skipSerialization.forEach( ( featureName ) => {
+				const feature = renamedFeatures[ featureName ] || featureName;
 				style = omit( style, [ [ ...path, feature ] ] );
 			} );
 		}