[Block] Separator - Default and Wide styles look the same in many FSE themes

[cuemarie]

Description

he Seperator Block has 3 supported styles: Default (narrow line), Wide Line (full width), and Dots (dotted line). On many FSE themes, including Twenty Twenty Three and Blank Canvas, the Default style is identical to the Wide Line style.

Step-by-step reproduction instructions

1. Activate theme Twenty Twenty Three
2. In a page or post, add a Separator block
3. Switch between "Default" and "Wide Line" styles, observe that there's no difference

Screenshots, screen recording, code snippet

Editor

Live Site

Environment info

• WordPress 6.2
• Gutenberg 15.7.1
• Theme used in testing: Twenty Twenty Three Version: 1.1
• Originally reported here: Separator Block - Default Style is Identical to Wide Style on some FSE themes Automattic/wp-calypso#76903

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

This is intentional.
The 100px width limitation for the default variation is only applied if the theme adds theme support for add_theme_support( 'wp-block-styles' )
So each theme can opt-in to using a narrow design for the default, or, they can choose not to.

This width limitation was imposed early on, and made it difficult to style the block and stopped the block alignment options (wide, full width) from working.

---

In many cases, the best option for new block themes is to remove several of the older style variations, because they don't work very well anymore.

[Sisanu]

This is intentional.

This intentional feature does not play nicely with the block alignment. If the block is wide-aligned, the block width should not be overridden with 100px. The 100px overrides the size also when the block is full-aligned.

What am I missing?

For example, this is the expected behavior (which now we do not have anymore because of the 100px override):

Additionally:

The 100px width limitation for the default variation is only applied if the theme adds theme support for add_theme_support( 'wp-block-styles' ) So each theme can opt-in to using a narrow design for the default, or, they can choose not to.

To me, it looks like the condition is not enough, we do want to use styles for many other blocks, not just for the core/separator.

[carolinan]

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

Should probably be something like

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

[Sisanu]

Shorter version maybe?

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

I will test some more on my end to see if this fixes the alignment.

[Sisanu]

I tested some more and there are some styles refactoring in the master branch for this block, the .is-style-wide has been removed.
However, based on the new options, I changed the styles to make the block span as intended, following the rule that instances without wide or full alignment (following the logic, I would incline to think that also .aligncenter to be excluded ?!):

stay restricted to 100px.

The front-end result is as intended:

But, in the process, I discovered that the editor is not picking up the align class, and that should also be fixed

---

So, if we are to fix this following the logic that only the instances not aligned to stick to 100px, this is the code that would work:

And the result:

• default
• dots
• thick
• center-aligned
• wide-aligned
• full-aligned

Should I assign the task to me and create a PR or does anyone else want it?