From 8a25589dd84aa00ccae5e5b04c873ab37b8e0f20 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 10 May 2021 16:14:37 +1000
Subject: [PATCH] Update block support style generation for named subpaths

---
 packages/block-editor/src/hooks/style.js      | 26 ++++++++++++++-----
 packages/block-editor/src/hooks/test/style.js | 20 ++++++++++++++
 packages/blocks/src/api/constants.js          |  6 +++++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 601ceb6791f7d..ca21f7484b9b4 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -8,6 +8,7 @@ import {
 	get,
 	has,
 	isEmpty,
+	isString,
 	kebabCase,
 	map,
 	omit,
@@ -77,12 +78,25 @@ export function getInlineStyles( styles = {} ) {
 		const subPaths = STYLE_PROPERTY[ propKey ].properties;
 		// Ignore styles on elements because they are handled on the server.
 		if ( has( styles, path ) && 'elements' !== first( path ) ) {
-			if ( !! subPaths ) {
-				subPaths.forEach( ( suffix ) => {
-					output[
-						propKey + capitalize( suffix )
-					] = compileStyleValue( get( styles, [ ...path, suffix ] ) );
-				} );
+			// Checking if style value is a string allows for shorthand css
+			// option and backwards compatibility for border radius support.
+			const styleValue = get( styles, path );
+
+			if ( !! subPaths && ! isString( styleValue ) ) {
+				if ( Array.isArray( subPaths ) ) {
+					subPaths.forEach( ( suffix ) => {
+						output[
+							propKey + capitalize( suffix )
+						] = compileStyleValue( get( styleValue, [ suffix ] ) );
+					} );
+				} else {
+					Object.entries( subPaths ).forEach( ( entry ) => {
+						const [ name, suffix ] = entry;
+						output[ name ] = compileStyleValue(
+							get( styleValue, [ suffix ] )
+						);
+					} );
+				}
 			} else {
 				output[ propKey ] = compileStyleValue( get( styles, path ) );
 			}
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index 85adb56c802e1..9efdb3e939b91 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/packages/block-editor/src/hooks/test/style.js
@@ -41,4 +41,24 @@ describe( 'getInlineStyles', () => {
 			paddingTop: '10px',
 		} );
 	} );
+
+	it( 'should return individual border radius styles', () => {
+		expect(
+			getInlineStyles( {
+				border: {
+					radius: {
+						topLeft: '10px',
+						topRight: '0.5rem',
+						bottomLeft: '0.5em',
+						bottomRight: '1em',
+					},
+				},
+			} )
+		).toEqual( {
+			borderTopLeftRadius: '10px',
+			borderTopRightRadius: '0.5rem',
+			borderBottomLeftRadius: '0.5em',
+			borderBottomRightRadius: '1em',
+		} );
+	} );
 } );
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 3a827f444974e..fad0b9b7eee8d 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -33,6 +33,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	borderRadius: {
 		value: [ 'border', 'radius' ],
 		support: [ '__experimentalBorder', 'radius' ],
+		properties: {
+			borderTopLeftRadius: 'topLeft',
+			borderTopRightRadius: 'topRight',
+			borderBottomLeftRadius: 'bottomLeft',
+			borderBottomRightRadius: 'bottomRight',
+		},
 	},
 	borderStyle: {
 		value: [ 'border', 'style' ],