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 22ff1ef1307be..0000000000000
--- 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 (
- <>
-
-
-
- { __( 'Text color' ) }
-
-
-
-
-
- { __( 'Background color' ) }
-
-
-
-
- );
-}
-
-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
new file mode 100644
index 0000000000000..8732cb4d6387f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -0,0 +1,143 @@
+/**
+ * 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: __(
+ 'Set the default color used for text across the site.'
+ ),
+ title: __( 'Text' ),
+ },
+ 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 );
+ 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;
+
+ 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;
+
+ default:
+ hasElementColor =
+ supports.includes( 'color' ) &&
+ ( solids.length > 0 || areCustomSolidsEnabled );
+ break;
+ }
+
+ const [ elementTextColor, setElementTextColor ] = useStyle(
+ textColorElementSelector,
+ name
+ );
+
+ const [ userElementTextColor ] = useStyle(
+ textColorElementSelector,
+ name,
+ 'user'
+ );
+
+ const [ elementBgColor, setElementBgColor ] = useStyle(
+ backgroundColorElementSelector,
+ name
+ );
+
+ const [ userElementBgColor ] = useStyle(
+ backgroundColorElementSelector,
+ name,
+ 'user'
+ );
+
+ if ( ! hasElementColor ) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
{ __( 'Text color' ) }
+
+
+
+ { isBackgroundEnabled && (
+
+
{ __( 'Background color' ) }
+
+
+
+ ) }
+
+ );
+}
+
+export default ScreenColorElement;
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 (
+
+
+
+
+
+
+
+
+
+
+ { __( 'Captions' ) }
+
+
+ );
+}
+
function HeadingColorItem( { name, parentMenu } ) {
const supports = getSupportedGlobalStylesPanels( name );
const hasSupport = supports.includes( 'color' );
@@ -204,6 +234,10 @@ function ScreenColors( { name } ) {
name={ name }
parentMenu={ parentMenu }
/>
+
0 || areCustomSolidsEnabled );
-
- const [ color, setColor ] = useStyle( 'color.text', name );
- const [ userColor ] = useStyle( 'color.text', name, 'user' );
-
- if ( ! hasTextColor ) {
- return null;
- }
-
- return (
- <>
-
-
-
- );
-}
-
-export default ScreenTextColor;
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 76d7d6de5df90..f28bf2bfe1706 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 3f7a5eb3eb867..0d1a8d2713c11 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' ) }
/>
+