Fix: Color Gradients component was not able to handle only gra… (#19925)

packages/block-editor/src/components/colors-gradients/control.js

@@ -109,7 +109,7 @@ function ColorGradientControlInner( {
 						</Button>
 					</ButtonGroup>
 				) }
-				{ currentTab === 'color' && (
+				{ ( currentTab === 'color' || ! canChooseAGradient ) && (
 					<ColorPalette
 						value={ colorValue }
 						onChange={ canChooseAGradient ?
@@ -122,7 +122,7 @@ function ColorGradientControlInner( {
 						{ ... { colors, disableCustomColors } }
 					/>
 				) }
-				{ currentTab === 'gradient' && (
+				{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
 					<GradientPicker
 						value={ gradientValue }
 						onChange={ canChooseAColor ?

packages/block-editor/src/components/colors-gradients/test/control.js

@@ -0,0 +1,146 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from '../control';
+
+const getButtonWithTestPredicate = ( text ) => ( element ) => {
+	return (
+		element.type === 'button' &&
+		element.children[ 0 ] === text &&
+		element.children.length === 1
+	);
+};
+
+const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => ( element ) => {
+	return (
+		element.type === 'button' &&
+		element.props[ 'aria-label' ] &&
+		element.props[ 'aria-label' ].startsWith( ariaLabelStart )
+	);
+};
+
+const colorTabButtonPredicate = getButtonWithTestPredicate( 'Solid Color' );
+const gradientTabButtonPredicate = getButtonWithTestPredicate( 'Gradient' );
+
+describe( 'ColorPaletteControl', () => {
+	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
+		let wrapper;
+
+		await act( async () => {
+			wrapper = create(
+				<ColorGradientControl
+					label="Test Color Gradient"
+					colorValue="#f00"
+					colors={ [ { color: '#f00', name: 'red' }, { color: '#0f0', name: 'green' } ] }
+					gradients={ [ {
+						gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					}, {
+						gradient: 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					} ] }
+					disableCustomColors={ false }
+					disableCustomGradients={ false }
+					onColorChange={ noop }
+					onGradientChange={ noop }
+				/>
+			);
+		} );
+
+		// Is showing the two tab buttons.
+		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength( 1 );
+		expect( wrapper.root.findAll( gradientTabButtonPredicate ) ).toHaveLength( 1 );
+
+		// Is showing the two predefined Colors.
+		expect( wrapper.root.findAll(
+			( element ) => ( element.type === 'button' && element.props && element.props[ 'aria-label' ] && element.props[ 'aria-label' ].startsWith( 'Color:' ) )
+		) ).toHaveLength( 2 );
+
+		// Is showing the custom color picker.
+		expect( wrapper.root.findAll(
+			getButtonWithTestPredicate( 'Custom Color' )
+		) ).toHaveLength( 1 );
+	} );
+
+	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
+		let wrapper;
+
+		await act( async () => {
+			wrapper = create(
+				<ColorGradientControl
+					label="Test Color Gradient"
+					colorValue="#f00"
+					colors={ [ { color: '#f00', name: 'red' }, { color: '#0f0', name: 'green' } ] }
+					gradients={ [] }
+					disableCustomColors={ false }
+					disableCustomGradients={ true }
+					onColorChange={ noop }
+					onGradientChange={ noop }
+				/>
+			);
+		} );
+
+		// Is not showing the two tab buttons.
+		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength( 0 );
+		expect( wrapper.root.findAll( gradientTabButtonPredicate ) ).toHaveLength( 0 );
+
+		// Is showing the two predefined Colors.
+		expect( wrapper.root.findAll(
+			getButtonWithAriaLabelStartPredicate( 'Color:' )
+		) ).toHaveLength( 2 );
+
+		// Is showing the custom color picker.
+		expect( wrapper.root.findAll(
+			getButtonWithTestPredicate( 'Custom Color' )
+		) ).toHaveLength( 1 );
+	} );
+
+	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
+		let wrapper;
+
+		await act( async () => {
+			wrapper = create(
+				<ColorGradientControl
+					label="Test Color Gradient"
+					colorValue="#f00"
+					colors={ [] }
+					gradients={ [ {
+						gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					}, {
+						gradient: 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					} ] }
+					disableCustomColors={ true }
+					disableCustomGradients={ false }
+					onColorChange={ noop }
+					onGradientChange={ noop }
+				/>
+			);
+		} );
+
+		// Is not showing the two tab buttons.
+		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength( 0 );
+		expect( wrapper.root.findAll( gradientTabButtonPredicate ) ).toHaveLength( 0 );
+
+		// Is showing the two predefined Gradients.
+		expect( wrapper.root.findAll(
+			getButtonWithAriaLabelStartPredicate( 'Gradient:' )
+		) ).toHaveLength( 2 );
+
+		// Is showing the custom gradient picker.
+		expect( wrapper.root.findAll(
+			( element ) => ( element.props && element.props.className && element.props.className.includes( 'components-custom-gradient-picker' ) )
+		).length ).toBeGreaterThanOrEqual( 1 );
+	} );
+} );