Fix issue #12652 - Sidebar spacing

[geekpulp]

Fix spacing on sidebar

Adding some spacing on the sidebar below each of the descriptions. This
corrects issue #12652

Description

• remove margin from .components-base-control__help and created margin in .components-base-control + .components-base-control.
• moved from px to $grid-size

How has this been tested?

Minimal testing, made the change, tried it in safari, Chrome, Firefox on MacOS

Screenshots

Types of changes

small css change that increase spacing on sidebar below description

Checklist:

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

[youknowriad]

Thanks for the PR @geekpulp

I'm wondering if the best way to fix is to add a margin bottom to the help component (which may or may not be present depending on what component is used). It feels like the root issue is that there's no space between controls. So maybe the fix is more to target something like .components-base-control + .components-base-control

What do you think?

[youknowriad]

Another thing is I think we're trying to make sure we use the $grid-size as a basis for all these spaces in the UI. So maybe $grid-size*2 or something?

cc @jasmussen

[geekpulp]

Thanks for the feedback. You’re right. I’ll change my approach and update.

[geekpulp]

@youknowriad Ok, I've had another crack at it. Seems to have done the trick. Also updated a related stylesheet to use $grid-size.

It's quite a learning curve but this is strangely fun.

[jasmussen]

Thank you for using $grid-size! If you need to, there's also $grid-size-large, which is the same as $grid-size * 2.

[geekpulp]

@jasmussen Cool, I'll change that then. Is there somewhere I can go to see standards like grid-size so I can proactively make changes like that? Is it something documented somewhere?

[geekpulp]

Hmm showing my newbie skills here with Git. Sorting it.