Centralize client side global styles mappings (#25056)

WordPress · Sep 8, 2020 · d978655 · d978655
1 parent 149849e
commit d978655
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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';