Button Block: Use hook based border support (#30194)

Remove the custom border radius panel from the Button block's `edit()`, and opt that button into using the `__experimentalBorder` block-supports feature for border radius instead. Furthermore, enable border radius support for the Button block in `experimental-default-theme.json` in order to preserve the current user-facing behavior.
WordPress · Apr 13, 2021 · 37f6610 · 37f6610
1 parent 9c810e8
commit 37f6610
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 55 deletions.
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
@@ -173,6 +173,11 @@
 			"border": {
 				"customRadius": false
 			}
+		},
+		"core/button": {
+			"border": {
+				"customRadius": true
+			}
 		}
 	}
 }
diff --git 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
@@ -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
@@ -13,7 +13,6 @@ import {
 	ButtonGroup,
 	KeyboardShortcuts,
 	PanelBody,
-	RangeControl,
 	TextControl,
 	ToolbarButton,
 	Popover,
@@ -37,39 +36,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 +160,10 @@ function ButtonEdit( props ) {
 		mergeBlocks,
 	} = props;
 	const {
-		borderRadius,
 		linkTarget,
 		placeholder,
 		rel,
+		style,
 		text,
 		url,
 		width,
@@ -231,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 } );
@@ -284,10 +254,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
@@ -15,7 +15,6 @@ import getColorAndStyleProps from './color-props';
 
 export default function save( { attributes, className } ) {
 	const {
-		borderRadius,
 		fontSize,
 		linkTarget,
 		rel,
@@ -30,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',

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
@@ -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>
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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,3 @@
-<!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
+<!-- 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;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
@@ -5,8 +5,10 @@
 		"isValid": true,
 		"attributes": {
 			"text": "My button",
-			"borderRadius": 0,
 			"style": {
+				"border": {
+					"radius": 0
+				},
 				"color": {
 					"text": "#1b9b6c",
 					"background": "#aa5a20"

diff --git 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"

diff --git 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"}}} -->
+<!-- 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;color:#1b9b6c">My button</a></div>
 <!-- /wp:button -->