From 25c5adc57bc3f92975e07f505a83a80dbcc944dd Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 30 Jun 2021 23:27:05 +1000
Subject: [PATCH] Button block border: fix block validation issue for numeric
 border radius

---
 packages/block-library/src/button/edit.js      |  8 +++++++-
 packages/block-library/src/button/save.js      | 12 ++++++++++--
 .../core__button__border_radius__numeric.html  |  3 +++
 .../core__button__border_radius__numeric.json  | 18 ++++++++++++++++++
 ..._button__border_radius__numeric.parsed.json | 18 ++++++++++++++++++
 ...ton__border_radius__numeric.serialized.html |  3 +++
 6 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.serialized.html

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 079185d8e2e39e..f4f793c9e45c81 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -202,6 +202,12 @@ function ButtonEdit( props ) {
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
 
+	// For backwards compatibility support number based radius.
+	const borderStyle =
+		typeof style?.border?.radius === 'number' && style?.border?.radius
+			? { borderRadius: style.border.radius }
+			: { ...borderProps.style };
+
 	return (
 		<>
 			<div
@@ -229,7 +235,7 @@ function ButtonEdit( props ) {
 						}
 					) }
 					style={ {
-						...borderProps.style,
+						...borderStyle,
 						...colorProps.style,
 					} }
 					onSplit={ ( value ) =>
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index d462cf52e6dd7b..e298b520ef433a 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -29,6 +29,7 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
+	const borderRadius = style?.border?.radius;
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const buttonClasses = classnames(
@@ -38,11 +39,18 @@ export default function save( { attributes, className } ) {
 		{
 			// For backwards compatibility add style that isn't provided via
 			// block support.
-			'no-border-radius': style?.border?.radius === 0,
+			'no-border-radius': borderRadius === 0,
 		}
 	);
+
+	// For backwards compatibility support number based radius.
+	const borderStyle =
+		typeof borderRadius === 'number' && borderRadius
+			? { borderRadius: style.border.radius }
+			: { ...borderProps.style };
+
 	const buttonStyle = {
-		...borderProps.style,
+		...borderStyle,
 		...colorProps.style,
 	};
 
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.html b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.html
new file mode 100644
index 00000000000000..9d2461bf142c29
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.html
@@ -0,0 +1,3 @@
+<!-- wp:button {"style":{"border":{"radius":1}},"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius:1px">Where We Are</a></div>
+<!-- /wp:button -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.json
new file mode 100644
index 00000000000000..8bee6084d33a5a
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.json
@@ -0,0 +1,18 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/button",
+		"isValid": true,
+		"attributes": {
+			"text": "Where We Are",
+			"className": "is-style-outline",
+			"style": {
+				"border": {
+					"radius": 1
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": "<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" style=\"border-radius:1px\">Where We Are</a></div>"
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.parsed.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.parsed.json
new file mode 100644
index 00000000000000..d0a65a17dde088
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.parsed.json
@@ -0,0 +1,18 @@
+[
+	{
+		"blockName": "core/button",
+		"attrs": {
+			"style": {
+				"border": {
+					"radius": 1
+				}
+			},
+			"className": "is-style-outline"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" style=\"border-radius:1px\">Where We Are</a></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" style=\"border-radius:1px\">Where We Are</a></div>\n"
+		]
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.serialized.html
new file mode 100644
index 00000000000000..d71c0f5611ace3
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__numeric.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:button {"className":"is-style-outline","style":{"border":{"radius":1}}} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius:1px">Where We Are</a></div>
+<!-- /wp:button -->