[wp-trac] [WordPress Trac] #60079: Twenty Fifteen: Separator block is too thick in the iframe editor (was: Twenty Fifteen theme separator block is having visual difference in editor and front end.)

[WordPress Trac]

#60079: Twenty Fifteen: Separator block is too thick in the iframe editor
-----------------------------------+------------------------------
 Reporter:  nidhidhandhukiya       |       Owner:  (none)
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  Awaiting Review
Component:  Bundled Theme          |     Version:  6.3
 Severity:  normal                 |  Resolution:
 Keywords:  has-patch 2nd-opinion  |     Focuses:  css
-----------------------------------+------------------------------
Changes (by sabernhardt):

 * keywords:   => has-patch 2nd-opinion
 * focuses:   => css
 * version:  6.4.2 => 6.3


Comment:

 The problem is in the iframe editor, not the front end. Separator blocks
 (and other `hr` elements) are intended to be thin in this theme.

 Without the iframe, the editor added `.editor-styles-wrapper` to `hr` for
 styles from the [https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentyfifteen/css/editor-style.css?rev=54109#L220 Classic
 editor stylesheet], which would override the
 [https://github.com/WordPress/gutenberg/blob/2ec7f37cae48f8ac4ce9776b3a822213160fffe3/packages
 /block-library/src/separator/theme.scss#L6 block's opt-in styles]. Now the
 discrepancy between `blocks.css` and `editor-blocks.css` since [43798] can
 result in the 2-pixel bottom border (the original
 [https://core.trac.wordpress.org/browser/branches/5.0/src/wp-
 content/themes/twentyfifteen/css/blocks.css?rev=43798#L433 blocks]
 stylesheet set `border: 0` but
 [https://core.trac.wordpress.org/browser/branches/5.0/src/wp-
 content/themes/twentyfifteen/css/editor-blocks.css?rev=43798#L759 editor-
 blocks] did not).

 On the other hand, the light color makes the separator almost
 imperceptible in the editor because the iframe pulls in `wp-
 admin/css/common.css` with its off-white background color on `body`. The
 mismatch does not bother //me// much when the extra-thick line is slightly
 easier to see and to click.

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