Skip to content

Button: Add theme.json support for toggling Width settings panel #42079

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
roseg43 wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Button: Add theme.json support for toggling Width settings panel #42079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 |
Expand Down
1 change: 1 addition & 0 deletions lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/button/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@
"padding": [ "horizontal", "vertical" ],
"__experimentalDefaultControls": {
"padding": true
}
},
"width": true
},
"__experimentalBorder": {
"radius": true,
Expand Down
16 changes: 10 additions & 6 deletions packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
InspectorControls,
RichText,
useBlockProps,
useSetting,
__experimentalUseBorderProps as useBorderProps,
__experimentalUseColorProps as useColorProps,
__experimentalGetSpacingClassesAndStyles as useSpacingProps,
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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' ) }
Expand Down
5 changes: 5 additions & 0 deletions schemas/json/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,11 @@
"type": "boolean",
"default": false
},
"width": {
Copy link
Member

@skorasaurus skorasaurus Jul 1, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you; the button width is no longer available by default, remaining consistent with the other spacing settings; so it did not appear; even when I did not set any value to spacing.width in my theme.json (Step 4)

Copy link
Member

@skorasaurus skorasaurus Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one other note: the search block's width side panel still appeared, even when spacing.width is set to false in theme.json (I also added the following to the search block); not sure if that is an issue.

"spacing": {
			"width": true
		},

Copy link
Contributor Author

@roseg43 roseg43 Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking the time to look over this!

I wanted to keep the scope of this PR narrow and contained to the Button block; I actually wasn't aware that the Search block had width settings! With the new theme.json property that this PR adds, we could look into adding support to the Search block in a follow-up feature. That way we can keep the testing steps and branch scope concise.

What do you think?

Copy link
Member

@skorasaurus skorasaurus Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am personally fine with either; I think making an issue that states width support is missing for the search block would be helpful without being too burdensome? :)

Copy link
Contributor Author

@roseg43 roseg43 Jul 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@skorasaurus issue has been created! #42159 😄 Let me know if there's anything else I need to do here, thanks!

Copy link
Contributor

@carolinan carolinan Jul 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the default needs to be true, because this setting has been available to users and they may expect it to be available.
Personally, I would disable this option for some projects, and I welcome the possibility to do so, but I think that because it is an existing option, disabling it needs to be the exception.

Copy link
Contributor Author

@roseg43 roseg43 Jul 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@carolinan I agree, we definitely don't want this panel disappearing for people who expect it to be there and aren't staying on top of release notes. I've made some adjustments so that we expressly look for spacing.width === false when determining whether or not to display the panel.

"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",
Expand Down