Separator block(dots) doesn't render anymore

[Robertght]

Quick summary

In short, the block doesn't render the dots style on Classic themes anymore.

Steps to reproduce

1. Activate a theme like Canard, Dara or TwentyTwenty.
2. Create a new page or post
3. Add a Separator block(dots)
4. check the results

What you expected to happen

To see the separator block render.

What actually happened

Nothing displayed, yet the markup is there.

Impact

Some (< 50%)

Available workarounds?

YES - see https://github.com/Automattic/themes/issues/7978#issuecomment-2303873208

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Tested on Simple and Atomic.

Themes where it didn't show up: Canard Dara TwentyTwenty

Themes where it did show up: TwentyTwenty-Four

Case: 8539373-zen

Latest status

• Canard and Dara have been fixed
• Twenty-Twenty has not been fixed, there's an upstream discussion on whether to change the theme or change GB.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8539373-zen
• [ ] 8639478-zen

[mrfoxtalbot]

I can replicate this on Twenty Twenty and Canard

Notably, the Separator block (dots) does not show in the editor either.

Turns out I can replicate this in core but only with Twenty Twenty (I opened a track issue for it here https://core.trac.wordpress.org/ticket/61787)

If I tested other themes (Canard and Dara) and the Separator (dots) block DOES show on those themes in self-hosted:

[dsas]

I can reproduce in dara when self-hosted, in both the editor and the front-end. I've opened https://github.com/Automattic/themes/pull/7979 to address it.

[dsas]

Same for Canard, I've opened https://github.com/Automattic/themes/pull/7980 to address

[mrfoxtalbot]

I see this has been fixed. Thank you!

[dsas]

@mrfoxtalbot that's the normal separator not the dotted separator. The dotted separator still looks broken to me, and checking the upstream bug there's been no shift for a while.

Editor	Site

[mrfoxtalbot]

You're right @dsas, sorry. I got thrown off when I noticed that https://github.com/Automattic/themes/pull/7980 had been merged. Thank you for reopening the issue.

[miksansegundo]

A workaround is adding the following Additional CSS:

.wp-block-separator.is-style-dots::before {
    color: currentColor;
    content: "···";
    font-family: serif;
    font-size: 1.5em;
    letter-spacing: 2em;
    padding-left: 2em;
}

Test site: https://testclassicatomicmiguel.wpcomstaging.com/separators-test/

[devNigel]

Another report: 8639478-zd-a8c

I shared the workaround with the user.