[wp-trac] [WordPress Trac] #45877: Twenty Nineteen: Alignwide in editor causes horizontal scroll

[WordPress Trac]

#45877: Twenty Nineteen: Alignwide in editor causes horizontal scroll
---------------------------+-----------------------------
 Reporter:  kjellr         |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  5.0.2
 Severity:  normal         |   Keywords:  needs-testing
  Focuses:                 |
---------------------------+-----------------------------
 As reported by `weavertheme` over on the Twenty Nineteen GitHub
 repository. I'm personally unable to reproduce, but I wanted to port this
 over just in case others can see the issue.

 Here's the original ticket:
 https://github.com/WordPress/twentynineteen/issues/748

 ---

 This may be a Gutenberg bug, or it may be the way twentynineteen styles
 alignfull in the editor.

 Essentially, the issues is the presence of the horizontal scroll bar on
 the bottom of the editor whenever an alignfull block is present. It is
 easiest to see this on alignfull images. Just add an image block, and set
 it to alignfull.

 Depending on the actual screen width, the scroll bar will have more or
 less of a scroll area, but it seems to be there even on a very wide screen
 without the tool bar on the right.

 It is caused by the rule:

 {{{
 body .wp-block[data-align="full"] {
    position: relative;
    left: calc( -12.5% - 14px);
    width: calc( 125% + 116px);
    max-width: calc( 125% + 115px);
  }
 }}}


 I think it might be the way the block editor processes .wp-block, but that
 is the documented way to set the editor content width.

 I guess this technically is not a bug, exactly, but it does seem to me
 that an alignfull image should not cause the scroll bar, or have the
 rightmost part of the image (along with the upper right corner block label
 disappear) cut off. There must be a way to style this so that the right
 side of the alignfull block stays visible without a horizontal scroll.

 (And I can't find a solution for .wp-block[data-align="full"] yet, either.
 I'm using


 {{{
 body .wp-block[data-align="full"] {
   max-width: none;
   overflow:     hidden;
   padding-right:        50px;
 }
 }}}


 which seems a bit better (at least the horizontal scroll bar goes away on
 a very wide screen), but is not the right solution.)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/45877>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform