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.

[jameskoster]

@cgaits it's worth looking at the "Display options" menu in the typography panel designs shared in #27331:

It could be good to explore extending this heuristic up to the block level, making it possible to toggle panels (color, border, typography, layout) from a centralised interface.

[cgaits]

@cgaits it's worth looking at the "Display options" menu in the typography panel designs shared in #27331:

It could be good to explore extending this heuristic up to the block level, making it possible to toggle panels (color, border, typography, layout) from a centralised interface.

Yes, it is very intuitive and I like it; I was the publisher of a few magazines, including Trivia Times we used to make some heuristic puzzles. Is this a proposition for all WordPress menu items under the Gutenberg full editor?

[jasmussen]

Yes, it is very intuitive and I like it; I was the publisher of a few magazines, including Trivia Times we used to make some heuristic puzzles. Is this a proposition for all WordPress menu items under the Gutenberg full editor?

Most of the details are best outlined on the ticket itself, but it boils down to this:

• Global styles aims to provide themes a way to style most aspects of a page.
• For every such style, a design tool is needed. A design tool can be "font size" or "letter-spacing".
• Both because of the sheer amount of such design tools needed, and out of a need for block inspectors to be user friendly, we need a system that a) allows all blocks to have consistent interfaces that look and behave the same, b) have interfaces that can curate which controls are visible by default, and which aren't.

Ultimately, blocks, and block developers, should only need to declare support for a particular design tool, and not have to do any design work for it to appear in an intuitive and progressively unveiling way.

[aaronrobertshaw]

Work toward refining the border block support UI is currently in progress in #31585.

The designs in this issue required some updates to the underlying block supports mechanism that are still pending review. Any help getting those reviewed will help move this forward.

• Allow non-pixel units for border width & radius
• Allow per-corner border radius values

[aaronrobertshaw]

@jameskoster the border panel has been updated via #31585.

Other than the collapsed color control component I believe everything else is done regarding this issue. The new color control will be picked up by the panel when it is completed. In the meantime, are you happy to close this issue?

[paaljoachim]

Hey @aaronrobertshaw
That sounds great!

I believe that Joen @jasmussen can comment on closing/not closing this issue when he gets back from his vacation, as @jameskoster is on a sabbatical until 8th of September,

[jasmussen]

Let's close it! I'm quite sure Jay will reopen if things aren't up to snuff :)