WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Similar UI controls have very inconsistent behavior around defaults #47976

Open cbirdsong opened 1 year ago

cbirdsong commented 1 year ago

When modifying block settings, there are several distinct ways that controls with similar appearances behave:

1. A group with an explicit "default" or "none" value, which is usually preselected:

An example of this is the block width alignment control is very clear, as it includes an option labeled "none":

CleanShot 2023-02-10 at 09 48 07

2. A group with no option preselected:

Examples include the text align control and vertical alignment control on the columns block, which come with no default value and let you unset their value by clicking on them, allowing you to return to whatever the default is provided by the editor, theme or block style:

https://user-images.githubusercontent.com/1672206/218154938-48d4d5e1-04fc-4fae-a1c7-3a548f96fdf2.mp4

https://user-images.githubusercontent.com/1672206/218155212-62657dba-c0a2-4a7e-b31a-5859334a2d8a.mp4

3. A group with one option preselected without the ability to unset it:

The vertical/horizontal alignment controls on the row block, stack block and buttons block start with one option selected by default, and that cannot be unset:

https://user-images.githubusercontent.com/1672206/218154917-be43a3a9-eaa5-4b66-aaad-4cef1f94fa53.mp4

https://user-images.githubusercontent.com/1672206/218155488-cdeef602-c8ce-4edc-b5b3-29d38ab032d2.mp4

This variant is particularly problematic because it means these blocks sometimes output the corresponding classes/CSS for the default setting, but only if another option has been selected and then changed back to the default. This is inefficient, and also limits the ability for themes to write CSS that contextually modifies defaults while respecting user choices (ex. .is-style-whatever .wp-block-group.is-layout-flex.is-vertical:not([class*="-content-justification"]) {})[^selector]


Having these similar controls all behave inconsistently is very confusing in use, and there are other issues that point out similar issues with other controls:

It would be ideal if there was a consistent way to "unset" every control, like Webflow's "reset" function.

[^selector]: The current state of the row/stack blocks requires such nightmarish CSS selectors. 😒 (#44880)

hanneslsm commented 1 year ago

Big +1! For horizontal alignment we have to keep in mind what happens when switching to RTL languages.