Twenty Twenty: Separator Block backslash issue in editor

[kmadhak]

In a Twenty Twenty Theme when we add a separator block in editor with default styles option, we can view that there is only single backslash in middle of a block and the second backslash is at the beginning of a block. But when we view the separator block at frontend side, both the backslashes are together in middle of the block.

Steps to replicate:
1: Activate the Twenty Twenty Themes
2: Add Separator block
3: Choose Default Styles Option
4: Save Page/Post
5: View the page/post at front side.

for more information I provide video attachment.

Thank you.

[kmadhak]

For better understanding I have attached a video

[sabernhardt]

separator block, selected and unselected

[sabernhardt]

Thanks for opening a ticket! I was looking at this yesterday.

The two slanted lines are created by ::before and ::after pseudo-elements, and the editor overrides the left and right positioning of the ::after line:

.block-editor-block-list__layout .block-editor-block-list__block::after {
  left: 0;
  right: 0;
}

In the theme stylesheet, adding a class for a more specific selector and defining the opposite side as auto can fix the alignment when unselected:

.wp-block hr.wp-block-separator::after {
  right: calc(50% - 5px);
  left: auto;
}

The focus outline could be fixed by adding contenteditable="false" to the block instead of editing styles (reported on GB41543).

Trac ticket: https://core.trac.wordpress.org/ticket/55910

[mukesh27]

Patch 55910.diff​ is not working in block editor. For the block editor we have to use .editor-styles-wrapper parent selector instead of .wp-block

[sabernhardt]

Thanks! I forgot to check other alignment options (my block was set to Wide Width). Using .editor-styles-wrapper works with the four alignments: None, Center, Wide and Full.

[nidhidhandhukiya]

#55933 was marked as a duplicate.

[mukesh27]

#55932 was marked as a duplicate.

[kajalgohel]

hello @nidhidhandhukiya,

As we can see that your patch is working as the solution for this issue, but there is few code which is not needed for solving this issue.I have added a patch with the necessary code.

Thanks

[sabernhardt]

The patch needs the same to mirror these changes in the RTL stylesheet, which @mukesh27's PR 2781 has does.

[kajalgohel]

patch added for RTL stylesheet too.

[sabernhardt]

PR 2781, adding a semicolon

[sabernhardt]

canceling border-radius as well

[sabernhardt]

Separator blocks before patch, in English

[sabernhardt]

Separator blocks with patch, in English

[sabernhardt]

Separator blocks before patch, in Arabic

[sabernhardt]

Separator blocks with patch, in Arabic

[sabernhardt]

I made a mistake earlier: the changes would not be the same for both stylesheets, but a mirrored copy of those styles.

Because the border-radius on the ::after pseudo-element made that line a little lighter than the ::before, I set it to zero.

[chaion07]

@kmadhak thank you for reporting this. We reviewed this ticket during a recent bug-scrub session. Based on the feedback received we are making the following changes:

1. Adding keywords needs-testing & dev-feedback
2. Requesting review if possible.

Cheers!

Props to @cu121 @robinwpdeveloper

[audrasjb]

As per today's Core bug scrub:

Since this ticket is still being discussed, and still needs testing/dev-feedback and potential follow-up patches, let's move it to the next milestone.

[audrasjb]

@sabernhardt if you think this is good to go, feel free to move it back to milestone 6.1, I'd be happy to commit it.

[sabernhardt]

Yes, I checked it again and I think it's ready.

[audrasjb]

Alright! Thanks for confirming 🙏

[audrasjb]

In 54418:

Twenty Twenty: Improve Separator Block rendering.

This changeset fixes inconsistent alignment behavior of the Separator Block in the editor.

Props kmadhak, sabernhardt, mukesh27, nidhidhandhukiya, kajalgohel.
Fixes #55910.