Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#45877 closed defect (bug) (invalid)

Twenty Nineteen: Alignwide in editor causes horizontal scroll

Reported by: kjellr's profile kjellr Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.0.2
Component: Bundled Theme Keywords: needs-testing reporter-feedback
Focuses: Cc:

Description

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

Change History (3)

#1 @laurelfulford
6 years ago

  • Keywords reporter-feedback added

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!

#2 @wpweaver
6 years ago

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.

#3 @laurelfulford
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

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 your helping test the theme, and I'm always glad to close a ticket :)

Last edited 6 years ago by laurelfulford (previous) (diff)
Note: See TracTickets for help on using tickets.