Make WordPress Core

Opened 5 weeks ago

Last modified 30 hours ago

#59204 new defect (bug)

Twenty Nineteen: Separator block does not center as expected

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: 6.4 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch changes-requested
Focuses: Cc:

Description

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

Attachments (2)

WP6.3-separator-blocks-front.png (143.2 KB) - added by sabernhardt 4 weeks ago.
WordPress 6.3: several Separator blocks and horizontal rules, plus a Columns block to show the width of the post content area
PR5097-front.png (142.6 KB) - added by sabernhardt 4 weeks ago.
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

Download all attachments as: .zip

Change History (16)

#1 @shailu25
5 weeks ago

  • Keywords needs-patch added

This ticket was mentioned in PR #5097 on WordPress/wordpress-develop by @aslamdoctor.


5 weeks ago
#2

  • Keywords has-patch added; needs-patch removed

Trac ticket: 59204

#3 @aslamdoctor
5 weeks ago

Patch added for this issue.

Screenshot: https://prnt.sc/EQ1kdzSXyQP9

This ticket was mentioned in Slack in #core by aslamdoctor. View the logs.


5 weeks ago

#5 @swissspidy
5 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.4

#6 @mukesh27
4 weeks ago

  • Keywords changes-requested added
  • Version 6.3 deleted

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.

@mukesh27 commented on PR #5097:


4 weeks ago
#7

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

#8 @aslamdoctor
4 weeks ago

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

@mukesh27 commented on PR #5097:


4 weeks ago
#9

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?

@aslamdoctor commented on PR #5097:


4 weeks ago
#10

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.

#11 @iamfarhan09
4 weeks ago

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
4 weeks ago

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

@sabernhardt
4 weeks ago

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

#12 @sabernhardt
4 weeks ago

  • Summary changed from Twenty Nineteen - Separator block is having issue when wide-line is used with Align-Center. to Twenty Nineteen: Separator block does not center as expected

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.

#13 @oglekler
37 hours ago

  • Keywords needs-testing removed

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

#14 @sabernhardt
30 hours ago

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).

Note: See TracTickets for help on using tickets.