Try using the column-gap property to improve spacing between custom-sized buttons #29165
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
kjellr
added
[Block] Buttons
|
Size Change: +238 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
|
Wow this is wild! And I can see it working, the code is solid. Before:
After:
The flex "gap" property would've been ideal, but I can see from the discussion that support is lacklustre. But from what I can see, column-gap isn't much better? https://caniuse.com/?search=column-gap The thing is, I consider Social Links, Navigation, and Buttons to all be 3 configurations of the same general block UI, and 3 blocks that could/should support some of the same things. For example, the justification toolbar is being added to all three (#29160) and made generic. And right now, those horizontal margins for all three are big headaches. If we could replace that with a gap value, one that you might even configure in the sidebar, it would be so ideal. So I support the end goal, but I'd love if we could find a solution that not only worked better with compatibility, but let us retire BOTH the margins, and the baked-in $block-margin SASS variable & calc usage. I know CSS grid can do this, but that seems like a thing to avoid if we can. I may be dreaming? |
Yeah, it's basically the same.
CSS grid generally isn't a great solution for cases when we don't know the total number of rows/columns we want. I think |
scruffian
approved these changes
Mar 26, 2021
|
Thanks for the review. If @jasmussen's cool with it, I suggest we merge this in and iterate later if need be. |
|
We've been going back and forth. But it's we're ready to look at follow-ups, let's try it. |
|
Sounds good, let's give it a try! I'll keep my eye on it and see if anything weird happens. Depending on how this sorts out, we may be able to remove the fallback code relatively soon. |
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.
Possible fix for #28468.
This PR tries setting a
column-gaprule for the parentwp-block-buttonsblock, and then adjusts the width of child buttons to account for that gap. This lets combinations of custom-sized buttons take up the full width of the container, (hopefully) without any extra right margin. I left the existing implementation in place for legacy browsers — this new one only kicks in if your browser supports thecolumn-gapproperty.I think all my math works, but it's late in the afternoon on a Friday, so it's possible I've missed something. 😅