Separator Block - Default Style is Identical to Wide Style on some FSE themes

[masperber]

Quick summary

The Seperator Block has 3 supported styles: Default (narrow line), Wide (wide line), and Dotted (dotted line)

On some (perhaps all) FSE themes, the Default style is identical to the Wide style.

Steps to reproduce

1. Start a site with an FSE theme. (I have verified this on Twenty Twenty Three and Bitácora.)
2. Add a Separator Block in any location.
3. Observe that the Default style is identical to the Wide style.

What you expected to happen

The Default style should be narrower than the Wide style. (I have verified this works properly on the Hever theme.)

What actually happened

The Default style is identical to the Wide style.

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

No response

Logs or notes

Identified workaround:

This CSS snippet should change the width of default style Separator, but verify that the

---

has the .is-style-default class before applying it:

.wp-block-separator.is-style-default {
	width: 50vw;
}

[masperber]

Initial customer report: 6286176-zen

[github-actions]

Support References

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

• 6286176-zen

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated on themes Blank Canvas and Twenty Twenty-Three on both WordPress.com and self-hosted sites.
• Theme Twenty Twenty-Two does not show the same issue.

Screenshots/Recordings

Editor, Self-Hosted Site

Live Site, Self-Hosted Site

Workaround

In order for this CSS to work, a user must select "Default" in the styles selection of the block, even though "Default" is selected by default. This adds the .is-style-default class to the element.

Further, the 50vw may not work, depending on the theme, but the units can be updated as needed in that case.

📌 ACTIONS

• Assigned to Apex apologies- starting with Non-Urgent for now
• Added to ‘HE Cross-repo Watchlist’ project board
• Reported in Core: [Block] Separator - Default and Wide styles look the same in many FSE themes WordPress/gutenberg#50674

[sophiegyo]

I noticed this on Wooni as well, which is, well, a P2 (and therefore not FSE).