From aef42c3e9e6bebc70b9a839711149ff7a3d73f63 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Mon, 12 Sep 2022 17:51:05 +0200
Subject: [PATCH 1/8] started interface to edit caption colors in Global Styles

---
 .../global-styles/screen-caption-color.js     | 98 +++++++++++++++++++
 .../components/global-styles/screen-colors.js | 34 +++++++
 .../src/components/global-styles/style.scss   |  1 +
 .../src/components/global-styles/ui.js        |  7 ++
 .../src/components/global-styles/utils.js     |  3 +
 5 files changed, 143 insertions(+)
 create mode 100644 packages/edit-site/src/components/global-styles/screen-caption-color.js

diff --git a/packages/edit-site/src/components/global-styles/screen-caption-color.js b/packages/edit-site/src/components/global-styles/screen-caption-color.js
new file mode 100644
index 00000000000000..fe9821842ef11f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-caption-color.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+} from './hooks';
+
+function ScreenCaptionColor( { name } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+
+	const hasCaptionColor =
+		supports.includes( 'color' ) &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const [ captionTextColor, setCaptionTextColor ] = useStyle(
+		'elements.caption.color.text',
+		name
+	);
+	const [ userCaptionTextColor ] = useStyle(
+		'elements.caption.color.text',
+		name,
+		'user'
+	);
+
+	const [ captionBgColor, setCaptionBgColor ] = useStyle(
+		'elements.caption.color.background',
+		name
+	);
+	const [ userCaptionBgColor ] = useStyle(
+		'elements.caption.color.background',
+		name,
+		'user'
+	);
+
+	if ( ! hasCaptionColor ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Captions' ) }
+				description={ __(
+					'Set the colors used for captions across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-caption-color">
+				<h4 className="edit-site-global-styles-section-title">
+					{ __( 'Text color' ) }
+				</h4>
+
+				<ColorGradientControl
+					className="edit-site-screen-caption-color__control"
+					colors={ colorsPerOrigin }
+					disableCustomColors={ ! areCustomSolidsEnabled }
+					__experimentalHasMultipleOrigins
+					showTitle={ false }
+					enableAlpha
+					__experimentalIsRenderedInSidebar
+					colorValue={ captionTextColor }
+					onColorChange={ setCaptionTextColor }
+					clearable={ captionTextColor === userCaptionTextColor }
+				/>
+
+				<h4 className="edit-site-global-styles-section-title">
+					{ __( 'Background color' ) }
+				</h4>
+
+				<ColorGradientControl
+					className="edit-site-screen-caption-color__control"
+					colors={ colorsPerOrigin }
+					disableCustomColors={ ! areCustomSolidsEnabled }
+					__experimentalHasMultipleOrigins
+					showTitle={ false }
+					enableAlpha
+					__experimentalIsRenderedInSidebar
+					colorValue={ captionBgColor }
+					onColorChange={ setCaptionBgColor }
+					clearable={ captionBgColor === userCaptionBgColor }
+				/>
+			</div>
+		</>
+	);
+}
+
+export default ScreenCaptionColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 87d74604e63e14..fc96ced0ba096f 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -114,6 +114,36 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
+function CaptionColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'color' );
+	const [ color ] = useStyle( 'elements.caption.color.text', name );
+	const [ bgColor ] = useStyle( 'elements.caption.color.background', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/caption' }
+			aria-label={ __( 'Colors caption styles' ) }
+		>
+			<HStack justify="flex-start">
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ bgColor } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+				</ZStack>
+				<FlexItem>{ __( 'Captions' ) }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
 function HeadingColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
@@ -204,6 +234,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<CaptionColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index fabc0fa9b40233..910ed869f91d6b 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -26,6 +26,7 @@
 	max-width: 100%;
 }
 
+.edit-site-global-styles-screen-caption-color,
 .edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 6eeada1e67c61d..0ebd27c1137eab 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -18,6 +18,7 @@ import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
