Gutenberg: Separator Block: Add support for wide/full-width versions

[kjellr]

It would be interesting to add support for wide/full alignments to the separator block. This could allow folks to better align it to nearby content.

Current:

Example of a wide-width separator block:

[beafialho]

Or even something like this:

[salimserdar]

Hi @kjellr @beafialho, do you mind if I ask which theme you are using. Full or wide width support might be at the theme level. Whatever it is, I might send PR. Thank you.

[jordesign]

I've been playing around with this and have a PR - but the one thing I've run into that I'm not sure about.

Using the 'wide' style for HR is an option themes can use to make the separator full/wide width but is left up to the distinction of how the theme styles the is-style-wide class.

Adding the option to set an alignment potentially conflicts with this. Do we think that is a problem? Or is it up to the theme's discretion how to handle this?

Functional Example using TwentyTwenty:

• Using align options - it renders them at the widths expected.

• Switching all 3 Separator blocks to use the 'Wide' style overides the align value:

[kjellr]

Hi @kjellr @beafialho, do you mind if I ask which theme you are using. Full or wide width support might be at the theme level. Whatever it is, I might send PR. Thank you.

I took the screenshots with the Gutenberg Starter Theme. No theme currently implements full/wide control for the Separator block at the moment since it's not an option in Gutenberg.

Using the 'wide' style for HR is an option themes can use to make the separator full/wide width but is left up to the distinction of how the theme styles the is-style-wide class.

I think in the context of a change like this, the "wide" label for that block style is a little confusing. 😕

In general though, if a feature like this is added, it will ultimately be left up to themes to correctly implement in the front end. I did some light testing against your PR, and both Twenty Twenty and Twenty Nineteen will need some fixes to get it working right. This change would likely require a (brief) dev note to give folks a heads up.

[jordesign]

No theme currently implements full/wide control for the Separator block at the moment since it's not an option in Gutenberg.

In general though, if a feature like this is added, it will ultimately be left up to themes to correctly implement in the front end.

This change would likely require a (brief) dev note to give folks a heads up.

This makes sense. What would the process normally be for this?

I think in the context of a change like this, the "wide" label for that block style is a little confusing. 😕

Agreed - does that make this a bigger change in regard to thinking about the Style options as well?

[kjellr]

This makes sense. What would the process normally be for this?

There's a Needs Dev Note tag that we can add to the PR if/when it's merged, and then one of us would probably write up a short description of the change when it gets released.

I think in the context of a change like this, the "wide" label for that block style is a little confusing. 😕

Agreed - does that make this a bigger change in regard to thinking about the Style options as well?

Let's get some feedback from the rest of the design team about this part.

[paaljoachim]

I do think that most blocks should have alignment options that might be work a little different depending on which block it is used in. Using alignment for the separator block seems like a nice creative way of changing the size of the line. I have also added the issue to the Slack design channel to get additional feedback from other designers.

Of course another way would be to use a kind of slider with percentage/pixels/etc. Where the user can define the width (should also be height) of the line.

[nosolosw]

It looks like this was closed by https://github.com/WordPress/gutenberg/pull/25147