-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Button Block: ability to disable Border Radius and Width controls #19796
Comments
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. |
+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. |
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 |
You mention:
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. |
Hey @andreyuv,
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 |
Thanks for taking the time to reply @dougwollison ! |
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. |
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! |
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! |
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. |
Is there any update on removing these option? Really need the ability too. |
+1 for this feature :) |
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. |
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. |
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). |
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. |
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? |
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.
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. |
@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. |
I'd like to chime in with a +1 for this. I think it'll require a bit of fiddling in the way the 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' ); |
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. |
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 |
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 |
@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. |
Agreed. I don't think this should be closed out as you still cannot disable the |
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 |
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.
|
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! |
@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.
|
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
<#19796 (comment)>,
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
|
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
Check out this PR (did not locate a mention of this PR above.): Take it for a spin and give feedback. |
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 ) :) |
Here is a detailed procedure: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/ |
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
<#19796 (comment)>,
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
|
Is this issue still valid or can we close it? |
@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). |
To hide width settings in CMS I just do this:
🤣 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? |
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 viaadd_them_support()
in PHP or some javascript API likeunregisterBlockStyle
, 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.
The text was updated successfully, but these errors were encountered: