Draft adoption of width block support for button block

Author: aaronrobertshaw

lib/experimental-default-theme.json

@@ -219,6 +219,10 @@
 			"customPadding": false,
 			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
 		},
+		"dimensions": {
+			"customHeight": false,
+			"customWidth": false
+		},
 		"border": {
 			"customColor": false,
 			"customRadius": false,
@@ -229,6 +233,9 @@
 			"core/button": {
 				"border": {
 					"customRadius": true
+				},
+				"dimensions": {
+					"customWidth": true
 				}
 			},
 			"core/pullquote": {

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

@@ -65,6 +65,13 @@
 			"fontSize": true,
 			"__experimentalFontFamily": true
 		},
+		"__experimentalDimensions": {
+			"width": "segmented",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"width": true
+			}
+		},
 		"reusable": false,
 		"__experimentalBorder": {
 			"radius": true,

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

@@ -9,17 +9,13 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useState, useRef } from '@wordpress/element';
 import {
-	Button,
-	ButtonGroup,
 	KeyboardShortcuts,
-	PanelBody,
 	TextControl,
 	ToolbarButton,
 	Popover,
 } from '@wordpress/components';
 import {
 	BlockControls,
-	InspectorControls,
 	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
@@ -31,40 +27,12 @@ import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 
-const NEW_TAB_REL = 'noreferrer noopener';
-
-function WidthPanel( { selectedWidth, setAttributes } ) {
-	function handleChange( newWidth ) {
-		// Check if we are toggling the width off
-		const width = selectedWidth === newWidth ? undefined : newWidth;
-
-		// Update attributes
-		setAttributes( { width } );
-	}
+/**
+ * Internal dependencies
+ */
+import getWidthClassesAndStyles from './get-width-classes-and-styles';
 
-	return (
-		<PanelBody title={ __( 'Width settings' ) }>
-			<ButtonGroup aria-label={ __( 'Button width' ) }>
-				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
-					return (
-						<Button
-							key={ widthValue }
-							isSmall
-							variant={
-								widthValue === selectedWidth
-									? 'primary'
-									: undefined
-							}
-							onClick={ () => handleChange( widthValue ) }
-						>
-							{ widthValue }%
-						</Button>
-					);
-				} ) }
-			</ButtonGroup>
-		</PanelBody>
-	);
-}
+const NEW_TAB_REL = 'noreferrer noopener';
 
 function URLPicker( {
 	isSelected,
@@ -158,14 +126,15 @@ function ButtonEdit( props ) {
 		mergeBlocks,
 	} = props;
 	const {
+		fontSize,
 		linkTarget,
 		placeholder,
 		rel,
 		style,
 		text,
 		url,
-		width,
 	} = attributes;
+
 	const onSetLinkRel = useCallback(
 		( value ) => {
 			setAttributes( { rel: value } );
@@ -199,18 +168,20 @@ function ButtonEdit( props ) {
 
 	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
+	const widthProps = getWidthClassesAndStyles( attributes );
 	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+
+	const blockProps = useBlockProps( {
+		ref,
+		className: classnames( widthProps.className, {
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} ),
+		style: widthProps.style,
+	} );
 
 	return (
 		<>
-			<div
-				{ ...blockProps }
-				className={ classnames( blockProps.className, {
-					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
-					[ `has-custom-font-size` ]: blockProps.style.fontSize,
-				} ) }
-			>
+			<div { ...blockProps }>
 				<RichText
 					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
@@ -251,12 +222,6 @@ function ButtonEdit( props ) {
 				onToggleOpenInNewTab={ onToggleOpenInNewTab }
 				anchorRef={ ref }
 			/>
-			<InspectorControls>
-				<WidthPanel
-					selectedWidth={ width }
-					setAttributes={ setAttributes }
-				/>
-			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
 					label={ __( 'Link rel' ) }

packages/block-library/src/button/get-width-classes-and-styles.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+export default function getWidthProps( { style } ) {
+	const width = style?.dimensions?.width;
+	const presetWidth = [ 25, 50, 75, 100 ].find(
+		( preset ) => `${ preset }%` === width
+	);
+	const customWidth = width && ! presetWidth ? width : undefined;
+
+	const className = classnames( {
+		[ `has-custom-width` ]: width,
+		[ `wp-block-button__width-${ presetWidth }` ]: presetWidth,
+	} );
+
+	return {
+		className: className || undefined,
+		style: { width: customWidth },
+	};
+}

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

@@ -13,17 +13,13 @@ import {
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import getWidthClassesAndStyles from './get-width-classes-and-styles';
+
 export default function save( { attributes, className } ) {
-	const {
-		fontSize,
-		linkTarget,
-		rel,
-		style,
-		text,
-		title,
-		url,
-		width,
-	} = attributes;
+	const { fontSize, linkTarget, rel, style, text, title, url } = attributes;
 
 	if ( ! text ) {
 		return null;
@@ -50,13 +46,18 @@ export default function save( { attributes, className } ) {
 	// 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,
+	const widthProps = getWidthClassesAndStyles( attributes );
+	const wrapperClasses = classnames( className, widthProps.className, {
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
 
 	return (
-		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+		<div
+			{ ...useBlockProps.save( {
+				className: wrapperClasses,
+				style: widthProps.style,
+			} ) }
+		>
 			<RichText.Content
 				tagName="a"
 				className={ buttonClasses }

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

@@ -76,7 +76,7 @@ $blocks-block__margin: 0.5em;
 	.wp-block-buttons {
 
 		> .wp-block-button,
-		&.is-content-justification-right > .wp-block-button, {
+		&.is-content-justification-right > .wp-block-button {
 			// Added (duplicate) specificity needed to override the default button margin.
 			&.wp-block-button {
 				margin-right: 0;