diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index eb132d03c1d186..b4d5fa141ffa2b 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu
- **Name:** core/button
- **Category:** design
-- **Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~
+- **Supports:** align, anchor, color (background, gradients, text), spacing (padding, width), typography (fontSize), ~~alignWide~~, ~~reusable~~
- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width
## Buttons
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index 57fac0b7e95432..c1bdf5b5260989 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -4,7 +4,7 @@
>
> There're related documents you may be interested in: the [theme.json v1](/docs/reference-guides/theme-json-reference/theme-json-v1.md) specification and the [reference to migrate from theme.json v1 to v2](/docs/reference-guides/theme-json-reference/theme-json-migrations.md).
-This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/theme-json.md) for examples and guide on how to use the theme.json file in your theme.
+This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/theme-json.md) for examples and guide on how to use the theme.json file in your theme.
## Schema
@@ -82,6 +82,7 @@ Settings related to spacing.
| blockGap | undefined | null | |
| margin | boolean | false | |
| padding | boolean | false | |
+| width | boolean | true | |
| units | array | px,em,rem,vh,vw,% | |
| customSpacingSize | boolean | true | |
| spacingSizes | array | | name, size, slug |
diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
index 878ac30c1b2c7d..8b20d74a6668d3 100644
--- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
+++ b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
@@ -233,6 +233,7 @@ class WP_Theme_JSON_6_0 extends WP_Theme_JSON {
'margin' => null,
'padding' => null,
'units' => null,
+ 'width' => null,
),
'typography' => array(
'customFontSize' => null,
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 189e3694dd87f6..d6ccee374185ba 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -847,6 +847,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null
'margin' => null,
'padding' => null,
'units' => null,
+ 'width' => null,
),
'typography' => array(
'customFontSize' => null,
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index f86030c7460a57..6a48afd999a546 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -80,7 +80,8 @@
"padding": [ "horizontal", "vertical" ],
"__experimentalDefaultControls": {
"padding": true
- }
+ },
+ "width": true
},
"__experimentalBorder": {
"radius": true,
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 1c1fd9c26b255d..ba49280d334c64 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -21,6 +21,7 @@ import {
InspectorControls,
RichText,
useBlockProps,
+ useSetting,
__experimentalUseBorderProps as useBorderProps,
__experimentalUseColorProps as useColorProps,
__experimentalGetSpacingClassesAndStyles as useSpacingProps,
@@ -125,6 +126,7 @@ function ButtonEdit( props ) {
const isURLSet = !! url;
const opensInNewTab = linkTarget === '_blank';
+ const isWidthPanelEnabled = false !== useSetting( 'spacing.width' );
function startEditing( event ) {
event.preventDefault();
setIsEditingURL( true );
@@ -243,12 +245,14 @@ function ButtonEdit( props ) {
/>
) }
-
-
-
+ { isWidthPanelEnabled && (
+
+
+
+ ) }