Button Block: ability to disable Border Radius and Width controls

[dougwollison]

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.

[carasmo]

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]

+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]

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]

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]

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]

Thanks for taking the time to reply @dougwollison !

[skyshab]

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]

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]

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!

[ChemicalSailor]

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.

[tomphilpotts]

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

[urlund]

+1 for this feature :)

[ZebulanStanphill]

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]

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.

[dougwollison]

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]

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]

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?

[jgoslow]

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]

@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.

[aurooba]

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' );

[huubl]

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' );

+1 for add_theme_support( 'disable-border-settings' );

[mark-8]

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' );

Maybe it's just me, but it feels wrong to add support for disabling a feature.

If it's going this way round, would it not make more sense to remove_theme_support( 'button-border-settings' ); or similar and have it enabled by the plugin to avoid back-compat issues.

[dougwollison]

Maybe it's just me, but it feels wrong to add support for disabling a feature.

I agree it's weird, though I will point out there's already precedent for that given the other "supports" that disable stuff like custom colors/gradients/font sizes. Terrible precedent but a precedent nevertheless.

Personally I'd probably prefer using a 'block_editor_settings' filter similar to how dropCap is disabled now.

[jgoslow]

+1 on more granular editor settings.

[aurooba]

Exactly – what @dougwollison said. There is precedent.

Personally I'd probably prefer using a 'block_editor_settings' filter similar to how dropCap is disabled now.

This is definitely a way better idea! I would 100% prefer this and it connects well with the upcoming theme.json structure.

[lukecarbis]

Filtering something like block_editor_settings makes best sense to me. I find the strange "add to remove" language in add_theme_support( 'disable-border-settings' ) quite confusing, precedent or not.

[scrobbleme]

Exactly – what @dougwollison said. There is precedent.

Personally I'd probably prefer using a 'block_editor_settings' filter similar to how dropCap is disabled now.

This is definitely a way better idea! I would 100% prefer this and it connects well with the upcoming theme.json structure.

Or maybe something similar to unregisterBlockStyle:

wp.blocks.unregisterBlockAttribute('core/button', 'borderRadius');

[lukecarbis]

Is this also something that should be / will be included in theme.json for FSE themes? Or is that a separate ticket?

[aurooba]

Is this also something that should be / will be included in theme.json for FSE themes? Or is that a separate ticket?

@lukecarbis This is a planned part of theme.json :)

[ninetyninew]

Now it looks like we are getting closer to a solution for this can anyone recommend how to deal with any inline styling that has already been added using this option previously (that would need removing once the solution is enabled?) https://github.com/WordPress/gutenberg/issues/19796#issuecomment-740068466

[kraftner]

I figured out a solution to a similar problem in https://github.com/WordPress/gutenberg/issues/16478#issuecomment-802957188 that can be applied for hiding the border radius setting as well.

If you've read that comment on top of that approach you can hide the border radius setting under the following assumptions:

• the Border Settings panel directly follows the Color Settings panel
• or, if the first panel isn't the Color Settings panel it is the Border Settings panel

.is-inspector-of-button,
.is-inspector-of-button ~ .block-editor-panel-color-gradient-settings + .components-panel__body,
.is-inspector-of-button + .components-panel__body:not(.block-editor-panel-color-gradient-settings) {
    display:none;
}

[ninetyninew]

Is there a way yet to disable the following sections when editing a button block:

• Styles
• Color settings (cannot do this via editor color palette as removes everywhere e.g. cover block)
• Border settings
• Width settings

I effectively want to remove those options completely from the buttons block, I read somewhere you could override the block options panel itself and cherry pick the options required. But I can't seem to find the website that documented that anymore.

[stokesman]

Now in trunk (and to be released in Gutenberg 10.5) themes may opt out of border-radius support for the button block. They'll need to include an experimental-theme.json with the following:

{
  "settings": {
    "core/button": {
      "border": {
        "customRadius": false
      }
    }
  } 
}

[mrwweb]

@stokesman That is very exciting! Will it be possible to disable this via a plugin (example) as well? (I guess that may be a broader/general question about theme.json.)

[stokesman]

@mrwweb, currently that doesn't seem possible but it looks like it's planned #27504.

[BenceSzalai]

In Gutenberg v10.6.2 and together with the "version": 1 part, which is required for other settings to work, it should look like this:

{
  "version": 1,
  "settings": {
    "blocks": {
      "core/button": {
        "border": {
          "customRadius": false
        }
      }
    },
    "color": {
      "palette": [
        {
          "slug": "white",
          "color": "#ffffff",
          "name": "White"
        },
        ...
      ],
      ...
    }
  }
}

(color / palette is an example of one of the standard settings, which only work with "version": 1 included)

[oandregal]

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 https://github.com/WordPress/gutenberg/issues/19796#issuecomment-819134967 works as expected.

[mtias]

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]

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]

@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]

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

[oandregal]

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.

[stefanfisk]

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.

https://github.com/WordPress/gutenberg/blob/6be06794ebbd12e92d5ca35b16dee5b399a3bc93/packages/block-library/src/button/edit.js#L163.

[schutzsmith]

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]

@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]

Thank you so much!!!

On Wed, May 4, 2022 at 5:56 PM Brad Thomason @.***> wrote:

@schutzsmith https://github.com/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 );

— Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/19796#issuecomment-1117972309, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFGCDGE3DWK263YSWTTTPLVILXAXANCNFSM4KJ4LHOQ . You are receiving this because you were mentioned.Message ID: @.***>

-- Daniel Schutzsmith (He/Him) Designer • Developer • Strategist

@.*** • 917-282-9037

http://daniel.schutzsmith.com

[paaljoachim]

Check out this PR (did not locate a mention of this PR above.): Button: Add theme.json support for toggling Width settings panel https://github.com/WordPress/gutenberg/pull/42079

Take it for a spin and give feedback.

[skorasaurus]

As mentioned above, there's been working on solving this PR in https://github.com/WordPress/gutenberg/pull/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]

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

[carasmo]

This is awesome! Thank you!

On Wed, May 4, 2022 at 5:56 PM Brad Thomason @.***> wrote:

@schutzsmith https://github.com/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 );

— Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/19796#issuecomment-1117972309, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAISR4V2NB4GARQVQGFCAG3VILXAXANCNFSM4KJ4LHOQ . You are receiving this because you commented.Message ID: @.***>

-- Christina Arasmo (pro/adjective) Dev / Designer 727-537-6182