Twenty Nineteen: Alignwide in editor causes horizontal scroll

[kjellr]

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

[laurelfulford]

Thanks for moving this over, @kjellr!

I'm also unable to recreate this issue. When I add a full-width image block to the editor, I don't see the horizontal scrollbar -- I tested with the following browsers:

• Chrome (v71, OSX 10.14 & Windows 10)
• Firefox (v65, OSX 10.14 and Windows 10)
• Safari (v12, OSX 10.14)
• Edge 18, 17, 15 (Windows 10)
• IE 11 (Windows 10 & Windows 8.1)

It might be happening in a browser I've missed, or under slightly different conditions. Or perhaps it was fixed by another change in the theme.

@wpweaver (hopefully I have your WP.org username correct!) -- can you please confirm if you're still seeing this issue? If yes, in what browser? Was there anything specific about the full-width image block you're seeing it with (like does it have a caption?).

Thanks!

[wpweaver]

Thanks for the follow up.

I'd tested this on several browsers, but on the same testing site.

I tried to duplicate on a different site, and don't see the issue any more.

Went back to my original test site, where the issue was still there. So I deactivated a bunch of plugins, and the problem went away. Unfortunately, I didn't do a one at a time plugin deactivate, and now can't get the problem back by reactivating them. I had several Gutenberg / Block Editor plugins with new blocks activated, so I suspect one of them was causing the issue. Sorry about that. If I find the plugin that causes the issue, I'll contact that plugin developer. But it does not seem to be a 2019 issue.

Sorry for the extra effort I caused. I has also checked for the issue with other Block Editor compatible themes, and did not see the issue with them, so there must have been some specific interaction with one of the new blocks plugins that specifically interacted with 2019.

[laurelfulford]

Thank for following up on this, @wpweaver! I really appreciate you double-checking this so carefully.

Sorry for the extra effort I caused.

No worries! Visual problems like this can be hard to zero in on, when so many different factors can be involved. I appreciate you helping test the theme, and I'm always glad to close a ticket :)