The border controls for blocks allow themes and users to set a border width, style, color, and radius. These controls currently look like this in the editor's sidebar:

These controls take up a lot of spacing, and as such are hidden behind an accordion. Unfortunately, the accordion isn't very smart and defaults to it's closed state every time you select a block. This can make it cumbersome to update one or many block borders as you have to open to accordion every time. In addition, its currently not possible to define a border for individual sides of a block; Its all sides or no sides right now.

I have a few suggestions for improvement:

We can help simplify the UI by combining the color and width controls together into a more connected control.

The color control is reduced down to the current value, and when pressed opens a popover that allows you to change the color and style of the border. The color swatch updates to help explain when the style is set to dashed or dotted.

--

We can replace the accordion with the new ToolsPanel component. This helps to bring consistency to the overall editor interface, but also resolves the issue with the accordion defaulting to it's closed state.

--

We can add a range slider to help improve the ways the width value can be updated. The range slider is a more obvious method for mouse users to quickly change the value, and is very common with other inputs like the border width.

--

Finally, we can make use the "link/unlink" pattern found in other controls like Padding, Margin, and Radius to make it possible to define borders for individual sides of a block.