Adding more border style options

[benazeer-ben]

What?

Fixes #42993

Why?

Currently it is possible to set solid, dashed, dotted in border-style property. Need to add more styles as per ticket request.

How?

Added more style variations such as double, groove, ridge, inset, outset.

Testing Instructions

• Go to WP admin dashboard.
• Edit any post or page.
• Add any block which has border style support eg: Pull quote block.
• Check border style option.
• Try each style variation and verify it's working in editor and on frontend.

Screenshots or screencast

Screenshare.-.2024-12-31.12_14_35.PM.mp4

[benazeer-ben]

Hi Team,

Whenever you have some time, could you please review this PR? I’d really appreciate your feedback.

Thanks in advance!

cc: @t-hamano @carolinan

[carolinan]

Hi @benazeer-ben
This issue is not actionable until there is a final decision about if there should be more border styles or not. This would require feedback from the design leads.

[t-hamano]

Thanks for the PR!

While I personally think that having more variation in border styles is a good thing, I think there are some issues that need to be addressed from both a design perspective and a component perspective.

Design

1. It is difficult to tell the difference between "Groove" and "Ridge" from the border indicator.

2. The newly added icons themselves may need to be improved to make the border style more distinguishable.

cc @WordPress/gutenberg-design

Component

The inline style has been added to prevent overflow of the popover content, resulting in non-square button sizes:

We could solve this by increasing the width of the popover itself, but I think this is not ideal because the width of the popover is scaled to fit the six-column color palette.

We might be able to wrap the buttons as shown below, but the current ToggleGroupControl component is not designed for this type of UI:

I have no idea how to solve this 🤔

cc @WordPress/gutenberg-components

[ciampo]

We might be able to wrap the buttons as shown below, but the current ToggleGroupControl component is not designed for this type of UI:

Historically we have switched from a ToggleGroupControl to a CustomSelectControl (or SelectControl) when the amount of options doesn't fit in the UI (see FontSizePicker as an example).