add width control to separator block

[senadir]

Description

follow up to #16784
tackles a point from #16483

this PR adds width control to separator block

How has this been tested?

create separator components in master
switch to this branch
see if no problems happens

Screenshots

Problems

• themes using max-width on the hr will have to stop in order for those changes to be visible
• in renders full-width useless since that style currently doesn't relay on anything to have it 100%

Changes

• introduce a new starting width of 25% instead of the 100px.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[senadir]

this PR had alignment support ready but it was removed in the last moment because of clearfix problems, alignment relayed on floating the hr, but using float seems to cause clearing problems, if anyone have any experience with this, please tell me

[jorgefilipecosta]

Should we create a constant at the top of the file for the default width (25)?

[jorgefilipecosta]

Range control has a initialPosition property https://github.com/WordPress/gutenberg//blob/1e40b281d1db725e512e383b5e00f3b59e333d5a/packages/components/src/range-control/README.md. when the value is unset the property allows the range to be in a give position e.g: 25, but the input is empty to allow the user to differentiate between the state the user set the width to 25 (inline style added) the user did not set any width but currently the default is 25 (no inline style is added).
Would it make sense to use this mechanism here?

[jasmussen]

Similar to feedback in #16928 (comment), I wonder if this should be added to the Separator block, or be reserved for the Divider block (and similar to my comment there, this PR is equally impressive 💥).

This is more in a gray territory though, because the feature definitely applies to the Separator block globally. I'll leave the "needs design feedback" label on, to gather some more thoughts.

[kjellr]

This is more in a gray territory though, because the feature definitely applies to the Separator block globally. I'll leave the "needs design feedback" label on, to gather some more thoughts.

A hesitancy I have around this one is whether it's actually likely to be used. This seems like the sort of thing that would more ideally be adjusted globally for a site, not individually for each separator block.

As noted in the description, it'll also require some theme patches in some cases. I'm not sure that's entirely worth if if users aren't likely to use this feature. (This may just be a bug, but) this appears to overwrite some defaults provided by theme — for example, the "wide" variant in Twenty Nineteen no longer takes over the full width by default:

[senadir]

@kjellr I completely understand that this might require some changes, it's mostly those themes might need to readjust around those new features (an !important for example might be required).
but as you said, I question the need for such deep customization and a site wide settings does seems more appropriate.
still waiting for feedback from @mtias to see if we should drop this feature or take it to another block

[shaunandrews]

What if we added a drag handle to manipulate the width right from the canvas — in addition to, or instead of, the Range control in the sidebar?

[senadir]

@shaunandrews that would be as easy as wrapping the block in a ResizableBox I might do it tomorrow, but I will hold on to see if we should move to a divider or not

[jasmussen]

Probably addition to, as we'll always want to have a purely keyboard accessible interface for anything we do.

[BinaryMoon]

I'm not convinced this is a good thing. I can't imagine many people wanting or needing fine grained control over the width of a hr, and having this would open up the likelihood of there being inconsistent separator widths across the site.

Having a global width setting that gets applied consistently across the site makes more sense to me.

[mapk]

I think we should hold off on this feature as an individual block setting. I'd agree that this feels much more inline with a global setting instead.

[senadir]

@mapk does it make sense to converge it to a shape divider block or just mark this with stale?

[mapk]

@senadir, I'm not sure I see a user for it on a Shape Divider block. Do you have some thoughts on that? I'm okay setting this to "stale" for now.

[senadir]

@mapk I have no strong feeling toward this PR and it sister #16928 so we might as well close them to reduce the mental weight? I will circle back to them in the future when we have a solid foundation for global settings.
meanwhile, I'm still on the fence about the shape divider block, how should we go about it