Make WordPress Core

#55910 closed defect (bug) (fixed)

Twenty Twenty: Separator Block backslash issue in editor

Reported by: kmadhak's profile kmadhak Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch commit
Focuses: ui, css Cc:

Description

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.

Attachments (13)

55910.mp4 (6.6 MB) - added by kmadhak 18 months ago.
For better understanding I have attached a video
separator-block-default-2020.png (40.6 KB) - added by sabernhardt 18 months ago.
separator block, selected and unselected
55910.diff (1.2 KB) - added by sabernhardt 18 months ago.
55190.1.patch (1018 bytes) - added by nidhidhandhukiya 18 months ago.
55910.1.patch (1018 bytes) - added by nidhidhandhukiya 18 months ago.
#55910.patch (439 bytes) - added by kajalgohel 18 months ago.
#55910.2.patch (894 bytes) - added by kajalgohel 18 months ago.
patch added for RTL stylesheet too.
55910.3.patch (1.3 KB) - added by sabernhardt 15 months ago.
PR 2781, adding a semicolon
55910.4.patch (1.3 KB) - added by sabernhardt 15 months ago.
canceling border-radius as well
2020-separator-LTR-before.png (43.6 KB) - added by sabernhardt 15 months ago.
Separator blocks before patch, in English
2020-separator-LTR-with-patch.png (42.9 KB) - added by sabernhardt 15 months ago.
Separator blocks with patch, in English
2020-separator-RTL-before.png (43.1 KB) - added by sabernhardt 15 months ago.
Separator blocks before patch, in Arabic
2020-separator-RTL-with-patch.png (42.4 KB) - added by sabernhardt 15 months ago.
Separator blocks with patch, in Arabic

Change History (33)

@kmadhak
18 months ago

For better understanding I have attached a video

@sabernhardt
18 months ago

separator block, selected and unselected

#1 @SergeyBiryukov
18 months ago

  • Summary changed from Twenty Twenty Theme:- Separator Block backslash issue in editor to Twenty Twenty: Separator Block backslash issue in editor

@sabernhardt
18 months ago

#2 @sabernhardt
18 months ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.1
  • Version changed from 6.0 to 5.6

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

Last edited 18 months ago by sabernhardt (previous) (diff)

#4 @mukesh27
18 months ago

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

#5 @sabernhardt
18 months ago

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.

#6 @nidhidhandhukiya
18 months ago

#55933 was marked as a duplicate.

#7 @mukesh27
18 months ago

#55932 was marked as a duplicate.

@kajalgohel
18 months ago

#8 @kajalgohel
18 months ago

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

#9 @sabernhardt
18 months ago

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

Last edited 15 months ago by sabernhardt (previous) (diff)

@kajalgohel
18 months ago

patch added for RTL stylesheet too.

@sabernhardt
15 months ago

PR 2781, adding a semicolon

@sabernhardt
15 months ago

canceling border-radius as well

@sabernhardt
15 months ago

Separator blocks before patch, in English

@sabernhardt
15 months ago

Separator blocks with patch, in English

@sabernhardt
15 months ago

Separator blocks before patch, in Arabic

@sabernhardt
15 months ago

Separator blocks with patch, in Arabic

#10 @sabernhardt
15 months ago

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.

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


14 months ago

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


14 months ago

#13 @chaion07
14 months ago

  • Keywords dev-feedback needs-testing added

@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

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


14 months ago

#15 @audrasjb
14 months ago

  • Milestone changed from 6.1 to 6.2

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.

Last edited 14 months ago by audrasjb (previous) (diff)

#16 @sabernhardt
14 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

#17 @audrasjb
14 months ago

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

#18 @sabernhardt
14 months ago

  • Keywords commit added; dev-feedback needs-testing removed
  • Milestone changed from 6.2 to 6.1

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

#19 @audrasjb
14 months ago

  • Status changed from reviewing to accepted

Alright! Thanks for confirming 🙏

#20 @audrasjb
14 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.