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 && ( + + + + ) }