From 33784ae1af21c4216ed457a4026fa1d0c3d41608 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 24 Jun 2022 10:28:12 +0100
Subject: [PATCH 01/11] Try tabs in color panels

---
 .../components/colors-gradients/control.js    | 35 +++++++++---------
 .../components/colors-gradients/style.scss    | 11 ++++++
 .../global-styles/screen-color-palette.js     | 36 +++++++++----------
 .../src/components/global-styles/style.scss   |  5 +++
 4 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index ff0cb10f182f75..8d38e8e901a2f3 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -11,8 +11,7 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	TabPanel,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
@@ -78,22 +77,24 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<ToggleGroupControl
-							value={ currentTab }
-							onChange={ setCurrentTab }
-							label={ __( 'Select color type' ) }
-							hideLabelFromVision
-							isBlock
+						<TabPanel
+							className="block-editor-color-gradient-control__tabs"
+							onSelect={ setCurrentTab }
+							tabs={ [
+								{
+									name: 'color',
+									title: 'Solid color',
+									value: 'color',
+								},
+								{
+									name: 'gradient',
+									title: 'Gradient',
+									value: 'gradient',
+								},
+							] }
 						>
-							<ToggleGroupControlOption
-								value="color"
-								label={ __( 'Solid' ) }
-							/>
-							<ToggleGroupControlOption
-								value="gradient"
-								label={ __( 'Gradient' ) }
-							/>
-						</ToggleGroupControl>
+						{ ( tab ) => <p className="screen-reader-text">Selected tab: { tab.title }</p> }
+						</TabPanel>
 					) }
 					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
 						<ColorPalette
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index e2794bee8bdc63..1f4fe20c603a3c 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -42,6 +42,12 @@
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
 	width: $sidebar-width;
+
+	.block-editor-color-gradient-control__tabs {
+		margin-top: - $grid-unit-10;
+		margin-left: - $grid-unit-10;
+		margin-right: - $grid-unit-10;
+	}
 }
 
 
@@ -100,3 +106,8 @@
 .block-editor-panel-color-gradient-settings__dropdown {
 	width: 100%;
 }
