WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 6 months ago

#50086 new defect (bug)

Twenty Fifteen: Correct extra border around the editor in Gutenberg 7.8.1 and above.

Reported by: kjellr Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

If using the Gutenberg plugin, version 7.8.1 and above, some older themes will show a gray border around the editor. That border is the remnant of some legacy margin styles added by the theme, and intended originally for the TinyMCE editor. Previously, these margins were not visible, however recent versions of the editor have adopted a gray background behind the editor's wrapper in order to house responsive previews.

More details are available in this GitHub ticket:
https://github.com/WordPress/gutenberg/issues/21535

http://cldup.com/EzyMcNyy9D.png

This is especially problematic on smaller screens:

http://cldup.com/RHGmLSCgm9.png


The easiest way to fix this per theme is to increase specificity of those margin rules so that they only appear when using TinyMCE. The patch attached here is a first pass at that for Twenty Fifteen. If we're okay with this approach (and are not going to be fixing this within Gutenberg itself), I can start doing this for other default themes that are effected by this issue.

With the attached patch applied, the classic editor view should appear the same, while the editor view will appear with no additional margins:

http://cldup.com/2n_ML6fNLd.png

http://cldup.com/xNTlt4-MuA.png

Attachments (2)

50086.diff (526 bytes) - added by kjellr 6 months ago.
5086-alternate.diff (438 bytes) - added by kjellr 6 months ago.

Download all attachments as: .zip

Change History (3)

@kjellr
6 months ago

#1 @kjellr
6 months ago

Alternate Solution:

Rather than wrap the margin in its own tag, we could also just remove the margin entirely, as seen in 5086-alternate.diff . This is cleaner and seems relatively harmless too:

Before:

http://cldup.com/h5pr2GztXr.png

After:

http://cldup.com/Qmgf3Tc7Wq.png

Note: See TracTickets for help on using tickets.