Dimension tools: Add icons for block spacing and min. height

[jasmussen]

The current dimensions panel has icons for padding and margin stepped controls, but not for block spacing and min-height controls. This causes misalignment of the controls, making it less scannable. Additionally, in case of width-based controls, or axial gap configuration, an icon denoting the orientation can help anchor the feature.

Here's a design proposal that adds icons for block spacing and min-height, shown before and after:

Beyond lining up vertically, this also unifies the controls so that in the future, axial controls (row-gap or column-gap vs. just gap) could be added to the block spacing control. To that end, here are potential icon designs that would work for axial gap configurations:

Figma.

[jarekmorawski]

Good idea! I think this is a meaningful improvement, but only when paired with more granular settings for controlling the vertical and horizontal gap separately. I can already think of a use case: in WooCommerce, you may want to add a small gap to the product collection so the rows have more breathing room while the grid's density remains the same. Currently, I'd do that by adding a top padding to the product card block, but this setting would work much better.

We'd make Block Spacing work similarly to Padding and Margin, meaning that we'd surface granular settings when the user clicks the icon next to the label. Here's a quick sketch.

In the future, this consistency would enable us to easily overhaul the whole Dimensions panel and clean up all UI controls at once: from Margin to Block Spacing to Width.

[richtabor]

I'm not sure if it's the right icon, but I do like that it makes the sliders more uniform and understandable.

[akasunil]

For min height icon, could we use something like this?

originally proposed in https://github.com/WordPress/gutenberg/issues/55734 for full height toggle.

[mateuswetah]

Not a big fan of the proposed height icon too... it reminds me to much an "I". I like the bar with arrows... or maybe we could have something close to this, using a bit of the style of the side padding and margin?

[jameskoster]

A small detail, but it would be good to use the new DropdownMenu component here:

Since this is not a multi-select option we should avoid the checkbox icon and use DropdownMenuRadioItem. An additional consideration is that radio menu items do not support an icon. So if the icon is critical, we may need to consider a different UI (segmented control?).