Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Border Controls: Design Refinements #35602

Closed
Tracked by #33447
shaunandrews opened this issue Oct 13, 2021 · 5 comments
Closed
Tracked by #33447

Border Controls: Design Refinements #35602

shaunandrews opened this issue Oct 13, 2021 · 5 comments
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.

Comments

@shaunandrews
Copy link
Contributor

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:

image

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.

image

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.

image

image

--

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.

image

--

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.

image

--

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.

image

@shaunandrews shaunandrews added [Feature] UI Components Impacts or related to the UI component system Needs Dev Ready for, and needs developer efforts [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Oct 13, 2021
@mehul0810
Copy link

@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 50px or 99px. I know these numbers are not much used with borders. But, we should ensure that any random high number of border widths entered doesn't mess up the border representation in the admin.

What will happen to the border representation when the border width is 50px as shown in the image below?
CleanShot 2021-10-13 at 23 57 04@2x

Suggestion: I think that we should allow adding any number of border widths but restrict the representation after a certain value like 5px or 10px.

@shaunandrews
Copy link
Contributor Author

I think that we should allow adding any number of border widths but restrict the representation after a certain value like 5px or 10px.

Thats one solution. I think generally though, the representation might not have to actually reflect the width at all; The color might be enough to help enforce the connection to the controls.

@jeyip
Copy link
Contributor

jeyip commented Nov 23, 2021

@shaunandrews This is awesome.

I'm dropping in to say that I was looking for this exact feature when testing out site editing. I'm not sure if I'll have time to work on this in the near future, but I'm keeping this issue on my radar.

@stacimc
Copy link
Contributor

stacimc commented Dec 7, 2021

This looks fantastic 🤩

We'll need to adjust the controls depending on what border properties are supported by the particular block, but I don't think that will be difficult. The bigger question for me is whether it makes sense to have optional controls, which are possible in a ToolsPanel context.

With these designs I don't think you'd want or need to make any of the controls optional. The style control gets hidden away nicely already, and the connected controls are much more compact.

@apeatling
Copy link
Contributor

Closing this one out since all the work here is done! 🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

No branches or pull requests

6 participants