Mobile - Cover block: Fixes setting a color, gradient. It also adds c…

…ompatibility for resetting the overlay color to the default one and fixes a case where the placeholder would be visible after creating the block and clearing its overlay color/media.

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -21,6 +21,7 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 		return settings.map(
 			( {
 				onColorChange,
+				onColorCleared,
 				colorValue,
 				onGradientChange,
 				gradientValue,
@@ -33,6 +34,7 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 							colorValue: gradientValue || colorValue,
 							gradientValue,
 							onGradientChange,
+							onColorCleared,
 							label,
 						} );
 					} }

packages/block-library/src/cover/edit.native.js

@@ -40,8 +40,9 @@ import {
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
-	withColors,
-	__experimentalUseGradient,
+	getColorObjectByColorValue,
+	getColorObjectByAttributeValues,
+	getGradientValueBySlug,
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -83,13 +84,13 @@ const Cover = ( {
 	getStylesFromColorScheme,
 	isParentSelected,
 	onFocus,
-	overlayColor,
 	setAttributes,
 	openGeneralSidebar,
 	closeSettingsBottomSheet,
 	isSelected,
 	selectBlock,
 	blockWidth,
+	hasInnerBlocks,
 } ) => {
 	const {
 		backgroundType,
@@ -103,6 +104,9 @@ const Cover = ( {
 		minHeightUnit = 'px',
 		allowedBlocks,
 		templateLock,
+		customGradient,
+		gradient,
+		overlayColor,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -145,14 +149,20 @@ const Cover = ( {
 	const coverDefaultPalette = {
 		colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
 	};
-
-	const { gradientValue } = __experimentalUseGradient();
+	const gradients = useSetting( 'color.gradients' ) || [];
+	const gradientValue =
+		customGradient || getGradientValueBySlug( gradients, gradient );
+	const overlayColorValue = getColorObjectByAttributeValues(
+		colorsDefault,
+		overlayColor
+	);
 
 	const hasBackground = !! (
 		url ||
 		( style && style.color && style.color.background ) ||
 		attributes.overlayColor ||
-		overlayColor.color ||
+		overlayColorValue.color ||
+		customOverlayColor ||
 		gradientValue
 	);
 
@@ -225,10 +235,12 @@ const Cover = ( {
 	}, [ closeSettingsBottomSheet ] );
 
 	function setColor( color ) {
+		const colorValue = getColorObjectByColorValue( colorsDefault, color );
+
 		setAttributes( {
 			// clear all related attributes (only one should be set)
-			overlayColor: undefined,
-			customOverlayColor: color,
+			overlayColor: colorValue?.slug ?? undefined,
+			customOverlayColor: ( ! colorValue?.slug && color ) ?? undefined,
 			gradient: undefined,
 			customGradient: undefined,
 		} );
@@ -251,12 +263,12 @@ const Cover = ( {
 		! gradientValue && {
 			backgroundColor:
 				customOverlayColor ||
-				overlayColor?.color ||
+				overlayColorValue?.color ||
 				style?.color?.background ||
 				styles.overlay?.color,
 		},
 		// While we don't support theme colors we add a default bg color
-		! overlayColor.color && ! url ? backgroundColor : {},
+		! overlayColorValue.color && ! url ? backgroundColor : {},
 		isImage &&
 			isParentSelected &&
 			! isUploadInProgress &&
@@ -432,7 +444,10 @@ const Cover = ( {
 		</TouchableWithoutFeedback>
 	);
 
-	if ( ! hasBackground || isCustomColorPickerShowing ) {
+	if (
+		( ! hasBackground && ! hasInnerBlocks ) ||
+		isCustomColorPickerShowing
+	) {
 		return (
 			<View>
 				{ isCustomColorPickerShowing && colorPickerControls }
@@ -575,17 +590,21 @@ const Cover = ( {
 };
 
 export default compose( [
-	withColors( { overlayColor: 'background-color' } ),
 	withSelect( ( select, { clientId } ) => {
-		const { getSelectedBlockClientId } = select( blockEditorStore );
+		const { getSelectedBlockClientId, getBlock } = select(
+			blockEditorStore
+		);
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
 		const { getSettings } = select( blockEditorStore );
 
+		const hasInnerBlocks = getBlock( clientId )?.innerBlocks.length > 0;
+
 		return {
 			settings: getSettings(),
 			isParentSelected: selectedBlockClientId === clientId,
+			hasInnerBlocks,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {

packages/block-library/src/cover/overlay-color-settings.native.js

@@ -74,13 +74,23 @@ function OverlayColorSettings( {
 			}
 		};
 
+		const onColorCleared = () => {
+			setAttributes( {
+				overlayColor: undefined,
+				customOverlayColor: undefined,
+				gradient: undefined,
+				customGradient: undefined,
+			} );
+		};
+
 		return [
 			{
 				label: __( 'Color' ),
 				onColorChange,
 				colorValue,
 				gradientValue,
 				onGradientChange,
+				onColorCleared,
 			},
 		];
 	}, [ colorValue, gradientValue, colors, gradients ] );

packages/components/src/mobile/color-settings/index.native.js

@@ -27,6 +27,7 @@ const ColorSettingsMemo = memo(
 		colorValue,
 		gradientValue,
 		onGradientChange,
+		onColorCleared,
 		label,
 		hideNavigation,
 	} ) => {
@@ -44,6 +45,7 @@ const ColorSettingsMemo = memo(
 						colorValue,
 						gradientValue,
 						onGradientChange,
+						onColorCleared,
 						label,
 						hideNavigation,
 					} }

packages/components/src/mobile/color-settings/palette.screen.native.js

@@ -36,6 +36,7 @@ const PaletteScreen = () => {
 		label,
 		onColorChange,
 		onGradientChange,
+		onColorCleared,
 		colorValue,
 		defaultSettings,
 		hideNavigation = false,
@@ -85,6 +86,10 @@ const PaletteScreen = () => {
 		} else {
 			onGradientChange( '' );
 		}
+
+		if ( onColorCleared ) {
+			onColorCleared();
+		}
 	}
 
 	function onCustomPress() {