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":
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:
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:
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:
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":
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:
is-style-default
in block styles, including https://github.com/WordPress/gutenberg/issues/45430It 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)