diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index e8ca27d4b97e4d..2ff2e732298044 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/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,7 @@ 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.button.typography.fontFamily': 'font-family',
'elements.button.typography.fontSize': 'font-size',
'elements.heading.color': 'color',
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 1ab0b26448c1a5..5a1383eadb17f3 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -136,6 +136,10 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
value: [ 'elements', 'link', 'color', 'text' ],
support: [ 'color', 'link' ],
},
+ captionColor: {
+ value: [ 'elements', 'caption', 'color', 'text' ],
+ support: [ 'color', 'caption' ],
+ },
buttonColor: {
value: [ 'elements', 'button', 'color', 'text' ],
support: [ 'color', 'button' ],
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
index 9e38194cd11cb0..a50c82241dd12d 100644
--- a/packages/blocks/src/store/private-selectors.js
+++ b/packages/blocks/src/store/private-selectors.js
@@ -15,6 +15,7 @@ const ROOT_BLOCK_SUPPORTS = [
'backgroundColor',
'color',
'linkColor',
+ 'captionColor',
'buttonColor',
'fontFamily',
'fontSize',
diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js
index 55cc270976ca0b..8eca5c2e859ea1 100644
--- a/packages/blocks/src/store/test/private-selectors.js
+++ b/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',
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 010095d024c622..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 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 );
-
-function ScreenButtonColor( { name, variation = '' } ) {
- const prefix = variation ? `variations.${ variation }.` : '';
- const supports = useSupportedStyles( name );
- const colorsPerOrigin = useColorsPerOrigin( name );
- const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
- const [ isBackgroundEnabled ] = useGlobalSetting(
- 'color.background',
- name
- );
-
- const hasButtonColor =
- supports.includes( 'buttonColor' ) &&
- isBackgroundEnabled &&
- ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
- const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
- prefix + 'elements.button.color.text',
- name
- );
- const [ userButtonTextColor ] = useGlobalStyle(
- 'elements.button.color.text',
- name,
- 'user'
- );
-
- const [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(
- 'elements.button.color.background',
- name
- );
- const [ userButtonBgColor ] = useGlobalStyle(
- '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 00000000000000..f43a7735ec2202
--- /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,
+ 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 );
+ } else if ( element === 'caption' ) {
+ isBackgroundEnabled = false;
+ }
+
+ 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 (
+ <>
+
+
+
+ { __( '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 dc40ca155b3387..03aee7c02c08cf 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -173,6 +173,37 @@ 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( 'captionColor' );
+ const [ color ] = useGlobalStyle(
+ prefix + 'elements.caption.color.text',
+ name
+ );
+
+ if ( ! hasSupport ) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+
+ { __( 'Captions' ) }
+
+
+ );
+}
+
function ButtonColorItem( { name, parentMenu, variation = '' } ) {
const prefix = variation ? `variations.${ variation }.` : '';
const urlPrefix = variation ? `/variations/${ variation }` : '';
@@ -250,6 +281,10 @@ function ScreenColors( { name, variation = '' } ) {
parentMenu={ parentMenu }
variation={ variation }
/>
+
0 || areCustomSolidsEnabled );
-
- const [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );
- const [ userColor ] = useGlobalStyle( prefix + '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 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 96df1ff9d656ea..239b1e05950c21 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -129,6 +129,12 @@ function ScreenTypography( { name, variation = '' } ) {
element="heading"
label={ __( 'Headings' ) }
/>
+
+
+
+
+
@@ -211,7 +216,11 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
-
+
@@ -227,7 +236,21 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
-
+
+
+
+
+
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
index 815aa6f6b20c32..5ee0efcd6fa7c3 100644
--- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -45,6 +45,7 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
'elements.button.color.background': 'color',
'elements.button.typography.fontFamily': 'font-family',
'elements.button.typography.fontSize': 'font-size',
+ 'elements.caption.color.text': 'color',
'elements.heading.color': 'color',
'elements.heading.color.background': 'color',
'elements.heading.typography.fontFamily': 'font-family',