From 4ef6042ed1ebbd2c0b6aa9fe9be2a63eb71a1268 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:26:22 -0500
Subject: [PATCH 1/7] implement `Tabs`

---
 .../components/colors-gradients/control.js    | 74 +++++++++++--------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 51912e0a74e9d1..c826fd9256790f 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -10,15 +10,18 @@ import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	TabPanel,
 	ColorPalette,
 	GradientPicker,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -27,19 +30,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const TAB_COLOR = {
-	name: 'color',
-	title: __( 'Solid' ),
-	value: 'color',
-};
-const TAB_GRADIENT = {
-	name: 'gradient',
-	title: __( 'Gradient' ),
-	value: 'gradient',
-};
-
-const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
-
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -69,7 +59,7 @@ function ColorGradientControlInner( {
 	}
 
 	const tabPanels = {
-		[ TAB_COLOR.value ]: (
+		color: (
 			<ColorPalette
 				value={ colorValue }
 				onChange={
@@ -89,7 +79,7 @@ function ColorGradientControlInner( {
 				headingLevel={ headingLevel }
 			/>
 		),
-		[ TAB_GRADIENT.value ]: (
+		gradient: (
 			<GradientPicker
 				__nextHasNoMargin
 				value={ gradientValue }
@@ -137,22 +127,44 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<TabPanel
-							className="block-editor-color-gradient-control__tabs"
-							tabs={ TABS_SETTINGS }
-							initialTabName={
-								gradientValue
-									? TAB_GRADIENT.value
-									: !! canChooseAColor && TAB_COLOR.value
-							}
-						>
-							{ ( tab ) => renderPanelType( tab.value ) }
-						</TabPanel>
+						<div className="block-editor-color-gradient-control__tabs">
+							<Tabs
+								initialTabId={
+									gradientValue
+										? 'gradient'
+										: !! canChooseAColor && 'color'
+								}
+							>
+								<Tabs.TabList>
+									<Tabs.Tab id={ 'color' }>
+										{ __( 'Solid' ) }
+									</Tabs.Tab>
+									<Tabs.Tab id={ 'gradient' }>
+										{ __( 'Gradient' ) }
+									</Tabs.Tab>
+								</Tabs.TabList>
+								<Tabs.TabPanel
+									id={ 'color' }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+								>
+									{ tabPanels.color }
+								</Tabs.TabPanel>
+								<Tabs.TabPanel
+									id={ 'gradient' }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+								>
+									{ tabPanels.gradient }
+								</Tabs.TabPanel>
+							</Tabs>
+						</div>
 					) }
-					{ ! canChooseAGradient &&
-						renderPanelType( TAB_COLOR.value ) }
-					{ ! canChooseAColor &&
-						renderPanelType( TAB_GRADIENT.value ) }
+
+					{ ! canChooseAGradient && renderPanelType( 'color' ) }
+					{ ! canChooseAColor && renderPanelType( 'gradient' ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>

From 39f0feb15df1be0bf4af3efffd4ba00a248b90fc Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 20 Nov 2023 20:45:41 -0500
Subject: [PATCH 2/7] focusable=false

---
 .../block-editor/src/components/colors-gradients/control.js     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index c826fd9256790f..5fbde806205c39 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -148,6 +148,7 @@ function ColorGradientControlInner( {
 									className={
 										'block-editor-color-gradient-control__panel'
 									}
+									focusable={ false }
 								>
 									{ tabPanels.color }
 								</Tabs.TabPanel>
@@ -156,6 +157,7 @@ function ColorGradientControlInner( {
 									className={
 										'block-editor-color-gradient-control__panel'
 									}
+									focusable={ false }
 								>
 									{ tabPanels.gradient }
 								</Tabs.TabPanel>

From b40b3b0ebb254b09d74c7e12ef0f0c33d5362f91 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 27 Nov 2023 15:22:14 -0500
Subject: [PATCH 3/7] define tab IDs as constants

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

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 5fbde806205c39..699f0dd87f8b09 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -30,6 +30,8 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
+const TAB_IDS = { color: 'color', gradient: 'gradient' };
+
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -131,20 +133,20 @@ function ColorGradientControlInner( {
 							<Tabs
 								initialTabId={
 									gradientValue
-										? 'gradient'
-										: !! canChooseAColor && 'color'
+										? TAB_IDS.gradient
+										: !! canChooseAColor && TAB_IDS.color
 								}
 							>
 								<Tabs.TabList>
-									<Tabs.Tab id={ 'color' }>
+									<Tabs.Tab id={ TAB_IDS.color }>
 										{ __( 'Solid' ) }
 									</Tabs.Tab>
-									<Tabs.Tab id={ 'gradient' }>
+									<Tabs.Tab id={ TAB_IDS.gradient }>
 										{ __( 'Gradient' ) }
 									</Tabs.Tab>
 								</Tabs.TabList>
 								<Tabs.TabPanel
-									id={ 'color' }
+									id={ TAB_IDS.color }
 									className={
 										'block-editor-color-gradient-control__panel'
 									}
@@ -153,7 +155,7 @@ function ColorGradientControlInner( {
 									{ tabPanels.color }
 								</Tabs.TabPanel>
 								<Tabs.TabPanel
-									id={ 'gradient' }
+									id={ TAB_IDS.gradient }
 									className={
 										'block-editor-color-gradient-control__panel'
 									}
@@ -165,8 +167,8 @@ function ColorGradientControlInner( {
 						</div>
 					) }
 
-					{ ! canChooseAGradient && renderPanelType( 'color' ) }
-					{ ! canChooseAColor && renderPanelType( 'gradient' ) }
+					{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }
+					{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>

From 475743a0685061b34d8cae9ad9a943c2afce4c1b Mon Sep 17 00:00:00 2001
From: Chad Chadbourne <13856531+chad1008@users.noreply.github.com>
Date: Wed, 29 Nov 2023 18:00:04 -0500
Subject: [PATCH 4/7] Apply suggestions from code review

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 .../block-editor/src/components/colors-gradients/control.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 699f0dd87f8b09..ab43291b8a2e1f 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -61,7 +61,7 @@ function ColorGradientControlInner( {
 	}
 
 	const tabPanels = {
-		color: (
+		[ TAB_IDS.color ]: (
 			<ColorPalette
 				value={ colorValue }
 				onChange={
@@ -81,7 +81,7 @@ function ColorGradientControlInner( {
 				headingLevel={ headingLevel }
 			/>
 		),
-		gradient: (
+		[ TAB_IDS.gradient ]: (
 			<GradientPicker
 				__nextHasNoMargin
 				value={ gradientValue }

From 3b7e5d8d53983a0325c3b744af80bb81dc8d9ad9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 29 Nov 2023 18:16:12 -0500
Subject: [PATCH 5/7] remove unneeded div and style

---
 .../components/colors-gradients/control.js    | 66 +++++++++----------
 .../components/colors-gradients/style.scss    |  6 --
 2 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index ab43291b8a2e1f..9591b96838a120 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -129,42 +129,40 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<div className="block-editor-color-gradient-control__tabs">
-							<Tabs
-								initialTabId={
-									gradientValue
-										? TAB_IDS.gradient
-										: !! canChooseAColor && TAB_IDS.color
+						<Tabs
+							initialTabId={
+								gradientValue
+									? TAB_IDS.gradient
+									: !! canChooseAColor && TAB_IDS.color
+							}
+						>
+							<Tabs.TabList>
+								<Tabs.Tab id={ TAB_IDS.color }>
+									{ __( 'Solid' ) }
+								</Tabs.Tab>
+								<Tabs.Tab id={ TAB_IDS.gradient }>
+									{ __( 'Gradient' ) }
+								</Tabs.Tab>
+							</Tabs.TabList>
+							<Tabs.TabPanel
+								id={ TAB_IDS.color }
+								className={
+									'block-editor-color-gradient-control__panel'
 								}
+								focusable={ false }
 							>
-								<Tabs.TabList>
-									<Tabs.Tab id={ TAB_IDS.color }>
-										{ __( 'Solid' ) }
-									</Tabs.Tab>
-									<Tabs.Tab id={ TAB_IDS.gradient }>
-										{ __( 'Gradient' ) }
-									</Tabs.Tab>
-								</Tabs.TabList>
-								<Tabs.TabPanel
-									id={ TAB_IDS.color }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
-									focusable={ false }
-								>
-									{ tabPanels.color }
-								</Tabs.TabPanel>
-								<Tabs.TabPanel
-									id={ TAB_IDS.gradient }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
-									focusable={ false }
-								>
-									{ tabPanels.gradient }
-								</Tabs.TabPanel>
-							</Tabs>
-						</div>
+								{ tabPanels.color }
+							</Tabs.TabPanel>
+							<Tabs.TabPanel
+								id={ TAB_IDS.gradient }
+								className={
+									'block-editor-color-gradient-control__panel'
+								}
+								focusable={ false }
+							>
+								{ tabPanels.gradient }
+							</Tabs.TabPanel>
+						</Tabs>
 					) }
 
 					{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 6cade124b7fe46..fcae4a99189eed 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -15,12 +15,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-color-gradient-control__tabs {
-	.block-editor-color-gradient-control__panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {

From 4b48fe15d9eee34152cface56759534debb4544e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:17:53 -0500
Subject: [PATCH 6/7] replace the div

---
 .../components/colors-gradients/control.js    | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 9591b96838a120..9009c0411f465a 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -129,40 +129,42 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<Tabs
-							initialTabId={
-								gradientValue
-									? TAB_IDS.gradient
-									: !! canChooseAColor && TAB_IDS.color
-							}
-						>
-							<Tabs.TabList>
-								<Tabs.Tab id={ TAB_IDS.color }>
-									{ __( 'Solid' ) }
-								</Tabs.Tab>
-								<Tabs.Tab id={ TAB_IDS.gradient }>
-									{ __( 'Gradient' ) }
-								</Tabs.Tab>
-							</Tabs.TabList>
-							<Tabs.TabPanel
-								id={ TAB_IDS.color }
-								className={
-									'block-editor-color-gradient-control__panel'
+						<div>
+							<Tabs
+								initialTabId={
+									gradientValue
+										? TAB_IDS.gradient
+										: !! canChooseAColor && TAB_IDS.color
 								}
-								focusable={ false }
 							>
-								{ tabPanels.color }
-							</Tabs.TabPanel>
-							<Tabs.TabPanel
-								id={ TAB_IDS.gradient }
-								className={
-									'block-editor-color-gradient-control__panel'
-								}
-								focusable={ false }
-							>
-								{ tabPanels.gradient }
-							</Tabs.TabPanel>
-						</Tabs>
+								<Tabs.TabList>
+									<Tabs.Tab id={ TAB_IDS.color }>
+										{ __( 'Solid' ) }
+									</Tabs.Tab>
+									<Tabs.Tab id={ TAB_IDS.gradient }>
+										{ __( 'Gradient' ) }
+									</Tabs.Tab>
+								</Tabs.TabList>
+								<Tabs.TabPanel
+									id={ TAB_IDS.color }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+									focusable={ false }
+								>
+									{ tabPanels.color }
+								</Tabs.TabPanel>
+								<Tabs.TabPanel
+									id={ TAB_IDS.gradient }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+									focusable={ false }
+								>
+									{ tabPanels.gradient }
+								</Tabs.TabPanel>
+							</Tabs>
+						</div>
 					) }
 
 					{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }

From e0a7f53a44684019b8cba60ffd924f1b11e5d7b3 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 5 Dec 2023 11:02:41 -0500
Subject: [PATCH 7/7] try waiting to unlock Tabs

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

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 9009c0411f465a..0cb2fcdda44875 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -21,8 +21,6 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
-const { Tabs } = unlock( componentsPrivateApis );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -109,6 +107,11 @@ function ColorGradientControlInner( {
 		</div>
 	);
 
+	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+	// object, due to circular dependencies.
+	// See https://github.com/WordPress/gutenberg/issues/52692
+	const { Tabs } = unlock( componentsPrivateApis );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom