Make WordPress Core

Opened 5 years ago

Closed 2 years ago

Last modified 2 years ago

#50086 closed defect (bug) (invalid)

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

Reported by: kjellr's profile kjellr Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: css 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 5 years ago.
5086-alternate.diff (438 bytes) - added by kjellr 5 years ago.

Download all attachments as: .zip

Change History (6)

@kjellr
5 years ago

#1 @kjellr
5 years 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

#2 @sabernhardt
3 years ago

  • Focuses css added
  • Keywords close added

#52646 edited the margin, and this does not seem to be an issue anymore.

#3 @desrosj
2 years ago

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

Fixed by way of [55338].

#4 @desrosj
2 years ago

Sorry, I had the wrong changeset above. This was fixed by way of [50465].

Note: See TracTickets for help on using tickets.