Add: Border radius button to button and update button styles. (#17253)

packages/block-library/src/button/block.json

@@ -45,6 +45,9 @@
 		},
 		"placeholder": {
 			"type": "string"
+		},
+		"borderRadius": {
+			"type": "number"
 		}
 	}
 }

packages/block-library/src/button/deprecated.js

@@ -41,6 +41,99 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			align: {
+				type: 'string',
+				default: 'none',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+			linkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'target',
+			},
+			rel: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a',
+				attribute: 'rel',
+			},
+			placeholder: {
+				type: 'string',
+			},
+		},
+		isEligible( attribute ) {
+			return attribute.className && attribute.className.includes( 'is-style-squared' );
+		},
+		migrate( attributes ) {
+			let newClassName = attributes.className;
+			if ( newClassName ) {
+				newClassName = newClassName.replace( /is-style-squared[\s]?/, '' ).trim();
+			}
+			return {
+				...attributes,
+				className: newClassName ? newClassName : undefined,
+				borderRadius: 0,
+			};
+		},
+		save( { attributes } ) {
+			const {
+				backgroundColor,
+				customBackgroundColor,
+				customTextColor,
+				linkTarget,
+				rel,
+				text,
+				textColor,
+				title,
+				url,
+			} = attributes;
+
+			const textClass = getColorClassName( 'color', textColor );
+			const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+
+			const buttonClasses = classnames( 'wp-block-button__link', {
+				'has-text-color': textColor || customTextColor,
+				[ textClass ]: textClass,
+				'has-background': backgroundColor || customBackgroundColor,
+				[ backgroundClass ]: backgroundClass,
+			} );
+
+			const buttonStyle = {
+				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+				color: textClass ? undefined : customTextColor,
+			};
+
+			return (
+				<div>
+					<RichText.Content
+						tagName="a"
+						className={ buttonClasses }
+						href={ url }
+						title={ title }
+						style={ buttonStyle }
+						value={ text }
+						target={ linkTarget }
+						rel={ rel }
+					/>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

packages/block-library/src/button/edit.js

@@ -9,17 +9,19 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import {
 	Component,
+	useCallback,
 } from '@wordpress/element';
 import {
 	compose,
 	withInstanceId,
 } from '@wordpress/compose';
 import {
-	withFallbackStyles,
+	BaseControl,
 	PanelBody,
+	RangeControl,
 	TextControl,
 	ToggleControl,
-	BaseControl,
+	withFallbackStyles,
 } from '@wordpress/components';
 import {
 	URLInput,
@@ -45,6 +47,31 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 } );
 
 const NEW_TAB_REL = 'noreferrer noopener';
+const MIN_BORDER_RADIUS_VALUE = 0;
+const MAX_BORDER_RADIUS_VALUE = 50;
+const INITIAL_BORDER_RADIUS_POSITION = 5;
+
+function BorderPanel( { borderRadius = '', setAttributes } ) {
+	const setBorderRadius = useCallback(
+		( newBorderRadius ) => {
+			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>
+	);
+}
 
 class ButtonEdit extends Component {
 	constructor() {
@@ -99,12 +126,13 @@ class ButtonEdit extends Component {
 		} = this.props;
 
 		const {
-			text,
-			url,
-			title,
+			borderRadius,
 			linkTarget,
-			rel,
 			placeholder,
+			rel,
+			text,
+			title,
+			url,
 		} = attributes;
 
 		const linkId = `wp-block-button__inline-link-${ instanceId }`;
@@ -122,11 +150,13 @@ class ButtonEdit extends Component {
 							[ backgroundColor.class ]: backgroundColor.class,
 							'has-text-color': textColor.color,
 							[ textColor.class ]: textColor.class,
+							'no-border-radius': borderRadius === 0,
 						}
 					) }
 					style={ {
 						backgroundColor: backgroundColor.color,
 						color: textColor.color,
+						borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 					} }
 				/>
 				<BaseControl
@@ -175,6 +205,10 @@ class ButtonEdit extends Component {
 							} }
 						/>
 					</PanelColorSettings>
+					<BorderPanel
+						borderRadius={ borderRadius }
+						setAttributes={ setAttributes }
+					/>
 					<PanelBody title={ __( 'Link Settings' ) }>
 						<ToggleControl
 							label={ __( 'Open in New Tab' ) }

packages/block-library/src/button/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -26,9 +26,8 @@ export const settings = {
 		alignWide: false,
 	},
 	styles: [
-		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
+		{ name: 'fill', label: __( 'Fill' ), isDefault: true },
 		{ name: 'outline', label: __( 'Outline' ) },
-		{ name: 'squared', label: _x( 'Squared', 'block style' ) },
 	],
 	edit,
 	save,

packages/block-library/src/button/save.js

@@ -13,15 +13,16 @@ import {
 
 export default function save( { attributes } ) {
 	const {
-		url,
-		text,
-		title,
 		backgroundColor,
-		textColor,
+		borderRadius,
 		customBackgroundColor,
 		customTextColor,
 		linkTarget,
 		rel,
+		text,
+		textColor,
+		title,
+		url,
 	} = attributes;
 
 	const textClass = getColorClassName( 'color', textColor );
@@ -32,11 +33,13 @@ export default function save( { attributes } ) {
 		[ textClass ]: textClass,
 		'has-background': backgroundColor || customBackgroundColor,
 		[ backgroundClass ]: backgroundClass,
+		'no-border-radius': borderRadius === 0,
 	} );
 
 	const buttonStyle = {
 		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
 		color: textClass ? undefined : customTextColor,
+		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 	};
 
 	return (

packages/block-library/src/button/style.scss

@@ -39,6 +39,9 @@ $blocks-button__height: 56px;
 .is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }
+.no-border-radius.wp-block-button__link {
+	border-radius: 0 !important;
+}
 
 .is-style-outline {
 	color: $dark-gray-700;

packages/e2e-tests/fixtures/block-transforms.js

@@ -24,6 +24,12 @@ export const EXPECTED_TRANSFORMS = {
 			'Group',
 		],
 	},
+	core__button__squared: {
+		originalBlock: 'Button',
+		availableTransforms: [
+			'Group',
+		],
+	},
 	core__calendar: {
 		originalBlock: 'Calendar',
 		availableTransforms: [

packages/e2e-tests/fixtures/blocks/core__button__squared.html

@@ -0,0 +1,3 @@
+<!-- wp:button {"customBackgroundColor":"#aa5a20","customTextColor":"#1b9b6c","className":"is-style-squared"} -->
+<div class="wp-block-button is-style-squared"><a class="wp-block-button__link has-text-color has-background" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
+<!-- /wp:button -->

packages/e2e-tests/fixtures/blocks/core__button__squared.json

@@ -0,0 +1,16 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/button",
+        "isValid": true,
+        "attributes": {
+            "text": "My button",
+            "align": "none",
+            "customBackgroundColor": "#aa5a20",
+            "customTextColor": "#1b9b6c",
+            "borderRadius": 0
+        },
+        "innerBlocks": [],
+        "originalContent": "<div class=\"wp-block-button is-style-squared\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json

@@ -0,0 +1,24 @@
+[
+    {
+        "blockName": "core/button",
+        "attrs": {
+            "customBackgroundColor": "#aa5a20",
+            "customTextColor": "#1b9b6c",
+            "className": "is-style-squared"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<div class=\"wp-block-button is-style-squared\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-button is-style-squared\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:button {"customBackgroundColor":"#aa5a20","customTextColor":"#1b9b6c","borderRadius":0,"align":"none"} -->
+<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 -->