Support shorthand properties in site editor.

WordPress · Apr 7, 2022 · 7634aab · 7634aab
1 parent fedf6ff
commit 7634aab
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
@@ -118,24 +118,15 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'spacing', 'blockGap' ],
 		support: [ 'spacing', 'blockGap' ],
 	},
-	'--wp--style--root--padding-top': {
-		value: [ 'spacing', 'padding', 'top' ],
-		support: [ 'spacing', 'padding' ],
-		rootOnly: true,
-	},
-	'--wp--style--root--padding-right': {
-		value: [ 'spacing', 'padding', 'right' ],
-		support: [ 'spacing', 'padding' ],
-		rootOnly: true,
-	},
-	'--wp--style--root--padding-bottom': {
-		value: [ 'spacing', 'padding', 'bottom' ],
-		support: [ 'spacing', 'padding' ],
-		rootOnly: true,
-	},
-	'--wp--style--root--padding-left': {
-		value: [ 'spacing', 'padding', 'left' ],
+	'--wp--style--root--padding': {
+		value: [ 'spacing', 'padding' ],
 		support: [ 'spacing', 'padding' ],
+		properties: {
+			'--wp--style--root--padding-top': 'top',
+			'--wp--style--root--padding-right': 'right',
+			'--wp--style--root--padding-bottom': 'bottom',
+			'--wp--style--root--padding-left': 'left',
+		},
 		rootOnly: true,
 	},
 };

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -178,6 +178,54 @@ function getStylesDeclarations( blockStyles = {}, isRoot = false ) {
 						) }`
 					);
 				} );
+			} else if ( !! properties && isString( styleValue ) && rootOnly ) {
+				const separateValues = styleValue.split( ' ' );
+
+				const sortedBoxValues = {
+					top: '17px',
+					right: '17px',
+					bottom: '17px',
+					left: '17px',
+				};
+
+				switch ( separateValues.length ) {
+					case 1:
+						sortedBoxValues.top = separateValues[ 0 ];
+						sortedBoxValues.right = separateValues[ 0 ];
+						sortedBoxValues.bottom = separateValues[ 0 ];
+						sortedBoxValues.left = separateValues[ 0 ];
+						break;
+					case 2:
+						sortedBoxValues.top = separateValues[ 0 ];
+						sortedBoxValues.right = separateValues[ 1 ];
+						sortedBoxValues.bottom = separateValues[ 0 ];
+						sortedBoxValues.left = separateValues[ 1 ];
+						break;
+					case 3:
+						sortedBoxValues.top = separateValues[ 0 ];
+						sortedBoxValues.right = separateValues[ 1 ];
+						sortedBoxValues.bottom = separateValues[ 2 ];
+						sortedBoxValues.left = separateValues[ 1 ];
+						break;
+					case 4:
+						sortedBoxValues.top = separateValues[ 0 ];
+						sortedBoxValues.right = separateValues[ 1 ];
+						sortedBoxValues.bottom = separateValues[ 2 ];
+						sortedBoxValues.left = separateValues[ 3 ];
+						break;
+				}
+
+				Object.entries( properties ).forEach( ( entry ) => {
+					const [ name, prop ] = entry;
+					const cssProperty = name.startsWith( '--' )
+						? name
+						: kebabCase( name );
+					declarations.push(
+						`${ cssProperty }: ${ compileStyleValue(
+							get( sortedBoxValues, [ prop ] )
+						) }`
+					);
+				} );
 			} else if ( get( blockStyles, pathToValue, false ) ) {
 				const cssProperty = key.startsWith( '--' )
 					? key