diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index b0cff94836069..622c43ef12429 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -52,6 +52,9 @@
},
"gradient": {
"type": "string"
+ },
+ "width": {
+ "type": "number"
}
},
"supports": {
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 690913ea01632..2136f5ddc6b24 100644
--- a/packages/block-library/src/button/edit.js
+++ b/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 (
+