Button Block: Use hook based border support

WordPress · Apr 9, 2021 · afabceb · afabceb
1 parent b2466ba
commit afabceb
Show file tree

Hide file tree

Showing 16 changed files with 224 additions and 73 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -2,9 +2,13 @@
 
 ## Unreleased
 
+### New Feature
+
+-   Export `__experimentalGetInlineStyles` to enable blocks to flatten nested style attributes into CSS properties ([#26655](https://github.com/WordPress/gutenberg/pull/30194)).
+
 ## 5.3.0 (2021-03-17)
 
-- Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
+-   Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere.
 
 ## 5.2.0 (2020-12-17)
 

diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
@@ -9,3 +9,5 @@ import './style';
 import './color';
 import './font-size';
 import './layout';
+
+export { getInlineStyles } from './style';
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
@@ -7,6 +7,7 @@ import '@wordpress/rich-text';
  * Internal dependencies
  */
 import './hooks';
+export { getInlineStyles as __experimentalGetInlineStyles } from './hooks';
 export * from './components';
 export * from './utils';
 export { storeConfig, store } from './store';

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -38,12 +38,6 @@
 		"placeholder": {
 			"type": "string"
 		},
-		"borderRadius": {
-			"type": "number"
-		},
-		"style": {
-			"type": "object"
-		},
 		"backgroundColor": {
 			"type": "string"
 		},
@@ -67,6 +61,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,
@@ -24,6 +23,7 @@ import {
 	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
+	__experimentalGetInlineStyles as getInlineStyles,
 	__experimentalLinkControl as LinkControl,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
@@ -37,39 +37,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 +161,10 @@ function ButtonEdit( props ) {
 		mergeBlocks,
 	} = props;
 	const {
-		borderRadius,
 		linkTarget,
 		placeholder,
 		rel,
+		style,
 		text,
 		url,
 		width,
@@ -255,13 +225,11 @@ function ButtonEdit( props ) {
 						'wp-block-button__link',
 						colorProps.className,
 						{
-							'no-border-radius': borderRadius === 0,
+							'no-border-radius': style?.border?.radius === 0,
 						}
 					) }
 					style={ {
-						borderRadius: borderRadius
-							? borderRadius + 'px'
-							: undefined,
+						...getInlineStyles( style ),
 						...colorProps.style,
 					} }
 					onSplit={ ( value ) =>
@@ -284,10 +252,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
@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetInlineStyles as getInlineStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -15,7 +19,6 @@ import getColorAndStyleProps from './color-props';
 
 export default function save( { attributes, className } ) {
 	const {
-		borderRadius,
 		fontSize,
 		linkTarget,
 		rel,
@@ -35,13 +38,9 @@ export default function save( { attributes, className } ) {
 		'wp-block-button__link',
 		colorProps.className,
 		{
-			'no-border-radius': borderRadius === 0,
+			'no-border-radius': style?.border?.radius === 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.
@@ -59,7 +58,10 @@ export default function save( { attributes, className } ) {
 				className={ buttonClasses }
 				href={ url }
 				title={ title }
-				style={ buttonStyle }
+				style={ {
+					...getInlineStyles( style ),
+					...colorProps.style,
+				} }
 				value={ text }
 				target={ linkTarget }
 				rel={ rel }

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>