From 09fb536005ac90d67bc806479b5769a7b1c2916d Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Fri, 9 Apr 2021 18:10:51 +0200
Subject: [PATCH 1/9] Button Block: Use hook based border support

---
 packages/block-editor/CHANGELOG.md            |   4 +
 packages/block-editor/src/hooks/index.js      |   2 +
 packages/block-editor/src/index.js            |   1 +
 packages/block-library/src/button/block.json  |  10 +-
 .../block-library/src/button/deprecated.js    | 131 +++++++++++++++++-
 packages/block-library/src/button/edit.js     |  44 +-----
 packages/block-library/src/button/save.js     |  18 +--
 ...re__button__border_radius__deprecated.html |   3 +
 ...re__button__border_radius__deprecated.json |  27 ++++
 ...ton__border_radius__deprecated.parsed.json |  20 +++
 ..._border_radius__deprecated.serialized.html |   5 +
 .../blocks/core__button__squared.html         |   4 +-
 .../blocks/core__button__squared.json         |   6 +-
 .../blocks/core__button__squared.parsed.json  |   8 +-
 .../core__button__squared.serialized.html     |   4 +-
 .../adding-patterns.test.js.snap              |   6 +-
 16 files changed, 221 insertions(+), 72 deletions(-)
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 5b420e088ea021..0ceb22551297b1 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Feature
+
+-   Export `__experimentalGetInlineStyles` to enable blocks to flatten nested style attributes into CSS properties ([#26655](https://github.com/WordPress/gutenberg/pull/30194)).
+
 ## 5.3.0 (2021-03-17)
 
 -   Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index c087e994ba9eb9..6ad75479d78a5f 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -9,3 +9,5 @@ import './style';
 import './color';
 import './font-size';
 import './layout';
+
+export { getInlineStyles } from './style';
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index e8a1ebcd480c2b..bbc46f5352051d 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -7,6 +7,7 @@ import '@wordpress/rich-text';
  * Internal dependencies
  */
 import './hooks';
+export { getInlineStyles as __experimentalGetInlineStyles } from './hooks';
 export * from './components';
 export * from './utils';
 export { storeConfig, store } from './store';
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 08887e163c4b53..a9b483981eccf7 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -36,12 +36,6 @@
 		"placeholder": {
 			"type": "string"
 		},
-		"borderRadius": {
-			"type": "number"
-		},
-		"style": {
-			"type": "object"
-		},
 		"backgroundColor": {
 			"type": "string"
 		},
@@ -65,6 +59,10 @@
 		},
 		"fontSize": true,
 		"reusable": false,
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true
+		},
 		"__experimentalFontFamily": true,
 		"__experimentalSelector": ".wp-block-button__link"
 	},
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index 95b8f9fe7eb923..630cd888345154 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -13,12 +13,29 @@ import {
 	useBlockProps,
 	__experimentalGetGradientClass,
 } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import getColorAndStyleProps from './color-props';
 
