Fix the block toolbar styles to evenly space buttons #39630
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
[Type] Bug
|
Size Change: -838 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
jasmussen
approved these changes
Mar 22, 2022
There was a problem hiding this comment.
This is an incredible cleanup, thanks so much. I was rather sure this would require a massive refactor of the block toolbar markup itself, the fact that it's all CSS is impressive.
Before:
After:
The metrics are as you say:
It works great with plugins as well:
And the focus outline works as it should:
I would love to get some more eyes on this, to get people to test with a variety of blocks and plugins in addition to what I've tested. But from what I can see, this is entirely solid.
jasmussen
added
the
[Type] Code Quality
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Follow-up to #39605
What?
In #39605 (comment) we noticed that the block toolbar spacing is not correct when the block toolbar contains two buttons with descriptions. The descriptions show hidden divs in the DOM impacting the
:first-childlast-childselectors that are supposed to apply the correct styles to the button toolbars.How?
This PR solves that by removing the special cases from the "first" and "last" child buttons of block toolbars. Instead the containing toolbar group now has a 6px padding. The impact here is that the click area of the first and last buttons of a "toolbar group" is a bit smaller but it's also more consistent with all the remaining toolbar buttons.
Testing Instructions
1- Use different blocks and toolbars
2- make sure the toolbar buttons are evenly spaced.
Screenshots or screencast
I added a red outline to the impacted buttons in the screenshots here