Border Controls: Design Refinements #35602
Projects
Comments
@shaunandrews These designs are just amazing! Also, I would like to point a rare scenario related to the representation of a border with a random maximum number like What will happen to the border representation when the border width is 50px as shown in the image below? Suggestion: I think that we should allow adding any number of border widths but restrict the representation after a certain value like |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
shaunandrews commentedOct 13, 2021
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.
The text was updated successfully, but these errors were encountered: