Add FontSizePicker for button block for custom width size

WordPress · Jun 4, 2024 · db4da66 · db4da66
1 parent fd7becb
commit db4da66
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 41 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -17,12 +17,11 @@ import { unlock } from '../lock-unlock';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
-	Button,
-	ButtonGroup,
 	PanelBody,
 	TextControl,
 	ToolbarButton,
 	Popover,
+	FontSizePicker,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -125,24 +124,34 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 
 	return (
 		<PanelBody title={ __( 'Settings' ) }>
-			<ButtonGroup aria-label={ __( 'Button width' ) }>
-				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
-					return (
-						<Button
-							key={ widthValue }
-							size="small"
-							variant={
-								widthValue === selectedWidth
-									? 'primary'
-									: undefined
-							}
-							onClick={ () => handleChange( widthValue ) }
-						>
-							{ widthValue }%
-						</Button>
-					);
-				} ) }
-			</ButtonGroup>
+			<FontSizePicker
+				fontSizes={ [
+					{
+						name: '25%',
+						size: '25%',
+						slug: '25',
+					},
+					{
+						name: '50%',
+						size: '50%',
+						slug: '50',
+					},
+					{
+						name: '75%',
+						size: '75%',
+						slug: '75',
+					},
+					{
+						name: '100%',
+						size: '100%',
+						slug: '100',
+					},
+				] }
+				withSlider
+				units={ [ '%', 'px', 'rem' ] }
+				onChange={ ( widthValue ) => handleChange( widthValue ) }
+				value={ selectedWidth }
+			/>
 		</PanelBody>
 	);
 }
@@ -262,10 +271,10 @@ function ButtonEdit( props ) {
 			<div
 				{ ...blockProps }
 				className={ clsx( blockProps.className, {
-					[ `has-custom-width wp-block-button__width-${ width }` ]:
-						width,
+					[ `has-custom-width` ]: width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
+				style={ { width } }
 			>
 				<RichText
 					ref={ mergedRef }

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -66,12 +66,17 @@ export default function save( { attributes, className } ) {
 	// A title will no longer be assigned for new or updated button block links.
 
 	const wrapperClasses = clsx( className, {
-		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+		[ `has-custom-width` ]: width,
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
 
 	return (
-		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+		<div
+			{ ...useBlockProps.save( {
+				className: wrapperClasses,
+				style: { width },
+			} ) }
+		>
 			<RichText.Content
 				tagName={ TagName }
 				type={ isButtonTag ? buttonType : null }

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -52,23 +52,6 @@ $blocks-block__margin: 0.5em;
 			font-size: inherit;
 		}
 	}
-
-	&.wp-block-button__width-25 {
-		width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75));
-	}
-
-	&.wp-block-button__width-50 {
-		width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5));
-	}
-
-	&.wp-block-button__width-75 {
-		width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25));
-	}
-
-	&.wp-block-button__width-100 {
-		width: 100%;
-		flex-basis: 100%;
-	}
 }
 
 // For vertical buttons, gap is not factored into width calculations.