diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index e042a2de83cac4..7632943e5d075d 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -75,10 +75,3 @@ export function PaddingEdit( props ) { native: null, } ); } - -export const paddingStyleMappings = { - paddingTop: [ 'spacing', 'padding', 'top' ], - paddingRight: [ 'spacing', 'padding', 'right' ], - paddingBottom: [ 'spacing', 'padding', 'bottom' ], - paddingLeft: [ 'spacing', 'padding', 'left' ], -}; diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index de5de6c278951d..5ef485a672c652 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -15,12 +15,9 @@ import { createHigherOrderComponent } from '@wordpress/compose'; */ import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; -import { - PADDING_SUPPORT_KEY, - PaddingEdit, - paddingStyleMappings, -} from './padding'; +import { PADDING_SUPPORT_KEY, PaddingEdit } from './padding'; import SpacingPanelControl from '../components/spacing-panel-control'; +import { STYLE_MAPPINGS } from './utils'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, @@ -52,18 +49,8 @@ function compileStyleValue( uncompiledValue ) { * @return {Object} Flattened CSS variables declaration */ export function getInlineStyles( styles = {} ) { - const mappings = { - ...paddingStyleMappings, - lineHeight: [ 'typography', 'lineHeight' ], - fontSize: [ 'typography', 'fontSize' ], - background: [ 'color', 'gradient' ], - backgroundColor: [ 'color', 'background' ], - color: [ 'color', 'text' ], - '--wp--style--color--link': [ 'color', 'link' ], - }; - const output = {}; - Object.entries( mappings ).forEach( + Object.entries( STYLE_MAPPINGS ).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 dba018f2cfc8aa..62e771b1a8b0bc 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -21,3 +21,16 @@ 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 add6f5a5f9910e..4ae21d979f9c20 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -16,3 +16,4 @@ 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';