Add width selector for button block (#25999)

* Add sidebar width selector for Button block

Initial commit adding a width option for the Button block with
options at 25, 50, 75, 100% widths. By default none are applied
and the button is sized by its content.

* Persist width changes

* Apply styling through class name rather than inline

* Clean up CSS

* Allow toggling a custom width off

A width selection can now be toggled off by clicking the already
selected option.

* Update InspectorControls to use sentence case

Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>

* Remove max width from buttons with custom width set

PR #23168 overhauls alignment controls on the Buttons container and
allows for full width. For a Button inside a very large container,
in order to be set correctly to 100% it must be able to exceed any
configured max-width.

This commit does not remove the max-width for any button that does
NOT have a custom width percentage selected. This is so that
default buttons continue to be sized as they normally would.

* Apply `has-custom-width` class on frontend

Fixes a bug where the inner button was not being set correctly to 100%
width on the frontend, due to the missing classname.`

Co-authored-by: Staci Cooper <staci@Stacis-MacBook-Pro.local>
Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>

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

@@ -52,6 +52,9 @@
 		},
 		"gradient": {
 			"type": "string"
+		},
+		"width": {
+			"type": "number"
 		}
 	},
 	"supports": {

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

@@ -9,6 +9,8 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
 import {
+	Button,
+	ButtonGroup,
 	KeyboardShortcuts,
 	PanelBody,
 	RangeControl,
@@ -70,6 +72,35 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 	);
 }
 
+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 } );
+	}
+
+	return (
+		<PanelBody title={ __( 'Width settings' ) }>
+			<ButtonGroup aria-label={ __( 'Button width' ) }>
+				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+					return (
+						<Button
+							key={ widthValue }
+							isSmall
+							isPrimary={ widthValue === selectedWidth }
+							onClick={ () => handleChange( widthValue ) }
+						>
+							{ widthValue }%
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
+		</PanelBody>
+	);
+}
+
 function URLPicker( {
 	isSelected,
 	url,
@@ -168,6 +199,7 @@ function ButtonEdit( props ) {
 		rel,
 		text,
 		url,
+		width,
 	} = attributes;
 	const onSetLinkRel = useCallback(
 		( value ) => {
@@ -202,7 +234,12 @@ function ButtonEdit( props ) {
 	return (
 		<>
 			<ColorEdit { ...props } />
-			<div { ...blockProps }>
+			<div
+				{ ...blockProps }
+				className={ classnames( blockProps.className, {
+					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+				} ) }
+			>
 				<RichText
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }
@@ -245,6 +282,10 @@ function ButtonEdit( props ) {
 					borderRadius={ borderRadius }
 					setAttributes={ setAttributes }
 				/>
+				<WidthPanel
+					selectedWidth={ width }
+					setAttributes={ setAttributes }
+				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ __( 'Open in new tab' ) }

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

@@ -67,6 +67,16 @@
 	}
 }
 
+.wp-button-label__width {
+	.components-button-group {
+		display: block;
+	}
+
+	.components-base-control__field {
+		margin-bottom: 12px;
+	}
+}
+
 // Display "table" is used because the button container should only wrap the content and not takes the full width.
 div[data-type="core/button"] {
 	display: table;

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

@@ -13,8 +13,16 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  */
 import getColorAndStyleProps from './color-props';
 
-export default function save( { attributes } ) {
-	const { borderRadius, linkTarget, rel, text, title, url } = attributes;
+export default function save( { attributes, className } ) {
+	const {
+		borderRadius,
+		linkTarget,
+		rel,
+		text,
+		title,
+		url,
+		width,
+	} = attributes;
 	const colorProps = getColorAndStyleProps( attributes );
 	const buttonClasses = classnames(
 		'wp-block-button__link',
@@ -32,8 +40,12 @@ export default function save( { attributes } ) {
 	// 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() }>
+		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
 			<RichText.Content
 				tagName="a"
 				className={ buttonClasses }

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

@@ -33,6 +33,31 @@ $blocks-button__height: 3.1em;
 	}
 }
 
+.wp-block-button {
+	&.has-custom-width {
+		max-width: none;
+		.wp-block-button__link {
+			width: 100%;
+		}
+	}
+
+	&.wp-block-button__width-25 {
+		width: 25%;
+	}
+
+	&.wp-block-button__width-50 {
+		width: 50%;
+	}
+
+	&.wp-block-button__width-75 {
+		width: 75%;
+	}
+
+	&.wp-block-button__width-100 {
+		width: 100%;
+	}
+}
+
 // the first selector is required for old buttons markup
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {
@@ -41,7 +66,6 @@ $blocks-button__height: 3.1em;
 
 
 // the first selector is required for old buttons markup
-
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
 	border-radius: 0 !important;

packages/block-library/src/buttons/editor.scss

@@ -3,15 +3,17 @@
 	margin-left: 0;
 }
 
-.wp-block[data-align="center"] > .wp-block-buttons {
+.wp-block > .wp-block-buttons {
 	display: flex;
-	align-items: center;
 	flex-wrap: wrap;
+}
+
+.wp-block[data-align="center"] > .wp-block-buttons {
+	align-items: center;
 	justify-content: center;
 }
 
 .wp-block[data-align="right"] > .wp-block-buttons {
-	display: flex;
 	justify-content: flex-end;
 }