Button: Update to use border support provided styles and classes (#33017

)
WordPress · Jun 29, 2021 · f1e2f3b · f1e2f3b
1 parent 37d6024
commit f1e2f3b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
@@ -27,7 +27,7 @@ const migrateBorderRadius = ( attributes ) => {
 		...newAttributes,
 		style: {
 			...newAttributes.style,
-			border: { radius: borderRadius },
+			border: { radius: `${ borderRadius }px` },
 		},
 	};
 };

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -23,6 +23,7 @@ import {
 	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
@@ -196,7 +197,7 @@ function ButtonEdit( props ) {
 		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
 	};
 
-	const borderRadius = style?.border?.radius;
+	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
@@ -220,12 +221,15 @@ function ButtonEdit( props ) {
 						className,
 						'wp-block-button__link',
 						colorProps.className,
+						borderProps.className,
 						{
-							'no-border-radius': borderRadius === 0,
+							// For backwards compatibility add style that isn't
+							// provided via block support.
+							'no-border-radius': style?.border?.radius === 0,
 						}
 					) }
 					style={ {
-						borderRadius: borderRadius ? borderRadius : undefined,
+						...borderProps.style,
 						...colorProps.style,
 					} }
 					onSplit={ ( value ) =>

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
@@ -28,17 +29,20 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
-	const borderRadius = style?.border?.radius;
+	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const buttonClasses = classnames(
 		'wp-block-button__link',
 		colorProps.className,
+		borderProps.className,
 		{
-			'no-border-radius': borderRadius === 0,
+			// For backwards compatibility add style that isn't provided via
+			// block support.
+			'no-border-radius': style?.border?.radius === 0,
 		}
 	);
 	const buttonStyle = {
-		borderRadius: borderRadius ? borderRadius : undefined,
+		...borderProps.style,
 		...colorProps.style,
 	};
 

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
@@ -7,7 +7,7 @@
 			"text": "My button",
 			"style": {
 				"border": {
-					"radius": 25
+					"radius": "25px"
 				}
 			}
 		},

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
@@ -1,4 +1,4 @@
-<!-- wp:button {"style":{"border":{"radius":25}}} -->
+<!-- wp:button {"style":{"border":{"radius":"25px"}}} -->
 <div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:25px">My button</a></div>
 <!-- /wp:button -->