From 3690bf8dc30a141ec51572545568120651adbe27 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 16 Mar 2023 13:12:32 +0100 Subject: [PATCH 1/6] abstract the button color screen into a generic element one --- .../global-styles/screen-button-color.js | 104 -------------- .../global-styles/screen-color-element.js | 133 ++++++++++++++++++ .../src/components/global-styles/ui.js | 8 +- 3 files changed, 139 insertions(+), 106 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/screen-button-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-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js deleted file mode 100644 index 010095d024c62..0000000000000 --- 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 0000000000000..5d9208f206f45 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/screen-color-element.js @@ -0,0 +1,133 @@ +/** + * 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 [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); + const [ isBackgroundEnabled ] = useGlobalSetting( + 'color.background', + name + ); + + let textColorElementSelector = 'elements.' + element + '.color.text'; + const backgroundColorElementSelector = + 'elements.' + element + '.color.background'; + + let hasElementColor = false; + + if ( element === 'text' ) { + textColorElementSelector = 'color.text'; + } 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 ( + <> + + +

+ { __( 'Text color' ) } +

+ + + +

+ { __( 'Background color' ) } +

+ + + + ); +} + +export default ScreenColorElement; diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 15168b1e7f599..8bea26dcffc3f 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -31,7 +31,7 @@ import ScreenBackgroundColor from './screen-background-color'; import ScreenTextColor from './screen-text-color'; import ScreenLinkColor from './screen-link-color'; import ScreenHeadingColor from './screen-heading-color'; -import ScreenButtonColor from './screen-button-color'; +import ScreenColorElement from './screen-color-element'; import ScreenLayout from './screen-layout'; import ScreenStyleVariations from './screen-style-variations'; import { ScreenVariation } from './screen-variations'; @@ -227,7 +227,11 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) { - + From 56bf7ed54abe71de98ed8e39c34ff8f219b2bfa3 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 16 Mar 2023 16:06:26 +0100 Subject: [PATCH 2/6] use screen color element with the text element --- .../global-styles/screen-color-element.js | 48 +++++++------- .../global-styles/screen-text-color.js | 62 ------------------- .../src/components/global-styles/style.scss | 1 + .../src/components/global-styles/ui.js | 7 ++- 4 files changed, 33 insertions(+), 85 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/screen-text-color.js 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 index 5d9208f206f45..4168cbbe42d40 100644 --- a/packages/edit-site/src/components/global-styles/screen-color-element.js +++ b/packages/edit-site/src/components/global-styles/screen-color-element.js @@ -41,11 +41,9 @@ 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 ); - const [ isBackgroundEnabled ] = useGlobalSetting( - 'color.background', - name - ); + let [ isBackgroundEnabled ] = useGlobalSetting( 'color.background', name ); let textColorElementSelector = 'elements.' + element + '.color.text'; const backgroundColorElementSelector = @@ -54,7 +52,12 @@ function ScreenColorElement( { name, element, variation = '' } ) { let hasElementColor = false; 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' ) && @@ -109,23 +112,26 @@ function ScreenColorElement( { name, element, variation = '' } ) { clearable={ elementTextColor === userElementTextColor } headingLevel={ 4 } /> - -

- { __( 'Background color' ) } -

- - + { isBackgroundEnabled && ( + <> +

+ { __( 'Background color' ) } +

+ + + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js deleted file mode 100644 index 72b7e25fa8a3b..0000000000000 --- a/packages/edit-site/src/components/global-styles/screen-text-color.js +++ /dev/null @@ -1,62 +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 ScreenTextColor( { name, variation = '' } ) { - const prefix = variation ? `variations.${ variation }.` : ''; - const supports = useSupportedStyles( name ); - const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); - const [ isTextEnabled ] = useGlobalSetting( 'color.text', name ); - const colorsPerOrigin = useColorsPerOrigin( name ); - - const hasTextColor = - supports.includes( 'color' ) && - isTextEnabled && - ( colorsPerOrigin.length > 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/style.scss b/packages/edit-site/src/components/global-styles/style.scss index a348bd72173b3..86fe630687baf 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -84,6 +84,7 @@ margin: 0; } +.edit-site-screen-element-color__control, .edit-site-screen-text-color__control, .edit-site-screen-link-color__control, .edit-site-screen-button-color__control, diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 8bea26dcffc3f..682d4f7386efa 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -28,7 +28,6 @@ import ScreenFilters from './screen-filters'; import ScreenColors from './screen-colors'; import ScreenColorPalette from './screen-color-palette'; import ScreenBackgroundColor from './screen-background-color'; -import ScreenTextColor from './screen-text-color'; import ScreenLinkColor from './screen-link-color'; import ScreenHeadingColor from './screen-heading-color'; import ScreenColorElement from './screen-color-element'; @@ -211,7 +210,11 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) { - + From a02f19ec50a2d99210c85ddf78cacc111ba09cf0 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 16 Mar 2023 16:24:31 +0100 Subject: [PATCH 3/6] added color and typography controls for caption element --- .../src/components/global-styles/utils.js | 2 + .../global-styles/screen-color-element.js | 4 +- .../components/global-styles/screen-colors.js | 42 +++++++++++++++++++ .../screen-typography-element.js | 4 ++ .../global-styles/screen-typography.js | 6 +++ .../src/components/global-styles/ui.js | 16 +++++++ .../push-changes-to-global-styles/index.js | 2 + 7 files changed, 75 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index e8ca27d4b97e4..20e008e35cdd9 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -103,6 +103,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', 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 index 4168cbbe42d40..2f24782d4246f 100644 --- a/packages/edit-site/src/components/global-styles/screen-color-element.js +++ b/packages/edit-site/src/components/global-styles/screen-color-element.js @@ -49,7 +49,9 @@ function ScreenColorElement( { name, element, variation = '' } ) { const backgroundColorElementSelector = 'elements.' + element + '.color.background'; - let hasElementColor = false; + let hasElementColor = + supports.includes( 'buttonColor' ) && + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); if ( element === 'text' ) { isBackgroundEnabled = false; 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 dc40ca155b338..613c0976fa05c 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,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( 'color' ); + const [ color ] = useGlobalStyle( + prefix + 'elements.caption.color.text', + name + ); + const [ bgColor ] = useGlobalStyle( + prefix + 'elements.caption.color.background', + name + ); + + if ( ! hasSupport ) { + return null; + } + + return ( + + + + + + + + + + + { __( 'Captions' ) } + + + ); +} + 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 } /> + + + + + + @@ -237,6 +243,16 @@ 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 815aa6f6b20c3..45c686fe11f94 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,8 @@ 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.caption.color.background': 'color', 'elements.heading.color': 'color', 'elements.heading.color.background': 'color', 'elements.heading.typography.fontFamily': 'font-family', From 6214e871fa019ddc5e69f6ce0fe2765bb9b6c012 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 17 Mar 2023 11:03:53 +0100 Subject: [PATCH 4/6] hide caption color control on blocks that don't support it --- .../block-editor/src/components/global-styles/utils.js | 1 + packages/blocks/src/api/constants.js | 8 ++++++++ packages/blocks/src/store/private-selectors.js | 1 + packages/blocks/src/store/test/private-selectors.js | 3 +++ .../src/components/global-styles/screen-colors.js | 2 +- 5 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index 20e008e35cdd9..7154977bca885 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', diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 1ab0b26448c1a..6a3e2d017c502 100644 --- a/packages/blocks/src/api/constants.js +++ b/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' ], diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js index 9e38194cd11cb..a50c82241dd12 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 55cc270976ca0..8eca5c2e859ea 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-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 613c0976fa05c..afb740dc5f385 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -177,7 +177,7 @@ function CaptionColorItem( { name, parentMenu, variation = '' } ) { const prefix = variation ? `variations.${ variation }.` : ''; const urlPrefix = variation ? `/variations/${ variation }` : ''; const supports = useSupportedStyles( name ); - const hasSupport = supports.includes( 'color' ); + const hasSupport = supports.includes( 'headingColor' ); const [ color ] = useGlobalStyle( prefix + 'elements.caption.color.text', name From 27610f4148b2311c20e1d18bbbe37b974bd005ea Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 17 Mar 2023 12:04:12 +0100 Subject: [PATCH 5/6] copypaste fail --- .../edit-site/src/components/global-styles/screen-colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 afb740dc5f385..18df387c522ed 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -177,7 +177,7 @@ 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 hasSupport = supports.includes( 'captionColor' ); const [ color ] = useGlobalStyle( prefix + 'elements.caption.color.text', name From 637af78e902f07b8db49127131965d4195120d3c Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Mon, 20 Mar 2023 11:32:47 +0100 Subject: [PATCH 6/6] removed background controls --- .../block-editor/src/components/global-styles/utils.js | 1 - packages/blocks/src/api/constants.js | 4 ---- .../src/components/global-styles/screen-color-element.js | 2 ++ .../src/components/global-styles/screen-colors.js | 7 ------- .../src/hooks/push-changes-to-global-styles/index.js | 1 - 5 files changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index 7154977bca885..2ff2e73229804 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -105,7 +105,6 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = { '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', diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 6a3e2d017c502..5a1383eadb17f 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -140,10 +140,6 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { 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' ], 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 index 2f24782d4246f..f43a7735ec220 100644 --- a/packages/edit-site/src/components/global-styles/screen-color-element.js +++ b/packages/edit-site/src/components/global-styles/screen-color-element.js @@ -65,6 +65,8 @@ function ScreenColorElement( { name, element, variation = '' } ) { supports.includes( 'buttonColor' ) && isBackgroundEnabled && ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); + } else if ( element === 'caption' ) { + isBackgroundEnabled = false; } const [ elementTextColor, setElementTextColor ] = useGlobalStyle( 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 18df387c522ed..03aee7c02c08c 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -182,10 +182,6 @@ function CaptionColorItem( { name, parentMenu, variation = '' } ) { prefix + 'elements.caption.color.text', name ); - const [ bgColor ] = useGlobalStyle( - prefix + 'elements.caption.color.background', - name - ); if ( ! hasSupport ) { return null; @@ -198,9 +194,6 @@ function CaptionColorItem( { 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 45c686fe11f94..5ee0efcd6fa7c 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 @@ -46,7 +46,6 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = { 'elements.button.typography.fontFamily': 'font-family', 'elements.button.typography.fontSize': 'font-size', 'elements.caption.color.text': 'color', - 'elements.caption.color.background': 'color', 'elements.heading.color': 'color', 'elements.heading.color.background': 'color', 'elements.heading.typography.fontFamily': 'font-family',