Global styles: move border from layout to own menu

[madhusudhand]

What?

This change moves the border controls from layout to its own menu in global styles.

Why?

This change is with reference to the discussion here

Working on this mockup made me realize a shortcoming of our current global styles. Right now you have Typography, Colors, Layout. Layout includes various values — margin and block spacing for Buttons, and border and border radius for Image. For both Typography and Color, these two blocks (Buttons, Image) have panel counterparts. But there's no counterpart in Global Styles for Dimensions and Border — those are put inside "Layout" instead.

In the current change, the menu is called Border and it will be updated to Border & Shadow with the introduction of Shadow controls (Work in progress: #45507)

Testing Instructions

1. Navigate to any block in global styles
2. There is a new menu Border with all the related controls
3. It should function exactly same as it was before.

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[madhusudhand]

@jasmussen can you provide the svg for the icon

[jasmussen]

Here are the two new icons:

Shadow:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve"><path d="M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM12.8 3h-1.5v3h1.5V3zm-1.6 18h1.5v-3h-1.5v3zm6.8-9.8v1.5h3v-1.5h-3zm-12 0H3v1.5h3v-1.5zm9.7 5.6 2.1 2.1 1.1-1.1-2.1-2.1-1.1 1.1zM8.3 7.2 6.2 5.1 5.1 6.2l2.1 2.1 1.1-1.1zM5.1 17.8l1.1 1.1 2.1-2.1-1.1-1.1-2.1 2.1zM18.9 6.2l-1.1-1.1-2.1 2.1 1.1 1.1 2.1-2.1z"/></svg>

Border:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve"><path d="m19.8 10.4-1.5.3c.1.4.1.8.1 1.3s0 .9-.1 1.3l1.5.3c.1-.5.2-1 .2-1.6s-.1-1.1-.2-1.6zm-2.4-2 1.2-.8c-.6-.9-1.3-1.6-2.2-2.2l-.8 1.2c.7.5 1.3 1.1 1.8 1.8zM12 5.5c.4 0 .9 0 1.3.1l.3-1.5c-.5 0-1.1-.1-1.6-.1s-1.1.1-1.6.2l.3 1.5c.4-.2.9-.2 1.3-.2zM8.4 6.6l-.8-1.3c-.9.6-1.7 1.4-2.3 2.3l1.2.8c.6-.7 1.2-1.3 1.9-1.8zM5.5 12c0-.4 0-.9.1-1.3l-1.5-.3c0 .5-.1 1.1-.1 1.6s.1 1.1.2 1.6l1.5-.3c-.2-.4-.2-.9-.2-1.3zm1.1 3.6-1.2.8c.6.9 1.3 1.6 2.2 2.2l.8-1.2c-.7-.5-1.3-1.1-1.8-1.8zm5.4 2.9c-.4 0-.9 0-1.3-.1l-.3 1.5c.5.1 1 .2 1.6.2s1.1-.1 1.6-.2l-.3-1.5c-.4.1-.9.1-1.3.1zm3.6-1.1.8 1.2c.9-.6 1.6-1.3 2.2-2.2l-1.2-.8c-.5.7-1.1 1.3-1.8 1.8zM12 7c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>

You can add those to the icon library, I'm sure we can use them elsewhere as well!

[jasmussen]

Thanks for the PR. Here's a GIF showing the new option under Global Styles → Blocks:

As-is, I honestly feel like this is a solid improvement. To me it made no sense that "Border" and "Radius" were under "Layout". And this at least brings consistency to the panels that are shipping, and it feels easier for me to find things.

I think there's a longer conversation on what the panel should be called. In the initial iteration, I suggested "Border & Shadow", but "Effects" might be better, or even "Decoration". Here are some doodles:

@WordPress/gutenberg-design @pablohoneyhoney @mtias I'd love your high level takes on these.

But for this particular PR, which just adds the "Border" item, I'd be happy to ship this, but perhaps we should change the border icon to just this, in the mean time:

That would be the following SVG update to the border icon:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="m6.6 15.6-1.2.8c.6.9 1.3 1.6 2.2 2.2l.8-1.2c-.7-.5-1.3-1.1-1.8-1.8zM5.5 12c0-.4 0-.9.1-1.3l-1.5-.3c0 .5-.1 1.1-.1 1.6s.1 1.1.2 1.6l1.5-.3c-.2-.4-.2-.9-.2-1.3zm11.9-3.6 1.2-.8c-.6-.9-1.3-1.6-2.2-2.2l-.8 1.2c.7.5 1.3 1.1 1.8 1.8zM5.3 7.6l1.2.8c.5-.7 1.1-1.3 1.8-1.8l-.7-1.3c-.9.6-1.7 1.4-2.3 2.3zm14.5 2.8-1.5.3c.1.4.1.8.1 1.3s0 .9-.1 1.3l1.5.3c.1-.5.2-1 .2-1.6s-.1-1.1-.2-1.6zM12 18.5c-.4 0-.9 0-1.3-.1l-.3 1.5c.5.1 1 .2 1.6.2s1.1-.1 1.6-.2l-.3-1.5c-.4.1-.9.1-1.3.1zm3.6-1.1.8 1.2c.9-.6 1.6-1.3 2.2-2.2l-1.2-.8c-.5.7-1.1 1.3-1.8 1.8zM10.4 4.2l.3 1.5c.4-.1.8-.1 1.3-.1s.9 0 1.3.1l.3-1.5c-.5-.1-1.1-.2-1.6-.2s-1.1.1-1.6.2z" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>

[jameskoster]

Personally I think a dedicated Border panel makes sense, particularly if we want to expand the control to support border-style in the future. Still not sure Radius fits in there, but that's a separate issue :D

I like the idea of the Decoration / Effects panel too, but see that more as a home for shadow (as you mentioned) and things like filters.

[scruffian]

LGTM. The border icon looks like brightness to me, but we can iterate!

[jasmussen]

Before you merge, please update to the icon in #45995 (comment)

[scruffian]

Oh sorry I missed that comment! I'll do that now.

[scruffian]

Done here: #46264