Cover: Only show overlay controls when color support enabled (#50115)

WordPress · May 1, 2023 · b2010ab · b2010ab
1 parent 76cf678
commit b2010ab
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 58 deletions.
diff --git a/.../block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/.../block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -61,7 +61,12 @@ export default function useMultipleOriginColorsAndGradients() {
 			} );
 		}
 		return result;
-	}, [ defaultColors, themeColors, customColors ] );
+	}, [
+		defaultColors,
+		themeColors,
+		customColors,
+		shouldDisplayDefaultColors,
+	] );
 
 	const customGradients = useSetting( 'color.gradients.custom' );
 	const themeGradients = useSetting( 'color.gradients.theme' );
@@ -103,7 +108,16 @@ export default function useMultipleOriginColorsAndGradients() {
 			} );
 		}
 		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+
+	colorGradientSettings.hasColorsOrGradients =
+		!! colorGradientSettings.colors.length ||
+		!! colorGradientSettings.gradients.length;
 
 	return colorGradientSettings;
 }
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -249,62 +249,64 @@ export default function CoverInspectorControls( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor.color,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: setOverlayColor,
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => {
-						// If there's a media background the dimRatio will be
-						// defaulted to 50 whereas it will be 100 for colors.
-						return dimRatio === undefined
-							? false
-							: dimRatio !== ( url ? 50 : 100 );
-					} }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () =>
-						setAttributes( { dimRatio: url ? 50 : 100 } )
-					}
-					resetAllFilter={ () => ( {
-						dimRatio: url ? 50 : 100,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						__nextHasNoMarginBottom
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					<ColorGradientSettingsDropdown
+						__experimentalIsRenderedInSidebar
+						settings={ [
+							{
+								colorValue: overlayColor.color,
+								gradientValue,
+								label: __( 'Overlay' ),
+								onColorChange: setOverlayColor,
+								onGradientChange: setGradient,
+								isShownByDefault: true,
+								resetAllFilter: () => ( {
+									overlayColor: undefined,
+									customOverlayColor: undefined,
+									gradient: undefined,
+									customGradient: undefined,
+								} ),
+							},
+						] }
+						panelId={ clientId }
+						{ ...colorGradientSettings }
+					/>
+					<ToolsPanelItem
+						hasValue={ () => {
+							// If there's a media background the dimRatio will be
+							// defaulted to 50 whereas it will be 100 for colors.
+							return dimRatio === undefined
+								? false
+								: dimRatio !== ( url ? 50 : 100 );
+						} }
 						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRation ) =>
-							setAttributes( {
-								dimRatio: newDimRation,
-							} )
+						onDeselect={ () =>
+							setAttributes( { dimRatio: url ? 50 : 100 } )
 						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
+						resetAllFilter={ () => ( {
+							dimRatio: url ? 50 : 100,
+						} ) }
+						isShownByDefault
+						panelId={ clientId }
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							label={ __( 'Overlay opacity' ) }
+							value={ dimRatio }
+							onChange={ ( newDimRation ) =>
+								setAttributes( {
+									dimRatio: newDimRation,
+								} )
+							}
+							min={ 0 }
+							max={ 100 }
+							step={ 10 }
+							required
+						/>
+					</ToolsPanelItem>
+				</InspectorControls>
+			) }
 			<InspectorControls group="dimensions">
 				<ToolsPanelItem
 					hasValue={ () => !! minHeight }

diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
@@ -12,9 +12,34 @@ import {
 	selectBlock,
 } from 'test/integration/helpers/integration-test-editor';
 
-async function setup( attributes ) {
+const defaultSettings = {
+	__experimentalFeatures: {
+		color: {
+			defaultPalette: true,
+			defaultGradients: true,
+			palette: {
+				default: [ { name: 'Black', slug: 'black', color: '#000000' } ],
+			},
+		},
+	},
+	colors: [ { name: 'Black', slug: 'black', color: '#000000' } ],
+	disableCustomColors: false,
+	disableCustomGradients: false,
+};
+
+const disabledColorSettings = {
+	color: {
+		defaultPalette: false,
+		defaultGradients: false,
+	},
+	disableCustomColors: true,
+	disableCustomGradients: true,
+};
+
+async function setup( attributes, useCoreBlocks, customSettings ) {
 	const testBlock = { name: 'core/cover', attributes };
-	return initializeEditor( testBlock );
+	const settings = customSettings || defaultSettings;
+	return initializeEditor( testBlock, useCoreBlocks, settings );
 }
 
 async function createAndSelectBlock() {
@@ -296,6 +321,35 @@ describe( 'Cover block', () => {
 
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
 			} );
+
+			describe( 'when colors are disabled', () => {
+				test( 'does not render overlay control', async () => {
+					await setup( undefined, true, disabledColorSettings );
+					await createAndSelectBlock();
+					await userEvent.click(
+						screen.getByRole( 'tab', { name: 'Styles' } )
+					);
+
+					const overlayControl = screen.queryByRole( 'button', {
+						name: 'Overlay',
+					} );
+
+					expect( overlayControl ).not.toBeInTheDocument();
+				} );
+				test( 'does not render opacity control', async () => {
+					await setup( undefined, true, disabledColorSettings );
+					await createAndSelectBlock();
+					await userEvent.click(
+						screen.getByRole( 'tab', { name: 'Styles' } )
+					);
+
+					const opacityControl = screen.queryByRole( 'slider', {
+						name: 'Overlay opacity',
+					} );
+
+					expect( opacityControl ).not.toBeInTheDocument();
+				} );
+			} );
 		} );
 
 		describe( 'Dimensions panel', () => {