Refine border control panel with design tools

[jameskoster]

Now that we have border controls (#30124 🎉) I took a little time to explore how we might apply some of the concepts outlined in #27331 to refine the UX here a bit.

Some of the suggestions can be implemented now, others will require underlying components that are yet to be built.

Here's a before / after, and a list of the changes:

• Rename panel to "Border"
• Removed repetitious "border" copy in labels
• Re-arranged controls to match css syntax, IE Width → Style → Color
• Use a segmented control for the style selector (or perhaps just a plain select, see Refine border style dropdown design #31333)
• Use a stepper input for the width control. This one may depend on whether we need to allow users to change the unit from px to em etc.
• Use the new color control for the color
• Re-purpose the proposed padding control for border radii (Allow longhand and shorthand properties in theme.json and block attributes #31641)

[karmatosed]

Goodness this is significantly better to interact with visually, great work. My initial thought after feeling it's just a lot easier to process is that perhaps the order is something to iterate on? I wonder for example if color would come as the last still in the list? Beyond that, I think it's a great iteration.

[paaljoachim]

Looking at the Cover block to see how it handles Padding of all sides compared to manually unlocking individual side adjustments.

Here one clicks the lock. (Tool tip is seen.)

Unlocked:

Should the same method be used for any control that have a similar mechanism? Such as border control.

[cgaits]

The After is a better UI/UX as it better aligns with design software UI/UX.

[aaronrobertshaw]

Raising some feedback on the existing border controls here in case it changes anything.

It could be confusing to have the width and color controls there when the border style is set to none (or default, depending on defaults), though.

[jameskoster]

Should the same method be used for any control that have a similar mechanism? Such as border control.

If it is easy to re-purpose the existing padding control, that could serve as an interim. Ideally both the padding and border radii controls would be updated to use concepts outlined in #27331.

It could be confusing to have the width and color controls there when the border style is set to none (or default, depending on defaults), though.

I think the solution here is to not allow a "none" border style. That way the presence of the border is governed entirely by the width control and (hopefully) scope for confusion is reduced.

[cgaits]

Raising some feedback on the existing border controls here in case it changes anything.

It could be confusing to have the width and color controls there when the border style is set to none (or default, depending on defaults), though.

A check-mark and x would also help in choosing a border state, and it would visually guide the user.

[paaljoachim]

Pasting in the gif seen in the Dimensions settings area here: #27331

[cgaits]

Raising some feedback on the existing border controls here in case it changes anything.

It could be confusing to have the width and color controls there when the border style is set to none (or default, depending on defaults), though.

A check-mark and x would also help in choosing a border state, and it would visually guide the user.

I made an example of what would be in my opinion the best for the border state.