Twenty Nineteen: Separator block does not center as expected

[nidhidhandhukiya]

Steps to reproduce the issue.

1. Activate Twenty Nineteen theme.
2. Take Separator block.
3. Choose WideLine option.
4. Applied Align-center

You can able to see both the side in editor and in the Front side that the Separator is not Center aligned.

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

Trac ticket: 59204

[aslamdoctor]

Patch added for this issue.

Screenshot: ​https://prnt.sc/EQ1kdzSXyQP9

[mukesh27]

Thank you, @aslamdoctor, for the PR. I have provided some feedback. Once the necessary changes have been made, it will be ready for commit from my side.

@sabernhardt, could you please take a look when you have a moment?

[aslamdoctor]

@mukesh27 I have pushed the required changes to the repo 👍

Thank you, @aslamdoctor, for the update. It seems that the commit at ​https://github.com/WordPress/wordpress-develop/pull/5097/commits/59f40197a8a180b178870312bee26ff3e10dd951 includes some unnecessary changes. Could you please remove them?

Thank you, @aslamdoctor, for the update. It seems that the commit at ​59f4019 includes some unnecessary changes. Could you please remove them?

Thanks for the heads-up. I have reverted those unnecessary changes.

[iamfarhan09]

Hello,

I've tested PR #5097, and I can ensure that it resolves the alignment issue with the Separator block in the Twenty Nineteen theme. It's working perfectly as expected.

Thanks for the fix!

[sabernhardt]

WordPress 6.3: several Separator blocks and horizontal rules, plus a Columns block to show the width of the post content area

[sabernhardt]

PR 5097 centers all horizontal rules, whether in a Separator block or a Classic block, according to the full width of the page instead of the post content area

[sabernhardt]

PR 5097 changes placement for some blocks/elements that already are aligned properly. If you want a Separator block to center according to the entire page, the "Wide width" alignment option would do that.

With the Wide Line style option, the Separator covers the full width of post content, so "Align center" correctly matches the "No alignment" setting. The Dots style option is also correct for center and Wide width alignments.

The Default style has issues with the center alignment, though, and the stylesheet probably should target only that style option.

	// Separator block: honor center alignment for the Default style.
	.wp-block-separator.aligncenter:not(.is-style-wide):not(.is-style-dots) {
		margin-left: auto;
		margin-right: auto;

		@include media(tablet) {
			// Subtract the Separator width from the post content width, then divide that by two.
			margin-left: calc((8 * (100vw / 12) - 28px - 2.25em) / 2);
		}

		@include media(desktop) {
			margin-left: calc((6 * (100vw / 12) - 28px - 2.25em) / 2);
		}
	}

The editor styles may only need the auto margins for Center and Wide width alignment options, but a max-width could make it more accurate on larger screens.

.wp-block[data-align="center"] .wp-block-separator,
.wp-block[data-align="wide"] .wp-block-separator {
	margin-left: auto;
	margin-right: auto;
}

.wp-block[data-align="wide"] .wp-block-separator {

	@include media(tablet) {
		max-width: calc(8 * (100vw / 12));
	}

	@include media(desktop) {
		max-width: calc(6 * (100vw / 12 ));
	}
}

When compiling the stylesheets, check the CSS files to make sure the changes were made to all of them. You may need to use the run build command more than once before style-rtl.css updates.

The editor has additional problems in RTL languages because Twenty Nineteen does not have an alternative editor stylesheet, but those problems are not exclusive to the Separator block.

#59203 can fix the Full width Separator issues, unless combining these tickets would be better.

[oglekler]

There is no need for testing as changes are required. Do we need to add RTL focus?

[sabernhardt]

Fixing the editor's RTL issues, for this block and others, would be a larger task for another ticket. However, it would still be good to test in a right-to-left language. Setting side margins to auto could make it worse if the selector is not specific enough for the margin to apply to both sides (.wp-block[data-align="center"] .wp-block-separator is not enough for that).