[wp-trac] [WordPress Trac] #55910: Twenty Twenty: Separator Block backslash issue in editor

[WordPress Trac]

#55910: Twenty Twenty: Separator Block backslash issue in editor
---------------------------+----------------------
 Reporter:  kmadhak        |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  6.1
Component:  Bundled Theme  |     Version:  5.6
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  ui, css
---------------------------+----------------------
Changes (by sabernhardt):

 * keywords:  needs-patch => has-patch
 * version:  6.0 => 5.6
 * milestone:  Awaiting Review => 6.1


Comment:

 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 (I need to report that on GitHub).

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55910#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform