Add margin support to Separator block

[stokesman]

Some folks would like to be able to control the height of the Separator block #25989. This PR enables that by adding support for custom margins. It depends on the changes from #25988 that introduce the margin support flag and also includes those for ease of testing.

Testing this requires a theme that enables Spacing block support so Twenty Twenty One is a good one.

This would, I think, satisfy and close #25989.

How has this been tested?

Trying various margin settings on a Separator block and previewing on the frontend.

Screenshots

separator-margin.mp4

Types of changes

feature

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.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[paaljoachim]

Wow I did not even think of that!
What a super interesting idea to use margin to better control where the line shows up in the Separator block!
Margin can also be used for changing the width of the line in addition to having space below or above the line.

Margin creates a multi faceted approach to width, alignment (want the line to the left add a lot of right margin), and placement of space. It gives the user a lot of creativity in how to design the separator line.

Now would using padding change the thickness of the line?

I believe that the PR would need some feedback
@ItsJonQ @jasmussen
To get some perspective on the design tools used in such a way.

[stokesman]

Now would using padding change the thickness of the line?

It does but not in all cases as it depends on the block style (and CSS implementation) of the line. The Dots style just gets space added around it. Then there are cases like Twenty Twenty style of separator:

The slanted pair of lines in the center are pseudo-elements so aren't affected. While they could be styled to inherit padding I don't think using padding to support line weight/thickness is a technically or conceptually sound way to do so.

I'd actually tried using padding to support only the height control feature a few months ago but it was too tricky to make it work for all styles of separator (I was aiming to maintain their thickness and only adjust spacing).

[paaljoachim]

Jon @ItsJonQ and Joen @jasmussen would probably want to know about the PR as well.

[jasmussen]

Cool work! Thanks for all your effort 🏅

There's an important conversation to be had about how spacing like this should be a global style property that can then be enabled on a per-block basis. Both because I could see spacing properties be surfaced on many more blocks than just the separator, but also because for that to happen in a way that doesn't explode the sidebar interface, we need a design and system for surfacing such controls in the sidebar.

#27331 just happens to touch on both of those issues.

So my primary question here isn't around the feature — big fan — but rather about the order in which we do things. If we do this now, for the separator block, does that cause headaches for us in the future when a spacing block property lands in global styles and becomes more of an opt-in?

Something to think about, and when you feel this is ready for more eyes, maybe ping the gutenberg-core group for review!

[stokesman]

@jasmussen Thanks for the thoughts. I'm not sure the feedback is entirely applicable. In this PR, the spacing support is added by a block support property and can be theme-controlled (which seems to be the same thing you are referring to as a global style property, not sure).

I have no strong opinion about this feature. The PR was made as an exploration to offer a different approach to #28409. To which your feedback may be more relevant as it adds the feature and controls in an ad hoc manner.