+
+.block-editor-color-gradient-control__tabs {
+	border-bottom: 1px solid $gray-300;
+	margin-bottom: $grid-unit-10;
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index 554c16cbb83c14..1e12e48dc6dc40 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	TabPanel,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -26,23 +25,24 @@ function ScreenColorPalette( { name } ) {
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<ToggleGroupControl
-				className="edit-site-screen-color-palette-toggle"
-				value={ currentTab }
-				onChange={ setCurrentTab }
-				label={ __( 'Select palette type' ) }
-				hideLabelFromVision
-				isBlock
+			<TabPanel
+				className="block-editor-color-gradient-control__tabs"
+				onSelect={ setCurrentTab }
+				tabs={ [
+					{
+						name: 'solid',
+						title: 'Solid color',
+						value: 'solid',
+					},
+					{
+						name: 'gradient',
+						title: 'Gradient',
+						value: 'gradient',
+					},
+				] }
 			>
-				<ToggleGroupControlOption
-					value="solid"
-					label={ __( 'Solid' ) }
-				/>
-				<ToggleGroupControlOption
-					value="gradient"
-					label={ __( 'Gradient' ) }
-				/>
-			</ToggleGroupControl>
+			{ ( tab ) => <p className="screen-reader-text">Selected tab: { tab.title }</p> }
+			</TabPanel>
 			{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }
 			{ currentTab === 'gradient' && (
 				<GradientPalettePanel name={ name } />
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index aee80fd2d4d04b..f6629537037bca 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -80,6 +80,11 @@
 .edit-site-screen-button-color__control,
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
+
+	.block-editor-color-gradient-control__tabs {
+		margin: - $grid-unit-20;
+		margin-bottom: $grid-unit-20;
+	}
 }
 
 .edit-site-global-styles-variations_item {

From 7859cef99f26899af088213d88d654683f7a841a Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 5 Jul 2022 12:22:37 +0100
Subject: [PATCH 02/11] Optimise

---
 .../components/colors-gradients/control.js    | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 8d38e8e901a2f3..f58be3dc82f5f9 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -29,6 +29,19 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
+const TAB_COLOR = {
+	name: 'color',
+	title: 'Solid color',
+	value: 'color',
+};
+const TAB_GRADIENT = {
+	name: 'gradient',
+	title: 'Gradient',
+	value: 'gradient',
+};
+
+const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
+
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -52,7 +65,9 @@ function ColorGradientControlInner( {
 		onGradientChange &&
 		( ! isEmpty( gradients ) || ! disableCustomGradients );
 	const [ currentTab, setCurrentTab ] = useState(
-		gradientValue ? 'gradient' : !! canChooseAColor && 'color'
+		gradientValue
+			? TAB_GRADIENT.value
+			: !! canChooseAColor && TAB_COLOR.value
 	);
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
@@ -80,23 +95,13 @@ function ColorGradientControlInner( {
 						<TabPanel
 							className="block-editor-color-gradient-control__tabs"
 							onSelect={ setCurrentTab }
-							tabs={ [
-								{
-									name: 'color',
-									title: 'Solid color',
-									value: 'color',
-								},
-								{
-									name: 'gradient',
-									title: 'Gradient',
-									value: 'gradient',
-								},
-							] }
+							tabs={ TABS_SETTINGS }
 						>
 						{ ( tab ) => <p className="screen-reader-text">Selected tab: { tab.title }</p> }
 						</TabPanel>
 					) }
-					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
+					{ ( currentTab === TAB_COLOR.value ||
+						! canChooseAGradient ) && (
 						<ColorPalette
 							value={ colorValue }
 							onChange={
@@ -118,7 +123,8 @@ function ColorGradientControlInner( {
 							enableAlpha={ enableAlpha }
 						/>
 					) }
-					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
+					{ ( currentTab === TAB_GRADIENT.value ||
+						! canChooseAColor ) && (
 						<GradientPicker
 							value={ gradientValue }
 							onChange={

From 8d1a7ff84827b5b34ba1737b414040f953cca833 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 09:33:00 +0900
Subject: [PATCH 03/11] Fix TabPanel usage

---
 .../components/colors-gradients/control.js    | 109 +++++++++---------
 1 file changed, 55 insertions(+), 54 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index f58be3dc82f5f9..edbcf2414271ac 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -7,7 +7,6 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
@@ -15,7 +14,6 @@ import {
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,15 +62,57 @@ function ColorGradientControlInner( {
 	const canChooseAGradient =
 		onGradientChange &&
 		( ! isEmpty( gradients ) || ! disableCustomGradients );
-	const [ currentTab, setCurrentTab ] = useState(
-		gradientValue
-			? TAB_GRADIENT.value
-			: !! canChooseAColor && TAB_COLOR.value
-	);
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
 		return null;
 	}
+
+	const tabPanels = {
+		[ TAB_COLOR.value ]: (
+			<ColorPalette
+				value={ colorValue }
+				onChange={
+					canChooseAGradient
+						? ( newColor ) => {
+								onColorChange( newColor );
+								onGradientChange();
+						  }
+						: onColorChange
+				}
+				{ ...{ colors, disableCustomColors } }
+				__experimentalHasMultipleOrigins={
+					__experimentalHasMultipleOrigins
+				}
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				clearable={ clearable }
+				enableAlpha={ enableAlpha }
+			/>
+		),
+		[ TAB_GRADIENT.value ]: (
+			<GradientPicker
+				value={ gradientValue }
+				onChange={
+					canChooseAColor
+						? ( newGradient ) => {
+								onGradientChange( newGradient );
+								onColorChange();
+						  }
+						: onGradientChange
+				}
+				{ ...{ gradients, disableCustomGradients } }
+				__experimentalHasMultipleOrigins={
+					__experimentalHasMultipleOrigins
+				}
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				clearable={ clearable }
+			/>
+		),
+	};
+
 	return (
 		<BaseControl
 			className={ classnames(
@@ -94,57 +134,18 @@ function ColorGradientControlInner( {
 					{ canChooseAColor && canChooseAGradient && (
 						<TabPanel
 							className="block-editor-color-gradient-control__tabs"
-							onSelect={ setCurrentTab }
 							tabs={ TABS_SETTINGS }
+							initialTabName={
+								gradientValue
+									? TAB_GRADIENT.value
+									: !! canChooseAColor && TAB_COLOR.value
+							}
 						>
-						{ ( tab ) => <p className="screen-reader-text">Selected tab: { tab.title }</p> }
+							{ ( tab ) => tabPanels[ tab.value ] }
 						</TabPanel>
 					) }
-					{ ( currentTab === TAB_COLOR.value ||
-						! canChooseAGradient ) && (
-						<ColorPalette
-							value={ colorValue }
-							onChange={
-								canChooseAGradient
-									? ( newColor ) => {
-											onColorChange( newColor );
-											onGradientChange();
-									  }
-									: onColorChange
-							}
-							{ ...{ colors, disableCustomColors } }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-							enableAlpha={ enableAlpha }
-						/>
-					) }
-					{ ( currentTab === TAB_GRADIENT.value ||
-						! canChooseAColor ) && (
-						<GradientPicker
-							value={ gradientValue }
-							onChange={
-								canChooseAColor
-									? ( newGradient ) => {
-											onGradientChange( newGradient );
-											onColorChange();
-									  }
-									: onGradientChange
-							}
-							{ ...{ gradients, disableCustomGradients } }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-						/>
-					) }
+					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
+					{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }
 				</VStack>
 			</fieldset>
 		</BaseControl>

From 733ae8b93d8d2a10102c47ad5c4798175e7296c4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 10:11:13 +0900
Subject: [PATCH 04/11] Fix styles

---
 .../src/components/colors-gradients/control.js           | 6 +++++-
 .../src/components/colors-gradients/style.scss           | 9 ++++++---
 .../edit-site/src/components/global-styles/style.scss    | 5 ++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index edbcf2414271ac..199d5e6942daac 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -141,7 +141,11 @@ function ColorGradientControlInner( {
 									: !! canChooseAColor && TAB_COLOR.value
 							}
 						>
-							{ ( tab ) => tabPanels[ tab.value ] }
+							{ ( tab ) => (
+								<div className="block-editor-color-gradient-control__tab-panel">
+									{ tabPanels[ tab.value ] }
+								</div>
+							) }
 						</TabPanel>
 					) }
 					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 1f4fe20c603a3c..37eba2e38ac8e0 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -48,6 +48,10 @@
 		margin-left: - $grid-unit-10;
 		margin-right: - $grid-unit-10;
 	}
+
+	.block-editor-color-gradient-control__tab-panel {
+		padding: $grid-unit-10;
+	}
 }
 
 
@@ -107,7 +111,6 @@
 	width: 100%;
 }
 
-.block-editor-color-gradient-control__tabs {
-	border-bottom: 1px solid $gray-300;
-	margin-bottom: $grid-unit-10;
+.block-editor-color-gradient-control__tab-panel {
+	border-top: 1px solid $gray-300;
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index f6629537037bca..38ae8933d23d44 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -83,7 +83,10 @@
 
 	.block-editor-color-gradient-control__tabs {
 		margin: - $grid-unit-20;
-		margin-bottom: $grid-unit-20;
+	}
+
+	.block-editor-color-gradient-control__tab-panel {
+		padding: $grid-unit-20;
 	}
 }
 

From 47181826010560ba502d2456127317de1c7dde3c Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 10:49:04 +0900
Subject: [PATCH 05/11] Remove copypasta on screen-link-color

---
 .../edit-site/src/components/global-styles/screen-link-color.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index 8154bb5584f628..2ceb6eee2e5cb8 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -75,7 +75,7 @@ function ScreenLinkColor( { name } ) {
 				) }
 			/>
 
-			<TabPanel className="my-tab-panel" tabs={ tabs }>
+			<TabPanel tabs={ tabs }>
 				{ ( tab ) => {
 					const pseudoSelectorConfig =
 						pseudoStates[ tab.name ] ?? null;

From a48c69bcd791e20000e3aad404f7d2b153de0dc7 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 10:49:55 +0900
Subject: [PATCH 06/11] Fix usage in screen-color-palette

---
 .../global-styles/screen-color-palette.js     | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index 1e12e48dc6dc40..e19d1939dab8e4 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	TabPanel,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { TabPanel } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,8 +12,6 @@ import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
-	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-
 	return (
 		<>
 			<ScreenHeader
@@ -26,8 +21,6 @@ function ScreenColorPalette( { name } ) {
 				) }
 			/>
 			<TabPanel
-				className="block-editor-color-gradient-control__tabs"
-				onSelect={ setCurrentTab }
 				tabs={ [
 					{
 						name: 'solid',
@@ -41,12 +34,17 @@ function ScreenColorPalette( { name } ) {
 					},
 				] }
 			>
-			{ ( tab ) => <p className="screen-reader-text">Selected tab: { tab.title }</p> }
+				{ ( tab ) => (
+					<>
+						{ tab.value === 'solid' && (
+							<ColorPalettePanel name={ name } />
+						) }
+						{ tab.value === 'gradient' && (
+							<GradientPalettePanel name={ name } />
+						) }
+					</>
+				) }
 			</TabPanel>
-			{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }
-			{ currentTab === 'gradient' && (
-				<GradientPalettePanel name={ name } />
-			) }
 		</>
 	);
 }

From 1b7a34ae4423f117153117bb6bc059d66e13144e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 10:57:11 +0900
Subject: [PATCH 07/11] Fix styles in screen-background-color

---
 .../edit-site/src/components/global-styles/style.scss    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 38ae8933d23d44..5a2d9e38cb1b90 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -77,14 +77,11 @@
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
 	padding: $grid-unit-20;
+}
 
-	.block-editor-color-gradient-control__tabs {
-		margin: - $grid-unit-20;
-	}
-
+.edit-site-screen-background-color__control {
 	.block-editor-color-gradient-control__tab-panel {
 		padding: $grid-unit-20;
 	}

From 461c0f92e5146d77bda40795e2c029a8e3de8a2a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 12:11:37 +0900
Subject: [PATCH 08/11] Remove dead CSS

---
 .../edit-site/src/components/global-styles/style.scss    | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 5a2d9e38cb1b90..31f6c6f888027e 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -66,15 +66,6 @@
 	margin: 0;
 }
 
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
-	margin-right: $grid-unit-20;
-	margin-left: $grid-unit-20;
-	width: unset;
-	.components-toggle-group-control {
-		min-height: $grid-unit-40;
-	}
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
 .edit-site-screen-button-color__control {

From 7b566daed7d8961a2f14cdc45c09821d2cbf798a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 12:11:49 +0900
Subject: [PATCH 09/11] Update failing test

---
 .../src/components/colors-gradients/test/control.js       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index 308743c314e99f..0a9b42f5bcf656 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -63,8 +63,12 @@ describe( 'ColorPaletteControl', () => {
 		);
 
 		// Is showing the two tab buttons.
-		expect( screen.queryByLabelText( 'Solid' ) ).toBeInTheDocument();
-		expect( screen.queryByLabelText( 'Gradient' ) ).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'tab', { name: 'Solid color' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'tab', { name: 'Gradient' } )
+		).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
 		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );

From 587692c17b6f27a30379c27f308abb8c9c0536ac Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 8 Jul 2022 12:17:37 +0900
Subject: [PATCH 10/11] Update test queries

---
 .../colors-gradients/test/control.js          | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index 0a9b42f5bcf656..e926842d4428f0 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -20,17 +20,6 @@ const getButtonWithAriaLabelStartPredicate =
 		);
 	};
 
-const getTabWithTestPredicate = ( text ) => ( element ) => {
-	return (
-		element.type === 'button' &&
-		element.props[ 'aria-label' ] &&
-		element.props[ 'aria-label' ] === text
-	);
-};
-
-const colorTabButtonPredicate = getTabWithTestPredicate( 'Solid' );
-const gradientTabButtonPredicate = getTabWithTestPredicate( '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 () => {
 		render(
@@ -96,12 +85,12 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		// Is not showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			0
-		);
 		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'tab', { name: 'Solid color' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tab', { name: 'Gradient' } )
+		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
 		expect(
@@ -143,12 +132,12 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		// Is not showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			0
-		);
 		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'tab', { name: 'Solid color' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tab', { name: 'Gradient' } )
+		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Gradients.
 		expect(

From b77b4dfda8b9e4611e6dc23ad8bfb406636e9f3f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 8 Jul 2022 11:45:05 +0100
Subject: [PATCH 11/11] Remove border beneath tabs, and negative margins in
 popover

---
 .../src/components/colors-gradients/style.scss       | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 37eba2e38ac8e0..1db1d703642090 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -42,16 +42,6 @@
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
 	width: $sidebar-width;
-
-	.block-editor-color-gradient-control__tabs {
-		margin-top: - $grid-unit-10;
-		margin-left: - $grid-unit-10;
-		margin-right: - $grid-unit-10;
-	}
-
-	.block-editor-color-gradient-control__tab-panel {
-		padding: $grid-unit-10;
-	}
 }
 
 
@@ -112,5 +102,5 @@
 }
 
 .block-editor-color-gradient-control__tab-panel {
-	border-top: 1px solid $gray-300;
+	padding-top: $grid-unit-10;
 }