+import ScreenCaptionColor from './screen-caption-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenHeadingColor from './screen-heading-color';
@@ -102,6 +103,12 @@ function ContextScreens( { name } ) {
 				<ScreenHeadingColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/caption' }
+			>
+				<ScreenCaptionColor name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 4c9d7bae19f7a1..9bce803acf7b01 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -92,6 +92,9 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.color.text': 'color',
 	'elements.button.color.text': 'color',
 	'elements.button.backgroundColor': 'background-color',
+	'elements.caption.color.text': 'color',
+	'elements.caption.backgroundColor': 'background-color',
+	'elements.caption.gradient': 'gradient',
 	'elements.heading.color': 'color',
 	'elements.heading.backgroundColor': 'background-color',
 	'elements.heading.gradient': 'gradient',

From b96ce011680c9bae4bc72c6e2a0bd6d450801369 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Thu, 15 Sep 2022 10:12:42 +0200
Subject: [PATCH 2/8] removed gradient variable for now

---
 packages/edit-site/src/components/global-styles/utils.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 9bce803acf7b01..9986c1484960d8 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -94,7 +94,6 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.button.backgroundColor': 'background-color',
 	'elements.caption.color.text': 'color',
 	'elements.caption.backgroundColor': 'background-color',
-	'elements.caption.gradient': 'gradient',
 	'elements.heading.color': 'color',
 	'elements.heading.backgroundColor': 'background-color',
 	'elements.heading.gradient': 'gradient',

From dace6c1e070eb4138587404773d6cd60639b6005 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Thu, 15 Sep 2022 10:13:04 +0200
Subject: [PATCH 3/8] removed class from ui headings

---
 .../src/components/global-styles/screen-caption-color.js  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-caption-color.js b/packages/edit-site/src/components/global-styles/screen-caption-color.js
index fe9821842ef11f..36f2d5f14b9e07 100644
--- a/packages/edit-site/src/components/global-styles/screen-caption-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-caption-color.js
@@ -57,9 +57,7 @@ function ScreenCaptionColor( { name } ) {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-caption-color">
-				<h4 className="edit-site-global-styles-section-title">
-					{ __( 'Text color' ) }
-				</h4>
+				<h4>{ __( 'Text color' ) }</h4>
 
 				<ColorGradientControl
 					className="edit-site-screen-caption-color__control"
@@ -74,9 +72,7 @@ function ScreenCaptionColor( { name } ) {
 					clearable={ captionTextColor === userCaptionTextColor }
 				/>
 
-				<h4 className="edit-site-global-styles-section-title">
-					{ __( 'Background color' ) }
-				</h4>
+				<h4>{ __( 'Background color' ) }</h4>
 
 				<ColorGradientControl
 					className="edit-site-screen-caption-color__control"

From 525c1048f377d6bd995f94d2fc5d8b61685bb82e Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Thu, 15 Sep 2022 10:31:20 +0200
Subject: [PATCH 4/8] add typography supports

---
 .../components/global-styles/screen-typography-element.js   | 4 ++++
 .../src/components/global-styles/screen-typography.js       | 6 ++++++
 packages/edit-site/src/components/global-styles/ui.js       | 6 ++++++
 3 files changed, 16 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 76d7d6de5df90d..f28bf2bfe1706e 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -29,6 +29,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on headings.' ),
 		title: __( 'Headings' ),
 	},
+	caption: {
+		description: __( 'Manage the fonts and typography used on captions.' ),
+		title: __( 'Captions' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 3f7a5eb3eb8670..0d1a8d2713c11d 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -110,6 +110,12 @@ function ScreenTypography( { name } ) {
 								element="heading"
 								label={ __( 'Headings' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="caption"
+								label={ __( 'Captions' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 0ebd27c1137eab..ca974268bd2b76 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -67,6 +67,12 @@ function ContextScreens( { name } ) {
 				<ScreenTypographyElement name={ name } element="heading" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/caption' }
+			>
+				<ScreenTypographyElement name={ name } element="caption" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>

From 498f64ffaf937663dd71460e78ab305bded697fc Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 11 Oct 2022 15:42:02 +0200
Subject: [PATCH 5/8] abstract the color caption component to work for all
 elements

---
 .../global-styles/screen-caption-color.js     |  94 --------------
 .../global-styles/screen-color-element.js     | 117 ++++++++++++++++++
 .../src/components/global-styles/style.scss   |   2 +-
 .../src/components/global-styles/ui.js        |   4 +-
 4 files changed, 120 insertions(+), 97 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-caption-color.js
 create mode 100644 packages/edit-site/src/components/global-styles/screen-color-element.js

diff --git a/packages/edit-site/src/components/global-styles/screen-caption-color.js b/packages/edit-site/src/components/global-styles/screen-caption-color.js
deleted file mode 100644
index 36f2d5f14b9e07..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-caption-color.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenCaptionColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-
-	const hasCaptionColor =
-		supports.includes( 'color' ) &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ captionTextColor, setCaptionTextColor ] = useStyle(
-		'elements.caption.color.text',
-		name
-	);
-	const [ userCaptionTextColor ] = useStyle(
-		'elements.caption.color.text',
-		name,
-		'user'
-	);
-
-	const [ captionBgColor, setCaptionBgColor ] = useStyle(
-		'elements.caption.color.background',
-		name
-	);
-	const [ userCaptionBgColor ] = useStyle(
-		'elements.caption.color.background',
-		name,
-		'user'
-	);
-
-	if ( ! hasCaptionColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Captions' ) }
-				description={ __(
-					'Set the colors used for captions across the site.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen-caption-color">
-				<h4>{ __( 'Text color' ) }</h4>
-
-				<ColorGradientControl
-					className="edit-site-screen-caption-color__control"
-					colors={ colorsPerOrigin }
-					disableCustomColors={ ! areCustomSolidsEnabled }
-					__experimentalHasMultipleOrigins
-					showTitle={ false }
-					enableAlpha
-					__experimentalIsRenderedInSidebar
-					colorValue={ captionTextColor }
-					onColorChange={ setCaptionTextColor }
-					clearable={ captionTextColor === userCaptionTextColor }
-				/>
-
-				<h4>{ __( 'Background color' ) }</h4>
-
-				<ColorGradientControl
-					className="edit-site-screen-caption-color__control"
-					colors={ colorsPerOrigin }
-					disableCustomColors={ ! areCustomSolidsEnabled }
-					__experimentalHasMultipleOrigins
-					showTitle={ false }
-					enableAlpha
-					__experimentalIsRenderedInSidebar
-					colorValue={ captionBgColor }
-					onColorChange={ setCaptionBgColor }
-					clearable={ captionBgColor === userCaptionBgColor }
-				/>
-			</div>
-		</>
-	);
-}
-
-export default ScreenCaptionColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-color-element.js b/packages/edit-site/src/components/global-styles/screen-color-element.js
new file mode 100644
index 00000000000000..db34d25e85292d
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+} from './hooks';
+
+const elements = {
+	text: {
+		description: __( '' ),
+		title: __( 'Text' ),
+	},
+	link: {
+		description: __( '' ),
+		title: __( 'Links' ),
+	},
+	heading: {
+		description: __( '' ),
+		title: __( 'Headings' ),
+	},
+	caption: {
+		description: __( 'Set the colors used for captions across the site' ),
+		title: __( 'Captions' ),
+	},
+	button: {
+		description: __(
+			'Set the default colors used for buttons across the site.'
+		),
+		title: __( 'Buttons' ),
+	},
+};
+
+function ScreenColorElement( { name, element } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+
+	const hasElementColor =
+		supports.includes( 'color' ) &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const [ elementTextColor, setElementTextColor ] = useStyle(
+		'elements.' + element + '.color.text',
+		name
+	);
+	const [ userElementTextColor ] = useStyle(
+		'elements.' + element + '.color.text',
+		name,
+		'user'
+	);
+
+	const [ elementBgColor, setElementBgColor ] = useStyle(
+		'elements.' + element + '.color.background',
+		name
+	);
+	const [ userElementBgColor ] = useStyle(
+		'elements.' + element + '.color.background',
+		name,
+		'user'
+	);
+
+	if ( ! hasElementColor ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ScreenHeader
+				title={ elements[ element ].title }
+				description={ elements[ element ].description }
+			/>
+			<div className="edit-site-global-styles-screen-element-color">
+				<h4>{ __( 'Text color' ) }</h4>
+
+				<ColorGradientControl
+					className="edit-site-screen-element-color__control"
+					colors={ colorsPerOrigin }
+					disableCustomColors={ ! areCustomSolidsEnabled }
+					__experimentalHasMultipleOrigins
+					showTitle={ false }
+					enableAlpha
+					__experimentalIsRenderedInSidebar
+					colorValue={ elementTextColor }
+					onColorChange={ setElementTextColor }
+					clearable={ elementTextColor === userElementTextColor }
+				/>
+
+				<h4>{ __( 'Background color' ) }</h4>
+
+				<ColorGradientControl
+					className="edit-site-screen-element-color__control"
+					colors={ colorsPerOrigin }
+					disableCustomColors={ ! areCustomSolidsEnabled }
+					__experimentalHasMultipleOrigins
+					showTitle={ false }
+					enableAlpha
+					__experimentalIsRenderedInSidebar
+					colorValue={ elementBgColor }
+					onColorChange={ setElementBgColor }
+					clearable={ elementBgColor === userElementBgColor }
+				/>
+			</div>
+		</>
+	);
+}
+
+export default ScreenColorElement;
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 910ed869f91d6b..8c6fa97b2f7a57 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -26,7 +26,7 @@
 	max-width: 100%;
 }
 
-.edit-site-global-styles-screen-caption-color,
+.edit-site-global-styles-screen-element-color,
 .edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index ca974268bd2b76..0f33166f20524c 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -18,7 +18,7 @@ import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
-import ScreenCaptionColor from './screen-caption-color';
+import ScreenColorElement from './screen-color-element';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenHeadingColor from './screen-heading-color';
@@ -112,7 +112,7 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/caption' }
 			>
-				<ScreenCaptionColor name={ name } />
+				<ScreenColorElement name={ name } element="caption" />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen

From cba3235e15b637b3b0a28881e0944a051bc191e7 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 11 Oct 2022 15:52:16 +0200
Subject: [PATCH 6/8] refactor button color component into element

---
 .../global-styles/screen-button-color.js      | 102 ------------------
 .../global-styles/screen-color-element.js     |  11 +-
 .../src/components/global-styles/ui.js        |   3 +-
 3 files changed, 11 insertions(+), 105 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-button-color.js

diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
deleted file mode 100644
index 22ff1ef1307bed..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenButtonColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
-	const hasButtonColor =
-		supports.includes( 'buttonColor' ) &&
-		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
-		name
-	);
-	const [ userButtonTextColor ] = useStyle(
-		'elements.button.color.text',
-		name,
-		'user'
-	);
-
-	const [ buttonBgColor, setButtonBgColor ] = useStyle(
-		'elements.button.color.background',
-		name
-	);
-	const [ userButtonBgColor ] = useStyle(
-		'elements.button.color.background',
-		name,
-		'user'
-	);
-
-	if ( ! hasButtonColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Buttons' ) }
-				description={ __(
-					'Set the default colors used for buttons across the site.'
-				) }
-			/>
-
-			<h4 className="edit-site-global-styles-section-title">
-				{ __( 'Text color' ) }
-			</h4>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonTextColor }
-				onColorChange={ setButtonTextColor }
-				clearable={ buttonTextColor === userButtonTextColor }
-			/>
-
-			<h4 className="edit-site-global-styles-section-title">
-				{ __( 'Background color' ) }
-			</h4>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonBgColor }
-				onColorChange={ setButtonBgColor }
-				clearable={ buttonBgColor === userButtonBgColor }
-			/>
-		</>
-	);
-}
-
-export default ScreenButtonColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-color-element.js b/packages/edit-site/src/components/global-styles/screen-color-element.js
index db34d25e85292d..79e7f1c85e66d8 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -44,15 +44,24 @@ function ScreenColorElement( { name, element } ) {
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
 
-	const hasElementColor =
+	let hasElementColor =
 		supports.includes( 'color' ) &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
+	if ( supports.includes( 'buttonColor' ) ) {
+		hasElementColor =
+			supports.includes( 'buttonColor' ) &&
+			isBackgroundEnabled &&
+			( solids.length > 0 || areCustomSolidsEnabled );
+	}
+
 	const [ elementTextColor, setElementTextColor ] = useStyle(
 		'elements.' + element + '.color.text',
 		name
 	);
+
 	const [ userElementTextColor ] = useStyle(
 		'elements.' + element + '.color.text',
 		name,
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 0f33166f20524c..2e5626b789d624 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -22,7 +22,6 @@ import ScreenColorElement from './screen-color-element';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenHeadingColor from './screen-heading-color';
-import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 
@@ -118,7 +117,7 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor name={ name } />
+				<ScreenColorElement name={ name } element="button" />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>

From 80a376089473490473e0c0404d7492c4d3eb6327 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 11 Oct 2022 16:17:28 +0200
Subject: [PATCH 7/8] refactored text into element component

---
 .../global-styles/screen-color-element.js     | 83 ++++++++++++-------
 .../global-styles/screen-text-color.js        | 62 --------------
 .../src/components/global-styles/ui.js        |  3 +-
 3 files changed, 55 insertions(+), 93 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-text-color.js

diff --git a/packages/edit-site/src/components/global-styles/screen-color-element.js b/packages/edit-site/src/components/global-styles/screen-color-element.js
index 79e7f1c85e66d8..88ab67ed26b46a 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -16,7 +16,9 @@ import {
 
 const elements = {
 	text: {
-		description: __( '' ),
+		description: __(
+			'Set the default color used for text across the site.'
+		),
 		title: __( 'Text' ),
 	},
 	link: {
@@ -44,36 +46,56 @@ function ScreenColorElement( { name, element } ) {
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	let [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+
+	let textColorElementSelector = 'elements.' + element + '.color.text';
+	const backgroundColorElementSelector =
+		'elements.' + element + '.color.background';
+
+	let hasElementColor = false;
 
-	let hasElementColor =
-		supports.includes( 'color' ) &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+	switch ( element ) {
+		case 'button':
+			hasElementColor =
+				supports.includes( 'buttonColor' ) &&
+				isBackgroundEnabled &&
+				( solids.length > 0 || areCustomSolidsEnabled );
+			break;
+		case 'text':
+			hasElementColor =
+				supports.includes( 'color' ) &&
+				isTextEnabled &&
+				( solids.length > 0 || areCustomSolidsEnabled );
+			textColorElementSelector = 'color.text';
+			isBackgroundEnabled = false;
+			break;
 
-	if ( supports.includes( 'buttonColor' ) ) {
-		hasElementColor =
-			supports.includes( 'buttonColor' ) &&
-			isBackgroundEnabled &&
-			( solids.length > 0 || areCustomSolidsEnabled );
+		default:
+			hasElementColor =
+				supports.includes( 'color' ) &&
+				( solids.length > 0 || areCustomSolidsEnabled );
+			break;
 	}
 
 	const [ elementTextColor, setElementTextColor ] = useStyle(
-		'elements.' + element + '.color.text',
+		textColorElementSelector,
 		name
 	);
 
 	const [ userElementTextColor ] = useStyle(
-		'elements.' + element + '.color.text',
+		textColorElementSelector,
 		name,
 		'user'
 	);
 
 	const [ elementBgColor, setElementBgColor ] = useStyle(
-		'elements.' + element + '.color.background',
+		backgroundColorElementSelector,
 		name
 	);
+
 	const [ userElementBgColor ] = useStyle(
-		'elements.' + element + '.color.background',
+		backgroundColorElementSelector,
 		name,
 		'user'
 	);
@@ -103,22 +125,25 @@ function ScreenColorElement( { name, element } ) {
 					onColorChange={ setElementTextColor }
 					clearable={ elementTextColor === userElementTextColor }
 				/>
-
-				<h4>{ __( 'Background color' ) }</h4>
-
-				<ColorGradientControl
-					className="edit-site-screen-element-color__control"
-					colors={ colorsPerOrigin }
-					disableCustomColors={ ! areCustomSolidsEnabled }
-					__experimentalHasMultipleOrigins
-					showTitle={ false }
-					enableAlpha
-					__experimentalIsRenderedInSidebar
-					colorValue={ elementBgColor }
-					onColorChange={ setElementBgColor }
-					clearable={ elementBgColor === userElementBgColor }
-				/>
 			</div>
+			{ isBackgroundEnabled && (
+				<div className="edit-site-global-styles-screen-element-color">
+					<h4>{ __( 'Background color' ) }</h4>
+
+					<ColorGradientControl
+						className="edit-site-screen-element-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ elementBgColor }
+						onColorChange={ setElementBgColor }
+						clearable={ elementBgColor === userElementBgColor }
+					/>
+				</div>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
deleted file mode 100644
index 4c212adfe33475..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenTextColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
-
-	if ( ! hasTextColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Text' ) }
-				description={ __(
-					'Set the default color used for text across the site.'
-				) }
-			/>
-			<ColorGradientControl
-				className="edit-site-screen-text-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ color }
-				onColorChange={ setColor }
-				clearable={ color === userColor }
-			/>
-		</>
-	);
-}
-
-export default ScreenTextColor;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 2e5626b789d624..74d1130e683396 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -19,7 +19,6 @@ import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenColorElement from './screen-color-element';
-import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenHeadingColor from './screen-heading-color';
 import ScreenLayout from './screen-layout';
@@ -95,7 +94,7 @@ function ContextScreens( { name } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } />
+				<ScreenColorElement name={ name } element="text" />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>

From 809410781b13cc3503a3806b44fcf2b172fbe592 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Fri, 14 Oct 2022 09:20:56 +0200
Subject: [PATCH 8/8] removed headings and links from the elements component

---
 .../src/components/global-styles/screen-color-element.js  | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-color-element.js b/packages/edit-site/src/components/global-styles/screen-color-element.js
index 88ab67ed26b46a..8732cb4d6387f6 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -21,14 +21,6 @@ const elements = {
 		),
 		title: __( 'Text' ),
 	},
-	link: {
-		description: __( '' ),
-		title: __( 'Links' ),
-	},
-	heading: {
-		description: __( '' ),
-		title: __( 'Headings' ),
-	},
 	caption: {
 		description: __( 'Set the colors used for captions across the site' ),
 		title: __( 'Captions' ),