Fix the balance of the WordPress logo and inserter. #21811
Conversation
These two regressed recently. The margin between the WordPress logo and the inserter button has been balanced to optically match that of the more menu on the right. The Inserter button was set to 32x32 to not be too imposing in the top toolbar, this was unintentionally removed.
|
Size Change: -6 B (0%) Total Size: 845 kB
ℹ️ View Unchanged
|
| @@ -10,7 +10,6 @@ | |||
| border: none; | |||
| border-radius: 0; | |||
| height: auto; | |||
| margin-right: -8px; | |||
There was a problem hiding this comment.
Without this the logo and the Inserter seem too far apart.
There was a problem hiding this comment.
I disagree quite a bit, and find that spacing to be a key ingredient of the more spacy nature of the G2 design. It's part of the 12px grid, and it's balanced towards the space on the right:
You're not the only one to disagree with this, which suggests it's worth having a conversation about: do we make exceptions to the 12px grid, or is there a way to re-balance the blue button? But as a concerted G2 effort to create a holistic design, it's a little hard to keep up with small changes bundled in with others.
If we decide to revisit, the change in spacing should happen on the right element, as it is, this pulls the header area towards it:
There was a problem hiding this comment.
Here's what I see when I look at your suggested spacing:
All the green spaces are the same size, but then there's that random looking red space.
What I'd expect is for the space around the + button to be the same on all sides.
There was a problem hiding this comment.
This is the grid that G2 was designed towards:
That toggled state is 32px wide, which is optically balanced to be between the 24px button and the outer edge of the block toolbar. If the black square was 36px, then sequential icons, bold italic and so on, would but up against each other.
It's an ongoing effort to make everything adhere properly to the grid, and actually that 32px size is one of the things that I promised Riad that we should look into. As he noted, most buttons are 36px in dimensions, which feels too big for the inserter and certainly is too big for toggle buttons in the block toolbar. It also makes the focus style for the inserter inconsistent with the other buttons. So there's definitely an inconsistency here that I think we should address holistically.
In the mean time, though, I would consider this PR less of a design discussion and more of a fix for a regression given the discussion to add a left padding to match the G2 mockups here: #20685 (comment)
Would you mind if we merged this fix and then opened a separate ticket to discuss this margin? We could make it a ticket about how to apply that grid to the top toolbar, dimensions of the buttons, spacing between, all of that, and then address it all in one fell swoop!
There was a problem hiding this comment.
Don’t let my complaining stop you from merging.
There was a problem hiding this comment.
Alright, I created #21870 as a good and visible place to discuss this!
There was a problem hiding this comment.
I just think all buttons should have the same size no matter where they are 🤷♂️
|
It would be more consistent having an even spacing between the various icons also the W icon area. As the layout feels more balanced when icons have a balanced spacing between them. |
These two regressed recently. The margin between the WordPress logo and the inserter button has been balanced to optically match that of the more menu on the right. The Inserter button was set to 32x32 to not be too imposing in the top toolbar, this was unintentionally removed.
Before:
After: