Size Change: +238 B (0%)

Total Size: 1.4 MB

_{compressed-size-action}

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?

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

Yeah, it's basically the same. gap is just shorthand for column-gap and row-gap (which we don't really need here since margins works fine for the row gaps).

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?

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 flexbox and something like what we have here makes the most sense for now — and hopefully we could phase out the margin approach once gap becomes more widely adopted.

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.