Seperator block ends up full-width

[karmatosed]

Often the theme's <hr> styling will override any differentiation between wide and short separators, and both end up full-width.

Issue made from block audit #8970. Props @kjellr and @sarahmonster.

[jorgefilipecosta]

Hi @karmatosed, @kjellr, @sarahmonster,
What would be the ideal way to address this problem, should we increase the specificity of our styles to make sure they overwrite theme ones?

[sarahmonster]

Some examples of this in action:

Twenty seventeen:

Twenty sixteen:

Twenty fifteen:

Atomic blocks:

_s:

It looks as though we'd need to set a width attribute on the default .wp-block-separator element. Since the default separator doesn't have a specific class, you'd either need to use chained :not statements:

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    max-width: 100px;
}

...or add an additional class to the default .wp-block-separator, and apply the styling directly to that.

If the :not solution seems sensible (and like it wouldn't be likely to break anything), I can make a PR for this.

[webmandesign]

The issue was also discussed in #10569

[paaljoachim]

Is this issue still valid?

[paaljoachim]

I will go ahead and close this issue as it seems like this has been taken care of in various associated issues/PR's. If I am mistaken then please reopen the issue.