Skip to content
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

Jump to bottom

Button Block: ability to disable Border Radius and Width controls #19796

Open
dougwollison opened this issue Jan 21, 2020 · 53 comments
Open

Button Block: ability to disable Border Radius and Width controls #19796

dougwollison opened this issue Jan 21, 2020 · 53 comments
Labels
[Block] Buttons Affects the Buttons Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.

Comments

@dougwollison
Copy link
Contributor

dougwollison commented Jan 21, 2020 •
edited
Loading

Is your feature request related to a problem? Please describe.
Most themes I build have a strict set of button styles, which includes a limited set of border radius options. Currently, while I can override the border radius on buttons, I can't remove the block editor panel offering the border radius slider. This can result in a confusing interface for the user who sees the slider, tries playing with it, only to find it does nothing. Same goes for the Width settings panel (alternatively, I may want other width options besides 25% increments).

Other panels like the Text Settings one (up until #19208 that is) I can at least display:none in order to hide the Drop Cap option (which still can't be disabled).

Describe the solution you'd like
The ability to, either via add_them_support() in PHP or some javascript API like unregisterBlockStyle, disable the border radius panel on buttons (or otherwise everywhere).
The button block should be modified so that the Border Radius and Width panels are conditional based on block support, similar to the paragraph block's typography and color settings, which can be fully disabled via supporst/block_editor_settins.

Describe alternatives you've considered
Another solution would be to add a classname to the panels so it can be hidden via the admin stylesheet.
@jorgefilipecosta jorgefilipecosta added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement. labels Jan 23, 2020
@cjaredm cjaredm mentioned this issue Jan 27, 2020
Closed
@carasmo
Copy link

carasmo commented Feb 3, 2020

Yes, this is annoying. I ended up making a simple button in ACF block. And I use https://wordpress.org/plugins/disable-gutenberg-blocks/ to disable all the core blocks I don't want. Too much. I like Gutenberg for the most part.

@samhermes
Copy link

+1 on this. Just like the button gradient coming in the next release, it's so frustrating to not have control over these options. As a developer, I get requests from designers looking to lock this down, and I'm not able to do anything about it.

@dougwollison
Copy link
Contributor Author

dougwollison commented Feb 17, 2020 •
edited
Loading

Just like the button gradient coming in the next release

Actually that can be disabled properly now in the next release, though only if you don't want to offer gradients anywhere else:

add_theme_support( 'editor-gradient-presets', array() );
add_theme_support( 'disable-custom-gradients' );

As for the border radius, I'm currently getting by using a filter on the blocks.registerBlockType hook and replacing the button block's edit component with a custom one that's basically a copy/paste of the original with the border radius and color options cut out. I'm doing the same for the paragraph block and it's drop-cap option. In theory it won't be too much of a hassle to maintain since I'm providing it as a private use plugin on my projects.

@andreyuv
Copy link

andreyuv commented Apr 2, 2020

Hi @dougwollison

You mention:

I'm currently getting by using a filter on the blocks.registerBlockType hook and replacing the button block's edit component with a custom one ...

If possible, could you please share a code snippet? I'm facing the same problem and after a lot of reading and searching I am still having a very rough time trying to understand how to do it.

@dougwollison
Copy link
Contributor Author

Hey @andreyuv,

If possible, could you please share a code snippet?

Unfortunately the code for all of it is kinda tied up in a private project right now, but the gist of it is this:

wp.hooks.addFilter( 'blocks.registerBlockType', 'patch-block/core-button', ( settings ) => {
	if ( settings.name = 'core/button' ) {
		lodash.assign( settings, {
			edit: NewButtonEdit,
			save: NewButtonSave,
		} );
	}
}, 0 );

The NewButtonEdit and NewButtonSave are functional components I then made that were basically copy-paste copies of the ones from the repo, but with stuff removed, and converted to run as a 3rd part script (i.e. convert stuff like import { whatever } from '@wordpress/block-editor'; to const { whatever } = wp.blockEditor;)

@andreyuv
Copy link

andreyuv commented Apr 3, 2020

Thanks for taking the time to reply @dougwollison !

@skyshab
Copy link

skyshab commented Apr 9, 2020

I'd like to control the button border radius in my theme with preset block styles and remove the range control for it. Would be great if there was a way for theme developers to toggle this functionality.

@jomarieminney
Copy link

Please 👍 My clients definitely should not have the ability to adjust things like border radius... it's a great way to throw consistency out the window. An option like the add theme support, or even wp.blocks.unregisterBlockStyle would be ideal!

@soulstyle
Copy link

Yes, please! This is urgently needed, clients should not have access to this on sites with strict design guidelines.

A theme support option would be great!

@sagarsdeshmukh sagarsdeshmukh mentioned this issue Apr 17, 2020
Merged
@ChemicalSailor
Copy link

As well as being able to disable it, it might be nice to be able to filter the possible values to a limited set of radii.

@derekshirk derekshirk mentioned this issue May 27, 2020
Merged
@sboerrigter sboerrigter mentioned this issue Jul 31, 2020
Open
@tomphilpotts
Copy link

Is there any update on removing these option? Really need the ability too.

@urlund
Copy link

urlund commented Sep 21, 2020

+1 for this feature :)

