Global Styles: Caption element UI controls for color and typography

packages/block-editor/src/components/global-styles/utils.js

@@ -16,6 +16,7 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'captionColor',
 	'buttonColor',
 	'fontFamily',
 	'fontSize',
@@ -103,6 +104,8 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
 	'elements.button.color.background': 'color',
+	'elements.caption.color.text': 'color',
+	'elements.caption.color.background': 'color',
 	'elements.button.typography.fontFamily': 'font-family',
 	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',

packages/blocks/src/api/constants.js

@@ -136,6 +136,14 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'elements', 'link', 'color', 'text' ],
 		support: [ 'color', 'link' ],
 	},
+	captionColor: {
+		value: [ 'elements', 'caption', 'color', 'text' ],
+		support: [ 'color', 'caption' ],
+	},
+	captionBackgroundColor: {
+		value: [ 'elements', 'caption', 'color', 'background' ],
+		support: [ 'color', 'caption' ],
+	},
 	buttonColor: {
 		value: [ 'elements', 'button', 'color', 'text' ],
 		support: [ 'color', 'button' ],

packages/blocks/src/store/private-selectors.js

@@ -15,6 +15,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'captionColor',
 	'buttonColor',
 	'fontFamily',
 	'fontSize',

packages/blocks/src/store/test/private-selectors.js

@@ -30,6 +30,7 @@ describe( 'private selectors', () => {
 				'backgroundColor',
 				'color',
 				'linkColor',
+				'captionColor',
 				'buttonColor',
 				'fontFamily',
 				'fontSize',
@@ -51,6 +52,7 @@ describe( 'private selectors', () => {
 				'backgroundColor',
 				'color',
 				'linkColor',
+				'captionColor',
 				'buttonColor',
 				'fontFamily',
 				'fontSize',
@@ -77,6 +79,7 @@ describe( 'private selectors', () => {
 				'backgroundColor',
 				'color',
 				'linkColor',
+				'captionColor',
 				'buttonColor',
 				'fontFamily',
 				'fontStyle',

packages/edit-site/src/components/global-styles/screen-color-element.js

@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import { useSupportedStyles, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../private-apis';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+const elements = {
+	text: {
+		description: __(
+			'Set the default color used for text accross the site.'
+		),
+		title: __( 'Text' ),
+	},
+	caption: {
+		description: __(
+			'Set the default color used for captions accross the site.'
+		),
+		title: __( 'Captions' ),
+	},
+	button: {
+		description: __(
+			'Set the default color used for buttons accross the site.'
+		),
+		title: __( 'Buttons' ),
+	},
+};
+
+function ScreenColorElement( { name, element, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const supports = useSupportedStyles( name );
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	let [ isBackgroundEnabled ] = useGlobalSetting( 'color.background', name );
+
+	let textColorElementSelector = 'elements.' + element + '.color.text';
+	const backgroundColorElementSelector =
+		'elements.' + element + '.color.background';
+
+	let hasElementColor =
+		supports.includes( 'buttonColor' ) &&
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
+
+	if ( element === 'text' ) {
+		isBackgroundEnabled = false;
+		textColorElementSelector = 'color.text';
+		hasElementColor =
+			supports.includes( 'color' ) &&
+			isTextEnabled &&
+			( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
+	} else if ( element === 'button' ) {
+		hasElementColor =
+			supports.includes( 'buttonColor' ) &&
+			isBackgroundEnabled &&
+			( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
+	}
+
+	const [ elementTextColor, setElementTextColor ] = useGlobalStyle(
+		prefix + textColorElementSelector,
+		name
+	);
+	const [ userElementTextColor ] = useGlobalStyle(
+		textColorElementSelector,
+		name,
+		'user'
+	);
+
+	const [ elementBgColor, setElementBgColor ] = useGlobalStyle(
+		backgroundColorElementSelector,
+		name
+	);
+	const [ userElementBgColor ] = useGlobalStyle(
+		backgroundColorElementSelector,
+		name,
+		'user'
+	);
+
+	if ( ! hasElementColor ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ScreenHeader
+				title={ elements[ element ].title }
+				description={ elements[ element ].description }
+			/>
+
+			<h3 className="edit-site-global-styles-section-title">
+				{ __( 'Text color' ) }
+			</h3>
+
+			<ColorGradientControl
+				className="edit-site-screen-element-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ elementTextColor }
+				onColorChange={ setElementTextColor }
+				clearable={ elementTextColor === userElementTextColor }
+				headingLevel={ 4 }
+			/>
+			{ isBackgroundEnabled && (
+				<>
+					<h3 className="edit-site-global-styles-section-title">
+						{ __( 'Background color' ) }
+					</h3>
+
+					<ColorGradientControl
+						className="edit-site-screen-element-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ elementBgColor }
+						onColorChange={ setElementBgColor }
+						clearable={ elementBgColor === userElementBgColor }
+						headingLevel={ 4 }
+					/>
+				</>
+			) }
+		</>
+	);
+}
+
+export default ScreenColorElement;

packages/edit-site/src/components/global-styles/screen-colors.js

@@ -173,6 +173,44 @@ function HeadingColorItem( { name, parentMenu, variation = '' } ) {
 	);
 }
 
+function CaptionColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
+	const supports = useSupportedStyles( name );
+	const hasSupport = supports.includes( 'headingColor' );
+	const [ color ] = useGlobalStyle(
+		prefix + 'elements.caption.color.text',
+		name
+	);
+	const [ bgColor ] = useGlobalStyle(
+		prefix + 'elements.caption.color.background',
+		name
+	);
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + urlPrefix + '/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 ButtonColorItem( { name, parentMenu, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const urlPrefix = variation ? `/variations/${ variation }` : '';
@@ -250,6 +288,10 @@ function ScreenColors( { name, variation = '' } ) {
 								parentMenu={ parentMenu }
 								variation={ variation }
 							/>
+							<CaptionColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }