From 1033beb5058ce7d23bd9fae0e1a361e8ac40f159 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 13 Jul 2021 15:11:44 -0700
Subject: [PATCH] Fix: Button button value to be stored as a value + unit

---
 .../block-library/src/button/edit.native.js   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index 923ed47282efb8..764b9c7a201c20 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -243,7 +243,7 @@ class ButtonEdit extends Component {
 			...style,
 			border: {
 				...style?.border,
-				radius: newRadius,
+				radius: `${ newRadius }px`, // Store the value with the px value so that it works as expected.
 			},
 		};
 
@@ -368,6 +368,16 @@ class ButtonEdit extends Component {
 		}
 	}
 
+	getBorderRadiusValue( borderRadius, defaultBorderRadius ) {
+		// Return an integer value for the border Radius.
+		// Since that is what the we expect that value to be.
+		if ( Number.isInteger( parseInt( borderRadius ) ) ) {
+			return parseInt( borderRadius );
+		}
+
+		return defaultBorderRadius;
+	}
+
 	render() {
 		const {
 			attributes,
@@ -395,10 +405,11 @@ class ButtonEdit extends Component {
 		}
 
 		const borderRadius = buttonStyle?.border?.radius;
+		const borderRadiusValue = this.getBorderRadiusValue(
+			borderRadius,
+			styles.defaultButton.borderRadius
+		);
 
-		const borderRadiusValue = Number.isInteger( borderRadius )
-			? borderRadius
-			: styles.defaultButton.borderRadius;
 		const outlineBorderRadius =
 			borderRadiusValue > 0
 				? borderRadiusValue + spacing + borderWidth