Adding styles to the Separator block

[paaljoachim]

Is your feature request related to a problem? Please describe.
Existing styles which currently are located in the Separator block:

Describe the solution you'd like
It would be nice to have additional styles.
I have added Waves, Jagged and Loops to the mockup.

It creates a larger variation of decorations we can play with for the design.

Some of the inspiration came from here:
https://www.ecosia.org/images?q=various+line+types#id=88B94EC6E1CB8AC43E92FC497C666864E2718505

Overview issue: #16483

[paaljoachim]

@aaronrobertshaw Hey Aaron I am just making you aware of this issue. As it would be nice to later on add some more styles to the Separator block.

[aaronrobertshaw]

Thanks for looping me in on this one. It will be interesting to see what new styles can be added.

[paaljoachim]

I am digging through older issue and came across this one.
@richtabor @aaronrobertshaw

What if we add padding into the Dimensions panel? Making it possible to have a thicker line... Seems like an easy adjustment to add. Then perhaps a corner radius to have a thicker line with curved corners. Then we can have a border line as well. Using the tools we have today we can get a more varied HR Separator line.

[aaronrobertshaw]

What if we add padding into the Dimensions panel?

Unfortunately, I don't think it is as simple as adopting something like padding. The block itself and some default themes have very different approaches to the separator.

For example:

• The block offers a "dots" style where padding would not create the thicker display suggested
• Padding would interfere with the styling of the hr given it is displayed via top/bottom borders
• TwentyTwenty uses pseudo-elements to add a // touch to the middle of the separator, padding wouldn't adjust those relatively either

There are a lot more edge cases than those above and plenty of history in other issues or old PRs (e.g. #16928).

Not that this is a solution, or even a satisfactory workaround, but it would be possible to get the thicker line and rounded corners mentioned via a group block and borders.

1. Add a group block
2. Set top and bottom borders as desired
3. Set border radius to get the curved ends
4. If you want to get rid of the placeholder spacing in the editor, add a paragraph within the group block and set its font size to 0