From cc6fcc45c59f111c04bff820db2e1cae578b760e Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Mon, 12 Sep 2022 17:51:05 +0200
Subject: [PATCH] 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 0000000000000..fe9821842ef11
--- /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 87d74604e63e1..fc96ced0ba096 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 1f203c348b25e..6787383a32a19 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 6eeada1e67c61..0ebd27c1137ea 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 4c9d7bae19f7a..9bce803acf7b0 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',