Make WordPress Core

Opened 5 years ago

Last modified 3 years ago

#48787 accepted defect (bug)

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

Reported by: afercia's profile afercia Owned by: sabernhardt's profile sabernhardt
Milestone: Future Release 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 5 years ago.
Switching setting on WordPress 5.3
5-2.gif (86.5 KB) - added by afercia 5 years ago.
Switching setting on WordPress 5.2
48787.patch (1.0 KB) - added by sabernhardt 4 years ago.
classic-editor-views-before-patch-2021.webm (654.5 KB) - added by sabernhardt 3 years ago.
without the patch, the shadow appears temporarily with full-height editor enabled
classic-editor-full-height.png (23.6 KB) - added by sabernhardt 3 years ago.
with patch: full-height editor enabled
classic-editor-without-full-height.png (23.3 KB) - added by sabernhardt 3 years ago.
with patch: full-height editor is not enabled, borders are the same

Download all attachments as: .zip

Change History (20)

@afercia
5 years ago

Switching setting on WordPress 5.3

@afercia
5 years ago

Switching setting on WordPress 5.2

#1 @noisysocks
4 years ago

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

#2 @noisysocks
4 years ago

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

@sabernhardt
4 years ago

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

#4 @sabernhardt
4 years ago

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

@sabernhardt
3 years ago

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

@sabernhardt
3 years ago

with patch: full-height editor enabled

@sabernhardt
3 years 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.


3 years ago

#6 @sabernhardt
3 years ago

  • Keywords needs-testing added

#7 @sabernhardt
3 years ago

  • Milestone changed from 5.8 to Future Release

#8 @sabernhardt
3 years ago

  • Milestone changed from Future Release to 5.9

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


3 years ago

#10 @mai21
3 years ago

Test Report

Env

  • WordPress (5.9-alpha-51877) (Can reproduce it but can't see the fix with the changes in the patch)
  • Chrome Version 94.0.4606.54 (Official Build) (64-bit)
  • Ubuntu 18.04.6 LTS
  • Theme: Twenty Twenty One or Twenty Twenty
  • Classic editor: Version 1.6.2
  • Plugin: WordPress Beta Tester

Steps to test

  1. Add new page
  2. Click on screen options
  3. Check/uncheck Enable full-height editor and distraction-free functionality.

Actual

Borders are changed

Expected

Borders not change while enable/disable the option

Question

Why do we have P at the bottom of text area? (when we disable Enable full-height editor and distraction-free functionality.)

Screencast example:

https://jmp.sh/kZqQor5

This ticket was mentioned in Slack in #core by chaion07. View the logs.


3 years ago

#12 @sabernhardt
3 years ago

Could you try testing the patch again? The CSS may have been cached and/or not compiled properly. If you look at the borders before applying the patch, they should become darker with the patch's styles, whether the full-height editor is enabled or not.

The P in the element path notes that the cursor is inside a (default) paragraph element. Similarly, selecting an unlinked image with a caption would show DIV » DL » DT » IMG. And when clicking the full-height editor checkbox, focus moves inside the editor area and it activates the element path.

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


3 years ago

#14 @sabernhardt
3 years ago

  • Milestone changed from 5.9 to Future Release

Very little time remains for adding bug fixes to the 5.9 release. If a committer would like to include this in Beta 1 (or another release), feel free to adjust the milestone.

Note: See TracTickets for help on using tickets.