Make WordPress Core

Opened 16 months ago

Last modified 3 weeks ago

#48787 new defect (bug)

Classic Editor user interface CSS inconsistencies when toggling "Enable full-height editor ..."

Reported by: afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-screenshots 5-3-admin-css-changes has-patch
Focuses: ui, css Cc:


Splitting this out from #47477 after @johnjamesjacoby's feedback.

When toggling the "Enable full-height editor and distraction-free functionality" setting, it appears the Classic Editor toolbar gets some CSS rules that make it look inconsistent depending on the state of the setting.

Part of these inconsistencies are new in WordPress 5.3, while other inconsistencies can be reproduced on WordPress 5.2 thus are pre-existing to the recent CSS changes.

Please refer to the attached animated GIFs below for better clarity.

  • #48101 changed the border color of various "boxes" in the admin from #e5e5e5 to #ccd0d4. In the Classic Editor, seems that the new color applies only to the toolbar top border and only when "Enable full-height ..." is on.
  • The other toolbar borders and the bottom padding change when toggling the setting also on WordPress 5.2. Not sure this is intentional or if there's a good reason to have a different styling. I'd tend to think these are probably inconsistencies happened over time that should be fixed.

Worth noting the Classic Editor will still be supported for a couple years but it's not meant to get new functionalities or improvements. Only bug fixes will be addressed. Personally, I'd be in favour of fixing these inconsistencies because they don't appear to be terribly complicated and the fix won't likely break anything. I'd also suggest to use the new border color #ccd0d4 for better contrast.

Attachments (3)

5-3.gif (113.7 KB) - added by afercia 16 months ago.
Switching setting on WordPress 5.3
5-2.gif (86.5 KB) - added by afercia 16 months ago.
Switching setting on WordPress 5.2
48787.patch (1.0 KB) - added by sabernhardt 3 weeks ago.

Download all attachments as: .zip

Change History (6)

16 months ago

Switching setting on WordPress 5.3

16 months ago

Switching setting on WordPress 5.2

#1 @noisysocks
4 months ago

  • Focuses css added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

#2 @noisysocks
3 months ago

Confirmed in 5.6. Toggling the checkbox changes the editor's outline colour.

3 weeks ago

#3 @sabernhardt
3 weeks ago

  • Keywords has-patch added; needs-patch removed

In 5.7 (beta 3), the full-height editor box-shadow is more annoying. The shadow can appear as the page is loading and then go away.

So 48787.patch removes that shadow and changes the border colors to #c3c4c7, to match the metabox borders.

Last edited 3 weeks ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.