Twenty Nineteen: fix Separator block's full-width size and placement

[nidhidhandhukiya]

Steps to Reproduce the issue :-

1. Activate Twenty Nineteen Theme.
2. Take Separator Block.
3. Choose Default from the styles.
4. Choose Full-width.

You can able to see two issues.
1> In editor side the separator is not visible.
2> Both side editor and front end even after applying full-width it is not showing in full width.

I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/4ybJ9CQsCPR33NW1DPLm

[sabernhardt]

The Separator block needs to remain 2.25rem for the Default style when it has no alignment, center or Wide width.

The Full width alignment probably could span the full page width in both the Default and Wide Line styles, overiding the max-width in sass/blocks/_blocks.scss.

	.wp-block-separator.alignfull {
		max-width: none;
	}

In style-editor.scss, the width could be 100% for Default and Wide Line styles:

.wp-block[data-align="full"] .wp-block-separator:not(.is-style-dots) {
	width: 100%;
}

To fix the missing margin in the iframe editor, the editor styles need to add a selector such as block-editor-iframe__body (it was already adjusted in [48602] and [52925]).

		&.block-editor-iframe__body,
		&.block-editor-writing-flow,
		.block-editor-writing-flow {
			max-width: 80%;
			margin: 0 10%;
		}

[karmatosed]

I agree with the approach by @sabernhardt: keep the short default separator, but let it span the page when Full width is selected. Could the patch be updated to cover both Default and Wide Line styles, along with the editor margin fix?

Fixes the Twenty Nineteen Separator block so that Full width alignment actually spans the full page width, for both the Default and Wide Line styles. Currently the block's own max-width/width rules ignore the alignfull alignment entirely, so choosing Full width has no visible effect on the frontend and the separator is barely visible in the block editor.

Frontend (sass/blocks/_blocks.scss): the Separator block's own max-width: 2.25em (Default) and the is-style-wide bounded max-width were never overridden when .alignfull was applied. Added &.alignfull:not(.is-style-dots) { max-width: none; } so a full-width Default or Wide Line separator now spans edge-to-edge, matching the rest of the theme's full-width block handling. The Dots style is intentionally excluded, since it already renders at a deliberately bounded width.

Editor (style-editor.scss): the editor styles only set an explicit width for the narrow Default style ($font__size-xl); nothing widened the separator when it carried the alignfull class, which is why it appeared barely visible in the editor. Added &.alignfull:not(.is-style-dots) { width: 100%; }, placed after the narrow-width rule so it takes precedence when both classes are present.

Note: the ticket's original 2022 patch also suggested adding a block-editor-iframe__body selector to fix a missing editor margin; that generic fix already landed separately (visible at style-editor.scss:39) and covers this case, so no further change was needed there.

Both compiled style.css and style-editor.css were updated by hand to match, since this environment's Node toolchain couldn't rebuild the theme's SCSS via node-sass (native build failure unrelated to this change); the added rules were hand-verified against the existing compiled output's formatting conventions.

Manual verification: activated Twenty Nineteen locally and tested all four combinations directly in the running site (frontend + block editor, via computed styles and screenshots):

• Default style + Full width → now spans full width (was capped at 2.25em)
• Wide Line style + Full width → now spans full width (was capped at the content max-width)
• Default style, no alignment → unchanged (still 2.25em), confirming no regression
• Dots style + Full width → unchanged (still bounded by content max-width), confirming it was correctly left out of scope

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Implementation and manual browser verification. Reviewed by Igor Rozum.