search

WordPress / gutenberg

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

Make SpacingSizesControl more intuitive #63963

Open richtabor opened 1 month ago

richtabor commented 1 month ago

The current experience of editing a specific sides of the SpacingSizesControl is difficult to parse.

Here's why:

  1. The "controlName options" icon (the DropdownMenu that lists the individual sides) has a very similar icon to the icons to the left of the RangeControls for each. It's not clear what this icon does, and because it's so similar it's easy to mistake the other icons for this (and vise versa).
  2. We're prioritizing applying one side at a time, over any side at once.
  3. If you switch to any of the individual sides, the UI will only show that current side. You can have a value applied to others, but the UI only shows the current side.
  4. If you switch to any of the individual sides and want to change another, you have to switch back to another state to change another. The alternative is to always change to the "Custom" option, which shows all sides.
  5. We have the notion of "Link sides" and "Unlink sides" settings, as seen in the border and border radius controls. Why should SpacingSizesControl perform differently? It's the only control with an additional DropdownMenu to switch views within the component.

The original effort to only show one side at a time was an effort to save vertical space in the Inspector, but with the current improvements to this UI, I think we can afford to use this space—to make it much more intuitive to use.

Current

https://github.com/user-attachments/assets/6660b6c8-f4d9-41e2-94d5-963d94ba1bf5

Proposed

You select the "Unlink sides" icon and the sides are unlinked. No DropdownMenu to invoke singular sides. I've also updated icons to make them easier to scan and follow a vertical line.

https://github.com/user-attachments/assets/08b01fc4-809b-4803-a3bf-279dc3e1c758

Here's a prototype

andrewserong commented 1 month ago

Just a quick comment that I like the prototype! I always find the dropdown fiddly to use, so I really like the idea of removing that step.

hanneslsm commented 1 month ago

Big +1! Love the prototype! Also love that in your proposal the order is more intuitive, which would solve #51680

I'm only not sure of the chain icon. Maybe a chevron would fit better for more advanced controls, even though I am aware that would be a new UX pattern we haven't used before? Or the ones that used to be used in GB 16.0?

CleanShot 2024-07-26 at 09 27 06@2x CleanShot 2024-07-26 at 09 26 36@2x
richtabor commented 1 month ago

Maybe a chevron would fit better for more advanced controls, even though I am aware that would be a new UX pattern we haven't used before?

It's used for the border sides and border radius controls. Linking and unlinking is a relatively common UX pattern for this sort of interface.

hanneslsm commented 1 month ago

It's used for the border sides and border radius controls. Linking and unlinking is a relatively common UX pattern for this sort of interface.

True, I forget about those. If we use the chain icon already in this context, let's go with it. Nothing we couldn't change later if needed.

bacoords commented 1 month ago

I think this is an improvement!

There'd basically be no UI option for linking all four sides, right? I'm not saying there needs to be honestly, such an edge use case and you can achieve it with this UI, I just wanted to confirm this point. Looks like Figma more more less offers this same experience of linking/unlinking the inline/block spacing options not all four sides. 👍

richtabor commented 1 month ago

There'd basically be no UI option for linking all four sides, right? I'm not saying there needs to be honestly, such an edge use case and you can achieve it with this UI, I just wanted to confirm this point.

Only if the block's dimensions set them all as linked, like how block gap is for many blocks (but some have two controls). I'm not sure if padding/margin can all be linked but I'll look.

ndiego commented 1 month ago

If you switch to any of the individual sides, the UI will only show that current side. You can have a value applied to others, but the UI only shows the current side. If you switch to any of the individual sides and want to change another, you have to switch back to another state to change another.

I like where the prototype is headed. These two issues in the current implementation are very frustrating.

daviedR commented 1 month ago

+1 for this UI improvement.

I think, there is a UI issue we could improve on the SpacingSizesControl: #59135 Currently, the no value and zero value states on the preset slider are in the same UI style.

jasmussen commented 1 month ago

There's a bit of overlap with work in https://github.com/WordPress/gutenberg/issues/62618, so we should consolidate. I'm happy to close that one in favor of this, and in case there's some icon reusage we can do there's a Figma linked there. But that's also to say, this seems a good improvement both functionally and visually.

madhusudhand commented 1 week ago

@richtabor The suggested functionality implemented in #65193

I can work on a follow up to update the suggested icons. Could you provide svg assets?