@ZebulanStanphill
Copy link
Member

Yeah, I think this is a control that, at most, should only be exposed in the Global Styles UI (when that eventually becomes a thing). Changing the border radius of individual buttons is a design foot-gun, in my opinion.

@pinoceniccola
Copy link

Things like this (and other styles like gradients, font sizes, etc.) should be defined at least on a global level, using tokenized values and possibly exposed only to users with higher capabilities. We spend a lot of time trying to bring consistency in design with style guides and other visual guidelines and this kind of unrestricted and arbitrary customization throw all of our work out of the window!

Authors and editors should focus on content, not styling. Many of them are unable to take rational design decisions. Giving them the power of styling border radii or gradients on multiple buttons/elements in a random fashion on the same page, or even on the same website, is a recipe for a visual disaster.

For now, at least a filter to disable all this is really much needed. Thank you.

@stokesman stokesman mentioned this issue Oct 30, 2020
Merged
6 tasks
@dougwollison dougwollison changed the title Button Block: disable Border Radius slider Button Block: ability to disable Border Radius and Width controls Nov 24, 2020
@dougwollison
Copy link
Contributor Author

Updating this issue to include the new-ish Width settings panel, since it's the same issue (not sure why it was implemented as a hard-coded thing rather than including a way to opt-out of it).

@turansadri
Copy link

For now, at least a filter to disable all this is really much needed. Thank you.

Nothing which gives user an ability to change colour/size/radius whatever should not be released in the first place without having option to disable it. We cannot just let our clients freely change font colours etc as it will lead to situations where they will use the largest font size in red for the things they think is important.

@ninetyninew
Copy link

ninetyninew commented Dec 7, 2020 •
edited
Loading

In need of a filter for this too asap. Also if this gets included in future what would happen to any button block which previously had a button border radius applied - would the inline style it generated in the button code remain and if so how could we remove that - would we need to search the database for all pages with a button block and the border-radius inline style or is there an easier way?

@mrwweb mrwweb mentioned this issue Jan 2, 2021
Closed
@jgoslow
Copy link

jgoslow commented Jan 15, 2021 •
edited
Loading

Tried hiding with CSS but as @mrwweb points out, it hides settings on other blocks. But you can hide the gradients.

Hacky - but you can just hide it with CSS in /wp-admin CSS.

// Hide Gradient and Border options default blocks
.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings + div {
    display: none;
}

It would be nice if the interface for block options set the class of the options container to reflect which block you're working on, so this could be more specific.

@mrwweb
Copy link

mrwweb commented Jan 15, 2021

@jgoslow Since that selector doesn't discriminate between blocks, it will hide any sidebar panel section that follows the color settings. That means it hides Border Radius for buttons along with the Number of Columns setting for columns, all Media & Text block settings, etc.

@ptbello ptbello mentioned this issue Jan 19, 2021
Open
@aurooba
Copy link
Member

aurooba commented Feb 9, 2021

I'd like to chime in with a +1 for this.

I think it'll require a bit of fiddling in the way the Border Settings Panel is added, because it's not named right now like some of the other ones. But ultimately, this settings should either a) not be enabled by default or b) come with the ability to remove it.

