Dimension controls: Order by horizontal & vertical

[hanneslsm]

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

|

What is your proposed solution?

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

• Top
• Bottom
• Left
• Right

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)

[hanneslsm]

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

[richtabor]

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

[hanneslsm]

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"):