search

WordPress / gutenberg

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

Dimension controls: Order by horizontal & vertical #51680

Open hanneslsm opened 1 year ago

hanneslsm commented 1 year ago

What problem does this address?

The new dimension controls are awesome! However, there is a UX inconsistency in the order of the controls when switching from the default to "Custom". The default is: Top / Bottom and Left / Right (= Horizontal & vertical) The custom order is: Top, Right, Bottom, Left. (= Mixed)

GB 16.0 Default Horizontal & vertical
image

What is your proposed solution?

The custom order should reflect what's already displayed on the default, meaning:

Maybe we can even add a tiny bit of padding between "bottom" and "left" subtly distinguish between Horizontal & Vertical Here is a quick mockup: GB 16.0 Custom (Mixed) Proposal (Keeping Horizontal & Vertical order)
image image
hanneslsm commented 1 year ago

The new order should of course also be adapted in the Menu then

image
richtabor commented 1 year ago

It's tricky, as top right bottom left is the order in which the CSS shorthand property is written (source).

hanneslsm commented 1 year ago

It's tricky, as top right bottom left is the order in which the CSS shorthand property is written (source).

Yeah, I know, but that's not an argument I can bring up with clients. They surely will get confused why the order has changed. The user journey (getting primed with an order already) and target group (not technical users) are different for Gutenberg than for CSS, so I'd argue that we finally break away from the technical constrains and build a more intuitive interface.

Also, one could argue that those ("advanced" padding and margin) features are mainly for (web-)designers. In that case, let's see what Figma does with borders (they even have a different name for it: "strokes"):

image