diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index e8ca27d4b97e4..2ff2e73229804 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 1ab0b26448c1a..5a1383eadb17f 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 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-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..f43a7735ec220 --- /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 dc40ca155b338..03aee7c02c08c 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 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 96df1ff9d656e..239b1e05950c2 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 815aa6f6b20c3..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 @@ -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',