Mobile - Cover block - Fixes color settings and placeholder visibility (

WordPress#37372)

* Mobile - Cover block: Fixes setting a color, gradient. It also adds compatibility 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.

* Mobile - Cover block: Show add media button if there's a background or if there's one inner block present

* Mobile - Cover block - Update tests: Adds test cases for setting the overlay solid and gradient color, as well as resetting the overlay color.

* Mobile - Cover - Add tests to check changing between solid and gradient colors

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,18 +149,24 @@ 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
 	);
 
-	const hasOnlyColorBackground = ! url && hasBackground;
+	const hasOnlyColorBackground = ! url && ( hasBackground || hasInnerBlocks );
 
 	const [
 		isCustomColorPickerShowing,
@@ -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/block-library/src/cover/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
+"<!-- wp:cover -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
+"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-vivid-red-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings toggles between solid colors and gradients 1`] = `
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;