+const migrateBorderRadius = ( attributes ) => {
+	const { borderRadius, ...newAttributes } = attributes;
+
+	if ( ! borderRadius && borderRadius !== 0 ) {
+		return newAttributes;
+	}
+
+	return {
+		...newAttributes,
+		style: {
+			...newAttributes.style,
+			border: { radius: borderRadius },
+		},
+	};
+};
+
 const migrateCustomColorsAndGradients = ( attributes ) => {
 	if (
 		! attributes.customTextColor &&
@@ -180,6 +197,102 @@ const deprecated = [
 				</div>
 			);
 		},
+		migrate: migrateBorderRadius,
+	},
+	{
+		supports: {
+			anchor: true,
+			align: true,
+			alignWide: false,
+			color: {
+				__experimentalSkipSerialization: true,
+			},
+			reusable: false,
+			__experimentalSelector: '.wp-block-button__link',
+		},
+		attributes: {
+			...blockAttributes,
+			linkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'target',
+			},
+			rel: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'rel',
+			},
+			placeholder: {
+				type: 'string',
+			},
+			borderRadius: {
+				type: 'number',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			gradient: {
+				type: 'string',
+			},
+			style: {
+				type: 'object',
+			},
+			width: {
+				type: 'number',
+			},
+		},
+		save( { attributes, className } ) {
+			const {
+				borderRadius,
+				linkTarget,
+				rel,
+				text,
+				title,
+				url,
+				width,
+			} = attributes;
+			const colorProps = getColorAndStyleProps( attributes );
+			const buttonClasses = classnames(
+				'wp-block-button__link',
+				colorProps.className,
+				{
+					'no-border-radius': borderRadius === 0,
+				}
+			);
+			const buttonStyle = {
+				borderRadius: borderRadius ? borderRadius + 'px' : undefined,
+				...colorProps.style,
+			};
+
+			// The use of a `title` attribute here is soft-deprecated, but still applied
+			// if it had already been assigned, for the sake of backward-compatibility.
+			// A title will no longer be assigned for new or updated button block links.
+
+			const wrapperClasses = classnames( className, {
+				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			} );
+
+			return (
+				<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+					<RichText.Content
+						tagName="a"
+						className={ buttonClasses }
+						href={ url }
+						title={ title }
+						style={ buttonStyle }
+						value={ text }
+						target={ linkTarget }
+						rel={ rel }
+					/>
+				</div>
+			);
+		},
+		migrate: migrateBorderRadius,
 	},
 	{
 		supports: {
@@ -249,6 +362,7 @@ const deprecated = [
 				/>
 			);
 		},
+		migrate: migrateBorderRadius,
 	},
 	{
 		supports: {
@@ -299,7 +413,10 @@ const deprecated = [
 			!! attributes.customTextColor ||
 			!! attributes.customBackgroundColor ||
 			!! attributes.customGradient,
-		migrate: migrateCustomColorsAndGradients,
+		migrate: compose(
+			migrateBorderRadius,
+			migrateCustomColorsAndGradients
+		),
 		save( { attributes } ) {
 			const {
 				backgroundColor,
@@ -413,11 +530,13 @@ const deprecated = [
 					.replace( /is-style-squared[\s]?/, '' )
 					.trim();
 			}
-			return migrateCustomColorsAndGradients( {
-				...attributes,
-				className: newClassName ? newClassName : undefined,
-				borderRadius: 0,
-			} );
+			return migrateBorderRadius(
+				migrateCustomColorsAndGradients( {
+					...attributes,
+					className: newClassName ? newClassName : undefined,
+					borderRadius: 0,
+				} )
+			);
 		},
 		save( { attributes } ) {
 			const {
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 714554e2ffdc96..26c197464ce967 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -13,7 +13,6 @@ import {
 	ButtonGroup,
 	KeyboardShortcuts,
 	PanelBody,
-	RangeControl,
 	TextControl,
 	ToolbarButton,
 	Popover,
@@ -24,6 +23,7 @@ import {
 	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
+	__experimentalGetInlineStyles as getInlineStyles,
 	__experimentalLinkControl as LinkControl,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
@@ -37,39 +37,9 @@ import { createBlock } from '@wordpress/blocks';
 import getColorAndStyleProps from './color-props';
 
 const NEW_TAB_REL = 'noreferrer noopener';
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUE = 50;
-const INITIAL_BORDER_RADIUS_POSITION = 5;
 
 const EMPTY_ARRAY = [];
 
-function BorderPanel( { borderRadius = '', setAttributes } ) {
-	const initialBorderRadius = borderRadius;
-	const setBorderRadius = useCallback(
-		( newBorderRadius ) => {
-			if ( newBorderRadius === undefined )
-				setAttributes( {
-					borderRadius: initialBorderRadius,
-				} );
-			else setAttributes( { borderRadius: newBorderRadius } );
-		},
-		[ setAttributes ]
-	);
-	return (
-		<PanelBody title={ __( 'Border settings' ) }>
-			<RangeControl
-				value={ borderRadius }
-				label={ __( 'Border radius' ) }
-				min={ MIN_BORDER_RADIUS_VALUE }
-				max={ MAX_BORDER_RADIUS_VALUE }
-				initialPosition={ INITIAL_BORDER_RADIUS_POSITION }
-				allowReset
-				onChange={ setBorderRadius }
-			/>
-		</PanelBody>
-	);
-}
-
 function WidthPanel( { selectedWidth, setAttributes } ) {
 	function handleChange( newWidth ) {
 		// Check if we are toggling the width off
@@ -191,10 +161,10 @@ function ButtonEdit( props ) {
 		mergeBlocks,
 	} = props;
 	const {
-		borderRadius,
 		linkTarget,
 		placeholder,
 		rel,
+		style,
 		text,
 		url,
 		width,
@@ -255,13 +225,11 @@ function ButtonEdit( props ) {
 						'wp-block-button__link',
 						colorProps.className,
 						{
-							'no-border-radius': borderRadius === 0,
+							'no-border-radius': style?.border?.radius === 0,
 						}
 					) }
 					style={ {
-						borderRadius: borderRadius
-							? borderRadius + 'px'
-							: undefined,
+						...getInlineStyles( style ),
 						...colorProps.style,
 					} }
 					onSplit={ ( value ) =>
@@ -284,10 +252,6 @@ function ButtonEdit( props ) {
 				anchorRef={ ref }
 			/>
 			<InspectorControls>
-				<BorderPanel
-					borderRadius={ borderRadius }
-					setAttributes={ setAttributes }
-				/>
 				<WidthPanel
 					selectedWidth={ width }
 					setAttributes={ setAttributes }
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index 9bb0435eb1eda9..75d745628e6780 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetInlineStyles as getInlineStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -15,7 +19,6 @@ import getColorAndStyleProps from './color-props';
 
 export default function save( { attributes, className } ) {
 	const {
-		borderRadius,
 		fontSize,
 		linkTarget,
 		rel,
@@ -35,13 +38,9 @@ export default function save( { attributes, className } ) {
 		'wp-block-button__link',
 		colorProps.className,
 		{
-			'no-border-radius': borderRadius === 0,
+			'no-border-radius': style?.border?.radius === 0,
 		}
 	);
-	const buttonStyle = {
-		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
-		...colorProps.style,
-	};
 
 	// The use of a `title` attribute here is soft-deprecated, but still applied
 	// if it had already been assigned, for the sake of backward-compatibility.
@@ -59,7 +58,10 @@ export default function save( { attributes, className } ) {
 				className={ buttonClasses }
 				href={ url }
 				title={ title }
-				style={ buttonStyle }
+				style={ {
+					...getInlineStyles( style ),
+					...colorProps.style,
+				} }
 				value={ text }
 				target={ linkTarget }
 				rel={ rel }
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.html b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.html
new file mode 100644
index 00000000000000..dec35ad302a827
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.html
@@ -0,0 +1,3 @@
+<!-- wp:button {"borderRadius":25} -->
+<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:25px">My button</a></div>
+<!-- /wp:button --></div>
\ No newline at end of file
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json
new file mode 100644
index 00000000000000..00f2d0ab540744
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json
@@ -0,0 +1,27 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/button",
+		"isValid": true,
+		"attributes": {
+			"text": "My button",
+			"style": {
+				"border": {
+					"radius": 25
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" style=\"border-radius:25px\">My button</a></div>"
+	},
+	{
+		"clientId": "_clientId_1",
+		"name": "core/freeform",
+		"isValid": true,
+		"attributes": {
+			"content": ""
+		},
+		"innerBlocks": [],
+		"originalContent": "</div>"
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json
new file mode 100644
index 00000000000000..952ca954b416c6
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json
@@ -0,0 +1,20 @@
+[
+	{
+		"blockName": "core/button",
+		"attrs": {
+			"borderRadius": 25
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" style=\"border-radius:25px\">My button</a></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" style=\"border-radius:25px\">My button</a></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "</div>",
+		"innerContent": [ "</div>" ]
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
new file mode 100644
index 00000000000000..4cc048a9c2e7eb
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:button {"style":{"border":{"radius":25}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:25px">My button</a></div>
+<!-- /wp:button -->
+
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.html
index 14aa9b56305fa7..e5bb0ee927f56c 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.html
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.html
@@ -1,3 +1,3 @@
-<!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link no-border-radius has-text-color has-background" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
+<!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link no-border-radius has-text-color has-background" style="background-color:#aa5a20;border-radius:0;color:#1b9b6c">My button</a></div>
 <!-- /wp:button -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.json
index b6aa4a27b47d43..858f6db4e84447 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.json
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.json
@@ -5,8 +5,10 @@
 		"isValid": true,
 		"attributes": {
 			"text": "My button",
-			"borderRadius": 0,
 			"style": {
+				"border": {
+					"radius": 0
+				},
 				"color": {
 					"text": "#1b9b6c",
 					"background": "#aa5a20"
@@ -14,6 +16,6 @@
 			}
 		},
 		"innerBlocks": [],
-		"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>"
+		"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;border-radius:0;color:#1b9b6c\">My button</a></div>"
 	}
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json
index 9882ddb6dca5d5..535c1f24e783c2 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json
@@ -2,8 +2,10 @@
 	{
 		"blockName": "core/button",
 		"attrs": {
-			"borderRadius": 0,
 			"style": {
+				"border": {
+					"radius": 0
+				},
 				"color": {
 					"text": "#1b9b6c",
 					"background": "#aa5a20"
@@ -11,9 +13,9 @@
 			}
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n",
+		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;border-radius:0;color:#1b9b6c\">My button</a></div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n"
+			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;border-radius:0;color:#1b9b6c\">My button</a></div>\n"
 		]
 	},
 	{
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html
index aea05e9fe5eba2..84da206f1a3169 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
+<!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#aa5a20;border-radius:0;color:#1b9b6c">My button</a></div>
 <!-- /wp:button -->
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
index d3894f3030d376..b8886334c07b0d 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`adding patterns should insert a block pattern 1`] = `
 "<!-- wp:buttons {\\"contentJustification\\":\\"center\\"} -->
-<div class=\\"wp-block-buttons is-content-justification-center\\"><!-- wp:button {\\"borderRadius\\":2,\\"style\\":{\\"color\\":{\\"background\\":\\"#ba0c49\\",\\"text\\":\\"#fffffa\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-text-color has-background\\" style=\\"border-radius:2px;background-color:#ba0c49;color:#fffffa\\">Download now</a></div>
+<div class=\\"wp-block-buttons is-content-justification-center\\"><!-- wp:button {\\"style\\":{\\"color\\":{\\"background\\":\\"#ba0c49\\",\\"text\\":\\"#fffffa\\"},\\"border\\":{\\"radius\\":2}}} -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-text-color has-background\\" style=\\"background-color:#ba0c49;border-radius:2px;color:#fffffa\\">Download now</a></div>
 <!-- /wp:button -->
 
-<!-- wp:button {\\"borderRadius\\":2,\\"style\\":{\\"color\\":{\\"text\\":\\"#ba0c49\\"}},\\"className\\":\\"is-style-outline\\"} -->
+<!-- wp:button {\\"style\\":{\\"color\\":{\\"text\\":\\"#ba0c49\\"},\\"border\\":{\\"radius\\":2}},\\"className\\":\\"is-style-outline\\"} -->
 <div class=\\"wp-block-button is-style-outline\\"><a class=\\"wp-block-button__link has-text-color\\" style=\\"border-radius:2px;color:#ba0c49\\">About Cervantes</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"

From 3871316b538bd2fd8fe57388a07884d2c2776b22 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 12 Apr 2021 18:34:02 +0200
Subject: [PATCH 2/9] Un-export __experimentalGetInlineStyles

---
 packages/block-editor/CHANGELOG.md       | 6 +-----
 packages/block-editor/src/hooks/index.js | 2 --
 packages/block-editor/src/index.js       | 1 -
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 0ceb22551297b1..e0ce647afb14bb 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,13 +2,9 @@
 
 ## Unreleased
 
-### New Feature
-
--   Export `__experimentalGetInlineStyles` to enable blocks to flatten nested style attributes into CSS properties ([#26655](https://github.com/WordPress/gutenberg/pull/30194)).
-
 ## 5.3.0 (2021-03-17)
 
--   Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
+- Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
 
 ## 5.2.0 (2020-12-17)
 
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 6ad75479d78a5f..c087e994ba9eb9 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -9,5 +9,3 @@ import './style';
 import './color';
 import './font-size';
 import './layout';
-
-export { getInlineStyles } from './style';
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index bbc46f5352051d..e8a1ebcd480c2b 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -7,7 +7,6 @@ import '@wordpress/rich-text';
  * Internal dependencies
  */
 import './hooks';
-export { getInlineStyles as __experimentalGetInlineStyles } from './hooks';
 export * from './components';
 export * from './utils';
 export { storeConfig, store } from './store';

From 179d73d0d7376b1f00097bd6f4c743128cb4450c Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 12 Apr 2021 18:38:14 +0200
Subject: [PATCH 3/9] Re-simplify

---
 packages/block-library/src/button/edit.js |  8 +++++---
 packages/block-library/src/button/save.js | 17 ++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 26c197464ce967..328bf9af5da36e 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -23,7 +23,6 @@ import {
 	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
-	__experimentalGetInlineStyles as getInlineStyles,
 	__experimentalLinkControl as LinkControl,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
@@ -201,6 +200,7 @@ function ButtonEdit( props ) {
 		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
 	};
 
+	const borderRadius = style?.border?.radius;
 	const colorProps = getColorAndStyleProps( attributes, colors, true );
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
@@ -225,11 +225,13 @@ function ButtonEdit( props ) {
 						'wp-block-button__link',
 						colorProps.className,
 						{
-							'no-border-radius': style?.border?.radius === 0,
+							'no-border-radius': borderRadius === 0,
 						}
 					) }
 					style={ {
-						...getInlineStyles( style ),
+						borderRadius: borderRadius
+							? borderRadius + 'px'
+							: undefined,
 						...colorProps.style,
 					} }
 					onSplit={ ( value ) =>
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index 75d745628e6780..e6de048ba02da2 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	__experimentalGetInlineStyles as getInlineStyles,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -33,6 +29,7 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
+	const borderRadius = style?.border?.radius;
 	const colorProps = getColorAndStyleProps( attributes );
 	const buttonClasses = classnames(
 		'wp-block-button__link',
@@ -42,6 +39,11 @@ export default function save( { attributes, className } ) {
 		}
 	);
 
+	const buttonStyle = {
+		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
+		...colorProps.style,
+	};
+
 	// The use of a `title` attribute here is soft-deprecated, but still applied
 	// if it had already been assigned, for the sake of backward-compatibility.
 	// A title will no longer be assigned for new or updated button block links.
@@ -58,10 +60,7 @@ export default function save( { attributes, className } ) {
 				className={ buttonClasses }
 				href={ url }
 				title={ title }
-				style={ {
-					...getInlineStyles( style ),
-					...colorProps.style,
-				} }
+				style={ buttonStyle }
 				value={ text }
 				target={ linkTarget }
 				rel={ rel }

From af1f64de1b6a72b82bad712bd3437217d83c3714 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 12 Apr 2021 18:59:43 +0200
Subject: [PATCH 4/9] Moar simple

---
 packages/block-library/src/button/save.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index e6de048ba02da2..83803ab3548edc 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -35,7 +35,7 @@ export default function save( { attributes, className } ) {
 		'wp-block-button__link',
 		colorProps.className,
 		{
-			'no-border-radius': style?.border?.radius === 0,
+			'no-border-radius': borderRadius === 0,
 		}
 	);
 

From 4dd61a7391a26a3246b398beb2747bc9260aa88f Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 12 Apr 2021 19:00:08 +0200
Subject: [PATCH 5/9] Undo whitespace change

---
 packages/block-library/src/button/save.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index 83803ab3548edc..89ab82064ea47d 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -38,7 +38,6 @@ export default function save( { attributes, className } ) {
 			'no-border-radius': borderRadius === 0,
 		}
 	);
-
 	const buttonStyle = {
 		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 		...colorProps.style,

From e836de38d9e4e46b5246dbfb61902499cf432501 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 12 Apr 2021 19:24:00 +0200
Subject: [PATCH 6/9] Update snapshots

---
 packages/e2e-tests/fixtures/blocks/core__button__squared.html | 2 +-
 packages/e2e-tests/fixtures/blocks/core__button__squared.json | 2 +-
 .../fixtures/blocks/core__button__squared.parsed.json         | 4 ++--
 .../fixtures/blocks/core__button__squared.serialized.html     | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.html
index e5bb0ee927f56c..fa615a348d0ff0 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.html
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link no-border-radius has-text-color has-background" style="background-color:#aa5a20;border-radius:0;color:#1b9b6c">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link no-border-radius has-text-color has-background" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
 <!-- /wp:button -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.json
index 858f6db4e84447..67d2b63e6c5510 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.json
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.json
@@ -16,6 +16,6 @@
 			}
 		},
 		"innerBlocks": [],
-		"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;border-radius:0;color:#1b9b6c\">My button</a></div>"
+		"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>"
 	}
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json
index 535c1f24e783c2..6a5b451fe8ad2b 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json
@@ -13,9 +13,9 @@
 			}
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;border-radius:0;color:#1b9b6c\">My button</a></div>\n",
+		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;border-radius:0;color:#1b9b6c\">My button</a></div>\n"
+			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n"
 		]
 	},
 	{
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html
index 84da206f1a3169..29e7fed15a510c 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#aa5a20;border-radius:0;color:#1b9b6c">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
 <!-- /wp:button -->

From 1e9496fdda23beb2d05c58f0a94e3a24ab431a10 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 13 Apr 2021 16:37:23 +0200
Subject: [PATCH 7/9] Enable border radius for core/button by default

---
 lib/experimental-default-theme.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index da910ca84747a7..5eebd221e8a2c6 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -173,6 +173,11 @@
 			"border": {
 				"customRadius": false
 			}
+		},
+		"core/button": {
+			"border": {
+				"customRadius": true
+			}
 		}
 	}
 }

From 363611be74b9cb5719b307ea241763f2ad9b08f1 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 13 Apr 2021 17:05:00 +0200
Subject: [PATCH 8/9] Revert an unrelated change

---
 packages/block-editor/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index e0ce647afb14bb..5b420e088ea021 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ## 5.3.0 (2021-03-17)
 
-- Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
+-   Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
 
 ## 5.2.0 (2020-12-17)
 

From 02d2f8e6c1f3d419b369ea2441dfccedb5f8ec95 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 13 Apr 2021 20:26:31 +0200
Subject: [PATCH 9/9] Update snapshot

---
 .../editor/various/__snapshots__/adding-patterns.test.js.snap   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
index b8886334c07b0d..85eaf50e88cead 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
@@ -3,7 +3,7 @@
 exports[`adding patterns should insert a block pattern 1`] = `
 "<!-- wp:buttons {\\"contentJustification\\":\\"center\\"} -->
 <div class=\\"wp-block-buttons is-content-justification-center\\"><!-- wp:button {\\"style\\":{\\"color\\":{\\"background\\":\\"#ba0c49\\",\\"text\\":\\"#fffffa\\"},\\"border\\":{\\"radius\\":2}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-text-color has-background\\" style=\\"background-color:#ba0c49;border-radius:2px;color:#fffffa\\">Download now</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-text-color has-background\\" style=\\"border-radius:2px;background-color:#ba0c49;color:#fffffa\\">Download now</a></div>
 <!-- /wp:button -->
 
 <!-- wp:button {\\"style\\":{\\"color\\":{\\"text\\":\\"#ba0c49\\"},\\"border\\":{\\"radius\\":2}},\\"className\\":\\"is-style-outline\\"} -->