diff --git a/lib/global-styles.php b/lib/global-styles.php index 147eeeeb218fd8..7972f4f25f2c65 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -262,26 +262,50 @@ function gutenberg_experimental_global_styles_get_theme() { } /** - * Returns the style features a particular block supports. + * Return how the style property is structured. * - * @param array $supports The block supports array. + * @return array Style property structure. + */ +function gutenberg_experimental_global_styles_get_style_property() { + return array( + 'line-height' => array( 'typography', 'lineHeight' ), + 'font-size' => array( 'typography', 'fontSize' ), + 'background' => array( 'color', 'gradient' ), + 'background-color' => array( 'color', 'background' ), + 'color' => array( 'color', 'text' ), + '--wp--style--color--link' => array( 'color', 'link' ), + ); +} + +/** + * Return how the support keys are structured. * - * @return array Style features supported by the block. + * @return array Support keys structure. */ -function gutenberg_experimental_global_styles_get_supported_styles( $supports ) { - $style_features = array( +function gutenberg_experimental_global_styles_get_support_keys() { + return array( '--wp--style--color--link' => array( '__experimentalColor', 'linkColor' ), - 'background-color' => array( '__experimentalColor' ), + 'backgroundColor' => array( '__experimentalColor' ), 'background' => array( '__experimentalColor', 'gradients' ), 'color' => array( '__experimentalColor' ), - 'font-size' => array( '__experimentalFontSize' ), - 'line-height' => array( '__experimentalLineHeight' ), + 'fontSize' => array( '__experimentalFontSize' ), + 'lineHeight' => array( '__experimentalLineHeight' ), ); +} +/** + * Returns the style features a particular block supports. + * + * @param array $supports The block supports array. + * + * @return array Style features supported by the block. + */ +function gutenberg_experimental_global_styles_get_supported_styles( $supports ) { + $support_keys = gutenberg_experimental_global_styles_get_support_keys(); $supported_features = array(); - foreach ( $style_features as $style_feature => $path ) { + foreach ( $support_keys as $key => $path ) { if ( gutenberg_experimental_get( $supports, $path ) ) { - $supported_features[] = $style_feature; + $supported_features[] = $key; } } @@ -385,17 +409,9 @@ function gutenberg_experimental_global_styles_get_block_data() { * @return array Containing a set of css rules. */ function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) { - $mappings = array( - 'line-height' => array( 'typography', 'lineHeight' ), - 'font-size' => array( 'typography', 'fontSize' ), - 'background' => array( 'color', 'gradient' ), - 'background-color' => array( 'color', 'background' ), - 'color' => array( 'color', 'text' ), - '--wp--style--color--link' => array( 'color', 'link' ), - ); + $mappings = gutenberg_experimental_global_styles_get_style_property(); $result = array(); - foreach ( $mappings as $key => $path ) { $value = gutenberg_experimental_get( $styles, $path, null ); if ( null !== $value ) { diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 5ef485a672c652..fe2f66a9c141c7 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -7,7 +7,10 @@ import { has, get, startsWith } from 'lodash'; * WordPress dependencies */ import { addFilter } from '@wordpress/hooks'; -import { hasBlockSupport } from '@wordpress/blocks'; +import { + hasBlockSupport, + __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, +} from '@wordpress/blocks'; import { createHigherOrderComponent } from '@wordpress/compose'; /** @@ -17,7 +20,6 @@ import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; import { PADDING_SUPPORT_KEY, PaddingEdit } from './padding'; import SpacingPanelControl from '../components/spacing-panel-control'; -import { STYLE_MAPPINGS } from './utils'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, @@ -50,7 +52,7 @@ function compileStyleValue( uncompiledValue ) { */ export function getInlineStyles( styles = {} ) { const output = {}; - Object.entries( STYLE_MAPPINGS ).forEach( + Object.entries( STYLE_PROPERTY ).forEach( ( [ styleKey, ...otherObjectKeys ] ) => { const [ objectKeys ] = otherObjectKeys; diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 62e771b1a8b0bc..dba018f2cfc8aa 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -21,16 +21,3 @@ export const cleanEmptyObject = ( object ) => { ? undefined : cleanedNestedObjects; }; - -export const STYLE_MAPPINGS = { - lineHeight: [ 'typography', 'lineHeight' ], - fontSize: [ 'typography', 'fontSize' ], - background: [ 'color', 'gradient' ], - backgroundColor: [ 'color', 'background' ], - color: [ 'color', 'text' ], - '--wp--style--color--link': [ 'color', 'link' ], - paddingTop: [ 'spacing', 'padding', 'top' ], - paddingRight: [ 'spacing', 'padding', 'right' ], - paddingBottom: [ 'spacing', 'padding', 'bottom' ], - paddingLeft: [ 'spacing', 'padding', 'left' ], -}; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 4ae21d979f9c20..add6f5a5f9910e 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -16,4 +16,3 @@ export * from './components'; export * from './utils'; export { storeConfig } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; -export { STYLE_MAPPINGS as __EXPERIMENTAL_STYLE_MAPPINGS } from './hooks/utils'; diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 9207e7392f2958..e6579ed5a24045 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -10,3 +10,16 @@ export const DEPRECATED_ENTRY_KEYS = [ 'migrate', 'isEligible', ]; + +export const __EXPERIMENTAL_STYLE_PROPERTY = { + '--wp--style--color--link': [ 'color', 'link' ], + background: [ 'color', 'gradient' ], + backgroundColor: [ 'color', 'background' ], + color: [ 'color', 'text' ], + fontSize: [ 'typography', 'fontSize' ], + lineHeight: [ 'typography', 'lineHeight' ], + paddingBottom: [ 'spacing', 'padding', 'bottom' ], + paddingLeft: [ 'spacing', 'padding', 'left' ], + paddingRight: [ 'spacing', 'padding', 'right' ], + paddingTop: [ 'spacing', 'padding', 'top' ], +}; diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 2bc6cfa1ed958e..846a360e961996 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -67,3 +67,4 @@ export { } from './templates'; export { default as children } from './children'; export { default as node } from './node'; +export { __EXPERIMENTAL_STYLE_PROPERTY } from './constants'; diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 4ba01ca35a24fe..193b0bd8c30ad9 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -13,6 +13,7 @@ import { useMemo, } from '@wordpress/element'; import { useEntityProp } from '@wordpress/core-data'; +import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/blocks'; /** * Internal dependencies @@ -21,8 +22,8 @@ import getGlobalStyles from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ - getProperty: ( context, path ) => {}, - setProperty: ( context, path, newValue ) => {}, + getStyleProperty: ( context, propertyName ) => {}, + setStyleProperty: ( context, propertyName, newValue ) => {}, globalContext: {}, /* eslint-enable no-unused-vars */ } ); @@ -44,16 +45,19 @@ export default ( { children, baseStyles, contexts } ) => { const nextValue = useMemo( () => ( { contexts, - getProperty: ( context, path ) => - get( userStyles?.[ context ]?.styles, path ), - setProperty: ( context, path, newValue ) => { + getStyleProperty: ( context, propertyName ) => + get( + userStyles?.[ context ]?.styles, + STYLE_PROPERTY[ propertyName ] + ), + setStyleProperty: ( context, propertyName, newValue ) => { const newContent = { ...userStyles }; let contextStyles = newContent?.[ context ]?.styles; if ( ! contextStyles ) { contextStyles = {}; set( newContent, [ context, 'styles' ], contextStyles ); } - set( contextStyles, path, newValue ); + set( contextStyles, STYLE_PROPERTY[ propertyName ], newValue ); setContent( JSON.stringify( newContent ) ); }, } ), diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 3c2dfc236dd743..1af357df367e9c 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -1,16 +1,17 @@ /** * External dependencies */ -import { get } from 'lodash'; +import { get, kebabCase } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/blocks'; /** * Internal dependencies */ -import { - STYLE_PROPS, - PRESET_CATEGORIES, - LINK_COLOR_DECLARATION, -} from './utils'; +import { PRESET_CATEGORIES, LINK_COLOR_DECLARATION } from './utils'; const mergeTrees = ( baseData, userData ) => { // Deep clone from base data. @@ -56,13 +57,17 @@ export default ( blockData, baseTree, userTree ) => { */ const getBlockStylesDeclarations = ( blockSupports, blockStyles ) => { const declarations = []; - Object.keys( STYLE_PROPS ).forEach( ( key ) => { + Object.keys( STYLE_PROPERTY ).forEach( ( key ) => { + const cssProperty = key.startsWith( '--' ) ? key : kebabCase( key ); if ( blockSupports.includes( key ) && - get( blockStyles, STYLE_PROPS[ key ], false ) + get( blockStyles, STYLE_PROPERTY[ key ], false ) ) { declarations.push( - `${ key }: ${ get( blockStyles, STYLE_PROPS[ key ] ) }` + `${ cssProperty }: ${ get( + blockStyles, + STYLE_PROPERTY[ key ] + ) }` ); } } ); diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index ebb6cd27a8e555..df95ef9eba1f30 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -1,22 +1,7 @@ -/* CSS properties */ -export const FONT_SIZE = 'font-size'; -export const LINK_COLOR = '--wp--style--color--link'; -export const BACKGROUND_COLOR = 'background-color'; -export const GRADIENT_COLOR = 'background'; -export const TEXT_COLOR = 'color'; -export const LINE_HEIGHT = 'line-height'; - /* Supporting data */ export const GLOBAL_CONTEXT = 'global'; export const PRESET_CATEGORIES = [ 'color', 'font-size', 'gradient' ]; -export const STYLE_PROPS = { - [ FONT_SIZE ]: 'typography.fontSize', - [ LINE_HEIGHT ]: 'typography.lineHeight', - [ TEXT_COLOR ]: 'color.text', - [ BACKGROUND_COLOR ]: 'color.background', - [ GRADIENT_COLOR ]: 'color.gradient', - [ LINK_COLOR ]: 'color.link', -}; +export const LINK_COLOR = '--wp--style--color--link'; export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; /* Helpers for unit processing */ diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 2bd1202f7bd8fc..0650cb893a9c79 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -7,22 +7,17 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { - BACKGROUND_COLOR, - GRADIENT_COLOR, - LINK_COLOR, - TEXT_COLOR, -} from '../editor/utils'; +import { LINK_COLOR } from '../editor/utils'; export default ( { context: { supports, name }, - getProperty, - setProperty, + getStyleProperty, + setStyleProperty, } ) => { if ( - ! supports.includes( TEXT_COLOR ) && - ! supports.includes( BACKGROUND_COLOR ) && - ! supports.includes( GRADIENT_COLOR ) && + ! supports.includes( 'color' ) && + ! supports.includes( 'backgrounColor' ) && + ! supports.includes( 'background' ) && ! supports.includes( LINK_COLOR ) ) { return null; @@ -30,36 +25,36 @@ export default ( { const settings = []; - if ( supports.includes( TEXT_COLOR ) ) { + if ( supports.includes( 'color' ) ) { settings.push( { - colorValue: getProperty( name, [ 'color', 'text' ] ), + colorValue: getStyleProperty( name, 'color' ), onColorChange: ( value ) => - setProperty( name, [ 'color', 'text' ], value ), + setStyleProperty( name, 'color', value ), label: __( 'Text color' ), } ); } let backgroundSettings = {}; - if ( supports.includes( BACKGROUND_COLOR ) ) { + if ( supports.includes( 'backgroundColor' ) ) { backgroundSettings = { - colorValue: getProperty( name, [ 'color', 'background' ] ), + colorValue: getStyleProperty( name, 'backgroundColor' ), onColorChange: ( value ) => - setProperty( name, [ 'color', 'background' ], value ), + setStyleProperty( name, 'backgroundColor', value ), }; } let gradientSettings = {}; - if ( supports.includes( GRADIENT_COLOR ) ) { + if ( supports.includes( 'background' ) ) { gradientSettings = { - gradientValue: getProperty( name, [ 'color', 'gradient' ] ), + gradientValue: getStyleProperty( name, 'background' ), onGradientChange: ( value ) => - setProperty( name, [ 'color', 'gradient' ], value ), + setStyleProperty( name, 'background', value ), }; } if ( - supports.includes( GRADIENT_COLOR ) || - supports.includes( BACKGROUND_COLOR ) + supports.includes( 'background' ) || + supports.includes( 'backgroundColor' ) ) { settings.push( { ...backgroundSettings, @@ -70,9 +65,9 @@ export default ( { if ( supports.includes( LINK_COLOR ) ) { settings.push( { - colorValue: getProperty( name, [ 'color', 'link' ] ), + colorValue: getStyleProperty( name, LINK_COLOR ), onColorChange: ( value ) => - setProperty( name, [ 'color', 'link' ], value ), + setStyleProperty( name, LINK_COLOR, value ), label: __( 'Link color' ), } ); } diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index c2f0c58de74b14..5f43aa30d2ea20 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -20,7 +20,11 @@ import TypographyPanel from './typography-panel'; import ColorPanel from './color-panel'; export default ( { identifier, title, icon } ) => { - const { contexts, getProperty, setProperty } = useGlobalStylesContext(); + const { + contexts, + getStyleProperty, + setStyleProperty, + } = useGlobalStylesContext(); if ( typeof contexts !== 'object' || ! contexts?.[ GLOBAL_CONTEXT ] ) { // No sidebar is shown. @@ -84,8 +88,12 @@ export default ( { identifier, title, icon } ) => { supports, name, } } - getProperty={ getProperty } - setProperty={ setProperty } + getStyleProperty={ + getStyleProperty + } + setStyleProperty={ + setStyleProperty + } />, { supports, name, } } - getProperty={ getProperty } - setProperty={ setProperty } + getStyleProperty={ + getStyleProperty + } + setStyleProperty={ + setStyleProperty + } />, ].filter( Boolean ) } @@ -112,8 +124,8 @@ export default ( { identifier, title, icon } ) => { supports, name: blockName, } } - getProperty={ getProperty } - setProperty={ setProperty } + getStyleProperty={ getStyleProperty } + setStyleProperty={ setStyleProperty } />, { supports, name: blockName, } } - getProperty={ getProperty } - setProperty={ setProperty } + getStyleProperty={ getStyleProperty } + setStyleProperty={ setStyleProperty } />, ].filter( Boolean ); } } diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index dece15e0e94f22..24d6ad07b41a17 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -11,48 +11,35 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { FONT_SIZE, LINE_HEIGHT, fromPx, toPx } from '../editor/utils'; +import { fromPx, toPx } from '../editor/utils'; export default ( { context: { supports, name }, - getProperty, - setProperty, + getStyleProperty, + setStyleProperty, } ) => { if ( - ! supports.includes( FONT_SIZE ) && - ! supports.includes( LINE_HEIGHT ) + ! supports.includes( 'fontSize' ) && + ! supports.includes( 'lineHeight' ) ) { return null; } return ( - { supports.includes( FONT_SIZE ) && ( + { supports.includes( 'fontSize' ) && ( - setProperty( - name, - [ 'typography', 'fontSize' ], - toPx( value ) - ) + setStyleProperty( name, 'fontSize', toPx( value ) ) } /> ) } - { supports.includes( LINE_HEIGHT ) && ( + { supports.includes( 'lineHeight' ) && ( - setProperty( - name, - [ 'typography', 'lineHeight' ], - value - ) + setStyleProperty( name, 'lineHeight', value ) } /> ) }