Enhancing Button/Toggle Group Consistency and Visual Clarity

[jayclydeTags]

What problem does this address?

Currently, there's a lack of visual consistency and clarity in the grouping of certain settings and style options within Gutenberg. For instance, the Font Size Picker, Appearance ordering, and Items per Page options are clearly grouped visually, while others like Justification, Decoration, etc., lack a distinct visual grouping. This inconsistency can hinder user experience and understanding.

Bordered Group	No visual

What is your proposed solution?

To address this issue, we propose the following improvements:

1. Consistent Visual Grouping:

• Border: Introduce a subtle border around related button or toggle groups to visually differentiate them from other options. This will create a clear visual hierarchy and enhance the overall layout.

2. Default Styles for Orientation and Letter Case:

• Implement default styles for Orientation and Letter Case settings to provide a consistent baseline and improve user experience.

3. Flexible Button Groups:

• Consider making button groups more flexible, similar to the Appearance > Items per Page option . This would allow for dynamic adjustments based on panel size

By implementing these changes, we can significantly enhance the visual clarity, consistency, and user experience of Gutenberg's interface, making it easier for users to understand and interact with the various settings and style options.

Mockup https://www.figma.com/design/QLc1Di5xCp063RkXgS6FRZ/WordPress-Design-System---Explorations?node-id=18368-43985

[jayclydeTags]

To avoid potential visual clutter, I've experimented with alternative methods to differentiate between input fields and toggle groups. What do you think?

[hanneslsm]

For the block variation selection and justification the border appears already now on hover. I don't know the reasoning behind this.
For text decoration, it the border doesn't appear. Not sure, if this is bug.

[mirka]

For what it's worth, these were intentional design decisions based on whether or not the options are icon buttons. The border is basically controlled by the isBlock prop on the ToggleGroupControl component.

Design updates for the component are being discussed in #64439, though we don't have a consensus yet. A big requirement for the redesign is to support more accessibility features, like disabled states and focus states that are separate from the selection state.

[mirka]

For text decoration, it the border doesn't appear. Not sure, if this is bug.

This is the deselectable variant, in which each button needs a separate tab stop. (Otherwise, the entire control has a single tab stop, and options are navigated by arrow keys.) In this design iteration, the outer border doubled as a focus indicator.