Make WordPress Core

Opened 19 months ago

Last modified 19 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:


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:


This is especially problematic on smaller screens:


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:



Attachments (2)

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

Download all attachments as: .zip

Change History (3)

19 months ago

#1 @kjellr
19 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:





Note: See TracTickets for help on using tickets.