WordPress.org

Make WordPress Core

Opened 22 months ago

Last modified 4 days ago

#48787 accepted defect (bug)

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

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

Description

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 (6)

5-3.gif (113.7 KB) - added by afercia 22 months ago.
Switching setting on WordPress 5.3
5-2.gif (86.5 KB) - added by afercia 22 months ago.
Switching setting on WordPress 5.2
48787.patch (1.0 KB) - added by sabernhardt 7 months ago.
classic-editor-views-before-patch-2021.webm (654.5 KB) - added by sabernhardt 4 months ago.
without the patch, the shadow appears temporarily with full-height editor enabled
classic-editor-full-height.png (23.6 KB) - added by sabernhardt 4 months ago.
with patch: full-height editor enabled
classic-editor-without-full-height.png (23.3 KB) - added by sabernhardt 4 months ago.
with patch: full-height editor is not enabled, borders are the same

Download all attachments as: .zip

Change History (14)

@afercia
22 months ago

Switching setting on WordPress 5.3

@afercia
22 months ago

Switching setting on WordPress 5.2

#1 @noisysocks
11 months ago

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

#2 @noisysocks
10 months ago

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

@sabernhardt
7 months ago

#3 @sabernhardt
7 months 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 7 months ago by sabernhardt (previous) (diff)

#4 @sabernhardt
6 months ago

  • Milestone changed from Future Release to 5.8
  • Owner set to sabernhardt
  • Status changed from new to accepted

@sabernhardt
4 months ago

without the patch, the shadow appears temporarily with full-height editor enabled

@sabernhardt
4 months ago

with patch: full-height editor enabled

@sabernhardt
4 months ago

with patch: full-height editor is not enabled, borders are the same

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


4 months ago

#6 @sabernhardt
4 months ago

  • Keywords needs-testing added

#7 @sabernhardt
4 months ago

  • Milestone changed from 5.8 to Future Release

#8 @sabernhardt
4 days ago

  • Milestone changed from Future Release to 5.9
Note: See TracTickets for help on using tickets.