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

Adjust borders on block-level controls in the Toolbar #25983

Closed
mtias opened this issue Oct 9, 2020 · 4 comments
Closed

Adjust borders on block-level controls in the Toolbar #25983

mtias opened this issue Oct 9, 2020 · 4 comments
Assignees

Comments

@mtias
Copy link
Member

mtias commented Oct 9, 2020

The semantic groupings we have in the toolbar — meta, block level, inline — should also have a visual representation with the borders. Right now separate block level controls have different representations, including cases like Navigation where every single one has borders.

Here's a before and suggested after:

Block toolbar groupings

@mtias mtias added [Feature] Blocks Needs Design Feedback Anything that needs general design feedback. [Type] Task labels Oct 9, 2020
@karmatosed
Copy link
Member

karmatosed commented Nov 27, 2020

I took a little look at this and my current thinking is how far could we reduce the use of borders which would result in having much clearer groupings.

Here is what just some look like currently to context.

example

example2

Grouping

As mentioned, the groupings naturally fall into the following. I would like to check my thinking on meta referring to document controls (moving within space), but this is what I think summarises a potential reduction here:

Frame 1

In this case, if controls fell into that group, there would be no border.

navigation

The outlayer here is the options section, which might be acceptable as additional information appended to the toolbar.

There will need to be some working out of each case, but applying a pattern across all blocks seems like a good starting place.

@jasmussen
Copy link
Contributor

jasmussen commented Jan 5, 2021

Great ticket. I've taken Tammies work above, and built upon it and expanded with some "before/after" ones, which I will take the liberty of updating the main ticket with.

Note that this is about toolbar groupings in the design sense. There are some underlying tech issues that need to be addressed in order to make this happen to solve this PR.

As already proposed by Matías and Tammie, I've embraced these 4 section descriptors:

  • Meta refers to actions on the block itself — its type, style, position.
  • Block level refers to the HTML parlance where block level relates to the whole block. Actions here apply to the whole block, such as alignments, or in case of blocks with nesting, actions that affect all blocks inside.
  • Inline level similarly refers mostly to in-text transformations such as bold or italic on a text selection. This grouping can also be Other, for actions that don't fall into any of the other groups.
  • More is the overflow menu.

Mockup:

Block toolbar groupings

In the above mockup, the Paragraph already has correct groupings. Image and Navigation need a little work.

Related issues:

@noisysocks noisysocks added [Type] Enhancement A suggestion for improvement. and removed [Type] Task labels Jan 6, 2021
@noisysocks noisysocks added this to To do in WordPress 5.7 Must Haves via automation Jan 6, 2021
@noisysocks noisysocks added Needs Dev and removed Needs Design Feedback Anything that needs general design feedback. labels Jan 7, 2021
@hedgefield
Copy link

hedgefield commented Jan 13, 2021

This is really great, makes the grouping so much clearer 👍 Can it be picked up for 5.7?

@noisysocks noisysocks removed this from To do in WordPress 5.7 Must Haves Jan 27, 2021
@youknowriad youknowriad self-assigned this Feb 19, 2021
@mtias mtias added [Type] Task [Type] Developer Documentation Documentation for developers labels Mar 3, 2021
jasmussen added a commit that referenced this issue Mar 12, 2021
…trols

This takes a first stab at creating new documentation for block toolbar group best practices.

See also #25983.
jasmussen added a commit that referenced this issue Mar 12, 2021
…trols (#29816)

* Update block design principles with a new section on how to group controls

This takes a first stab at creating new documentation for block toolbar group best practices.

See also #25983.

* Address feedback.
rafaelgalani pushed a commit that referenced this issue Mar 18, 2021
…trols (#29816)

* Update block design principles with a new section on how to group controls

This takes a first stab at creating new documentation for block toolbar group best practices.

See also #25983.

* Address feedback.
@mtias
Copy link
Member Author

mtias commented Jul 12, 2021

Closing this as done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants