Button: Add theme.json support for toggling Width panel

This allows theme developers to manage support for the Width panel on the Button block using theme.json. We toggle visibility for the panel in Button's edit component using useSetting to grab the new setting. Appropriate entries have been added for the new setting to both the theme.json schema as well as the core-blocks and theme-json-living documentation. Fixes WordPress#38767. See WordPress#19796
roseg43 · Jul 7, 2022 · b01cbed · b01cbed
1 parent ca2db4f
commit b01cbed
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ) {
 					/>
 				</Popover>
 			) }
-			<InspectorControls>
-				<WidthPanel
-					selectedWidth={ width }
-					setAttributes={ setAttributes }
-				/>
-			</InspectorControls>
+			{ isWidthPanelEnabled && (
+				<InspectorControls>
+					<WidthPanel
+						selectedWidth={ width }
+						setAttributes={ setAttributes }
+					/>
+				</InspectorControls>
+			) }
 			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
 					label={ __( 'Link rel' ) }

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
@@ -219,6 +219,11 @@
 							"type": "boolean",
 							"default": false
 						},
+						"width": {
+							"description": "Allow users to set a custom width.",
+							"type": "boolean",
+							"default": true
+						},
 						"units": {
 							"description": "List of units the user can use for spacing values.",
 							"type": "array",