Most websites have a specific set of styles for buttons. The Editor should not give the illusion that the border radius can be controlled and modified unless the theme intends folks to have this ability. The theme.json seems to have the ability to do this (I haven't tested this yet), but it would be great to have something like:

add_theme_support( 'disable-border-settings' );

@oandregal
Copy link
Member

This can be closed, the plugin has support for disabling borders from a number of versions already. For the specific case of the button, the snippet at #19796 (comment) works as expected.

@mtias
Copy link
Member

mtias commented Jul 14, 2021

It's probably worth collecting a few common uses to add as examples in https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#settings-can-be-controlled-per-block

@oandregal
Copy link
Member

Curated a bit the docs and created a section for examples at https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#settings-examples

@MatzeKitt
Copy link
Contributor

@nosolosw While it’s true that you can disable the border radius, the also mentioned width cannot be disabled at the moment. So I think it’s wrong to close this issue, since it’s not yet done.

@mwhiteley16
Copy link

Agreed. I don't think this should be closed out as you still cannot disable the width.

@skorasaurus skorasaurus reopened this Aug 2, 2021
@skorasaurus skorasaurus added the [Block] Buttons Affects the Buttons Block label Aug 2, 2021
@mkkeck mkkeck mentioned this issue Sep 7, 2021
Open
@oandregal
Copy link
Member

I was confused about this for a bit, so leaving a comment for our future selves: the button block only supports border radius and it doesn't support any of the other properties (width, style, or color).

A separate thing is the "Width" panel, which affects the width of the button and can't be controlled via theme.json.

@vyskoczilova vyskoczilova mentioned this issue Feb 12, 2022
Open
@stefanfisk
Copy link
Contributor

I'm not sure if this should be it's own issue, but personally I also need the ability to control the rich text formats. Just like for the radius, the values clash with my theme's button styles, and editors are getting a bit too creative.

AFAICT, all non-interactive styles are currently enabled. Since some of my button styles already have bold text, I've even gotten questions about why the bold formatting doesn't work.

Screenshot 2022-03-16 at 13 17 57

gutenberg/packages/block-library/src/button/edit.js

Line 163 in 6be0679

<RichText
.

@schutzsmith
Copy link
Contributor

So what is the solution if we do NOT want to have a theme.json file present in our theme? In my case, having that file completely breaks the current theme and would mean I'd need to rebuild the whole thing just to simply hide this one setting. We should have a solution for folks pre-theme.json. Thank you!

@badfeather
Copy link

@schutzsmith I've had similar issues with the theme.json file breaking other things, since my theme is not a FSE theme. This is how I've handled disabling some of these experimental features in my theme. I'm sure these are all bound to change in an core update though.

function themename_block_editor_settings( $editor_settings, $editor_context ) {
	$editor_settings['__experimentalFeatures']['color']['background'] = false;
	$editor_settings['__experimentalFeatures']['color']['customDuotone'] = false;
	$editor_settings['__experimentalFeatures']['color']['duotone'] = [];
	$editor_settings['__experimentalFeatures']['color']['gradients'] = [];
	$editor_settings['__experimentalFeatures']['color']['palette'] = [];
	$editor_settings['__experimentalFeatures']['color']['text'] = [];
	$editor_settings['__experimentalFeatures']['typography']['dropCap'] = false;
	$editor_settings['__experimentalFeatures']['typography']['fontSizes'] = [];
	$editor_settings['__experimentalFeatures']['typography']['fontStyle'] = false;
	$editor_settings['__experimentalFeatures']['typography']['fontWeight'] = false;
	$editor_settings['__experimentalFeatures']['typography']['letterSpacing'] = false;
	$editor_settings['__experimentalFeatures']['typography']['textDecoration'] = false;
	$editor_settings['__experimentalFeatures']['typography']['textTransform'] = false;
	$editor_settings['__experimentalFeatures']['blocks']['core/button']['border']['radius'] = false;
	$editor_settings['__experimentalFeatures']['blocks']['core/pullquote']['border']['color'] = false;
	$editor_settings['__experimentalFeatures']['blocks']['core/pullquote']['border']['radius'] = false;
	$editor_settings['__experimentalFeatures']['blocks']['core/pullquote']['border']['style'] = false;
	$editor_settings['__experimentalFeatures']['blocks']['core/pullquote']['border']['width'] = false;

	// nuclear option
	// $editor_settings['__experimentalFeatures'] = [];

	return $editor_settings;
}
add_filter( 'block_editor_settings_all', 'themename_block_editor_settings', 10, 2 );

@schutzsmith
Copy link
Contributor

schutzsmith commented May 4, 2022 via email

@roseg43 roseg43 mentioned this issue Jun 30, 2022
Open
roseg43 added a commit to roseg43/gutenberg that referenced this issue Jul 7, 2022
@roseg43
Button: Add theme.json support for toggling Width panel
b01cbed 
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
@paaljoachim
Copy link
Contributor

paaljoachim commented Jul 27, 2022 •
edited
Loading

Check out this PR (did not locate a mention of this PR above.):
Button: Add theme.json support for toggling Width settings panel
#42079

Take it for a spin and give feedback.

@skorasaurus
Copy link
Member

skorasaurus commented Jul 27, 2022 •
edited
Loading

As mentioned above, there's been working on solving this PR in #42079

You can test it out, by downloading a ZIP file of it, and plugin at https://github.com/WordPress/gutenberg/actions/runs/2631949211 ) :)

@paaljoachim
Copy link
Contributor

Here is a detailed procedure: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/

@carasmo
Copy link

carasmo commented Oct 11, 2022 via email

@paaljoachim
Copy link
Contributor

Is this issue still valid or can we close it?

@skorasaurus
Copy link
Member

skorasaurus commented Oct 11, 2022 •
edited
Loading

@paaljoachim It is still valid: the border radius can be disabled; but the width controls cannot be disabled as of yet.

(Note: do not close even after #42079 ; that issue is for the border width; this issue here requests the width of the entire button block).

@jordesign jordesign mentioned this issue Sep 8, 2023
Closed
16 tasks
@QuietNoise
Copy link

To hide width settings in CMS I just do this:

.components-button-group[aria-label="Button width"] {
  display: none;
}

🤣
Not perfect but I deal with english version only so far.

I still can't believe this issue is not yet addressed. Is there a way to tackle this with wp.hooks filters to remove these settings altogether?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Buttons Affects the Buttons Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests