Fix up separator styles

[kjellr]

• Fixes the width of the default separator.
• Adds support for wide & full alignments. (Coming in GB 9.2)
• Fixes the opacity of the separator in the editor. (Noticed while testing with GB trunk 🤷‍♂️)

The last two bullets aren't possible/issues with the plugin turned off currently, but that first one definitely is. Screenshots below are with GB trunk active.

---

Front End

Before	After

Editor

Before	After

[melchoyce]

FYI, getting an error when I try to build this.

[kjellr]

Good catch. The IE build styles couldn't handle having an externally-referenced var in our global variables file. 😕

In 6bb57f3, I removed the --separator--width variable and replaced it with our usual --responsive--aligndefault-width variable instead. This should be fine, since it's the same anyway.

[melchoyce]

Not seeing anything to do with opacity, but tested this on 5.5.1 with and without Gutenberg nightly and it works well 👍

One concern — it feels weird to change the default style to wide or full and not have the separator change in appearance. I understand the logic there, since it's "default width," but I wonder if it might be worth allowing that to get wider as well, since it's an intentional setting someone is selecting. (It feels less weird with dots since they're a narrow width to begin with)

[carolinan]

I agree, I found it confusing that the wide style was thicker, not wider.

Maybe I misunderstood the intention but with Gutenberg trunk, the default style does not work with the new alignment option.

Suggestions:
Add a new block style for the thick version.

If there are core styles that are not meant to used because they don't work with the new setting, unregistered that style.

[kjellr]

One concern — it feels weird to change the default style to wide or full and not have the separator change in appearance. I understand the logic there, since it's "default width," but I wonder if it might be worth allowing that to get wider as well, since it's an intentional setting someone is selecting. (It feels less weird with dots since they're a narrow width to begin with)

That's actually just a bug that I didn't notice. 😄 Note that in the front end it's working as expected. I'll fix in the editor later today.

[melchoyce]

Good design-wise as soon as that width issue is fixed 👍

[aristath]

LGTM 👍

[kjellr]

Good design-wise as soon as that width issue is fixed

Fixed.

Add a new block style for the thick version.
If there are core styles that are not meant to used because they don't work with the new setting, unregistered that style.

I'll open a separate PR to try this out.

Issue is fixed. 👍