Update sidebar spacing

[geekpulp]

Description

Fixes #12652.

Fixing a spacing issue between block controls in the sidebar (issue #12652). I had previously submitted a pull request (PR #13106) for this but managed to screw up my repo (a rookie mistake) so I'm resubmitting now that I have a better idea of what I'm doing :)

How has this been tested?

Testing in firefox, safari, and chrome

Testing in the standard docker environment

Screenshots

Before

Types of changes

Visual change to the sidebar which increases the spacing between elements

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[Soean]

What have you fixed exactly? Can you add a before/after screenshot?

Edit:
Old PR: #13106
Issue: #12652

[gziolo]

@geekpulp - can you add the screenshot presenting changes after your changes applied? It looks like your first code contribution might land into Gutenberg quite soon :)

[geekpulp]

@geekpulp - can you add the screenshot presenting changes after your changes applied? It looks like your first code contribution might land into Gutenberg quite soon :)

I'm embarrassingly excited by that. I should get that sorted for you in the next 48 hours.

[jasmussen]

Thanks so much for this PR! Really happy to see this.

It needs a little bit of work, though. I'm really really happy to see so much use of variables like $grid-size. However we might want to pull back on as many of those changes as we can, in order to be able to ship this, because there are a few regressions introduced as a result of this. Here's master:

Here's this branch:

Notice how the separators no longer go edge to edge, and how the padding is kind of compact. It looks like the following rule is the crux of the fix:

.components-base-control + .components-base-control {
	margin-bottom: $grid-size-large;
}

but either this is not working correctly, or we might want to increase it. Here's master:

Here's this branch:

I'll try and leave some thoughts in the code as to how we might address this in a simpler way perhaps.

[geekpulp]

Ok, I've made some changes and it seems to be ok from what I can see. Here's what it's looking like for me:

Strangely @jasmussen, I couldn't see the regression issues you showed in your screenshots? I tried in safari, chrome, and firefox but couldn't recreate it. This makes me think I'm doing something wrong with my dev environment?

[jasmussen]

Very nice work, thank you. This is 90% there, but this might be one of those cases where the last 10% might take a while. Here's an index of the sidebars:

Notice how every collapsed panel in the block settings sidebar has a bottom margin that it shouldn't have.

It also appears like some controls (perhaps the ones that DO use BaseControl as a wrapper, not all elements do) have a relaxed bottom margin, whereas others are a bit tight.

It's a little frustrating that we need to account for so many edgecases, it'd be nice if there was a simple fix across all these. Let me know if you have time to take a stab, otherwise I can take over this PR and bring it home.

[geekpulp]

@jasmussen I hate to say this but I don't think I will have any time on this until the weekend. Happy for you to progress it from here.

[jasmussen]

Okay, I commited a fix, and rebased your branch. As far as I'm concerned, this is now good to go. Let's see if the tests don't pass.

GIF:

[gziolo]

@geekpulp congratulations on your first code contribution to Gutenberg 🎉

[geekpulp]

That’s everyone for your help on this. Huge learning experience for me. First contribution out of the way, on to the next!