Separator Block applies colour twice

[Nyiriland]

Problem

I’ve noticed that when I adjust the colour on separator blocks to use alpha hex values (aka colours with transparency), the line hr styles (Default and Wide) appear to be darker or lighter than they should be.

Upon further inspection, it’s because they are created by layering a border over a background, with colour applied to both. This layering of colour doesn’t matter with opaque values, but when the values include transparency, they multiply. Which means something like a semi translucent black looks much darker than intended.

Screenshot from a temp site, showing how the dots appear much lighter in colour than the line, even though they use the same colour setting:

Even though the hr height is outputting at zero for the default/wide styles, it’s still showing the background colour behind a 1px border because of how the CSS box model works: borders live inside a box's boundary and overlap the background.

I also reported this in the #dotorg-design Slack channel.

Solution

Apply colour to only the border or the background, not both.

My initial instinct is that an hr's height should be determined by its CSS height, and therefore its colour via background-color, but I can also see an argument for using border-width instead:

• If the desired colour is set on the hr via its color, that natively applies colour to the dot style. You can then use currentColor to apply it to the border-color. Therefore you only need 2 lines of CSS for global colour on the hr. (The hr background colour would also need to be unset by default.)

• Alternately, if you apply currentColor colour to the background-color, then you’re also going to end up with a background colour on the dot style separator… which you don’t want. So you'd need different CSS colour applications for the dot vs wide/default styles, resulting in slightly less efficient CSS.

background-color vs border-color?

I am #teambackground-color. It looks like historically it was a border that determined the hr style, but this seems to be deprecated pretty much everywhere I look (even the MDN docs are outdated) in favour of more modern CSS styling methods.

Also, if we're ever to add a variable height option to the Separator block, using height & background-color is much simpler, and leaves more options for custom styling (like adding background images). You don't want to be dealing with border-width, or which border to apply (top? bottom?).

Another thing to consider is backwards compatibility, but I guess that's a very large can of worms, haha.

Also noting it seems like colours are applied in Gutenberg via CSS variables if using colours in the theme's palette, but if you're using a one-off colour via the colour picker, they are applied inline via javascript.

cc @richtabor @jasmussen

[Nyiriland]

Also will probably fix this issue re: gradient separators: https://github.com/WordPress/gutenberg/issues/52986

[jasmussen]

Thanks for the issue, good one. The double-applied border seems like a bug, the color should definitely only be applied in one place.