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] 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 36f2d5f14b9e0..0000000000000
--- 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 0000000000000..db34d25e85292
--- /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 910ed869f91d6..8c6fa97b2f7a5 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 ca974268bd2b7..0f33166f20524 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