WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 5 weeks ago

#48715 new defect (bug)

Add New buttons on Posts/Pages/Media don't adhere to Admin Color Scheme

Reported by: garrett-eclipse Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots needs-design-feedback 2nd-opinion
Focuses: ui Cc:

Description

As @drw158 pointed out in Slack, and I've now confirmed on a clean install.

The Add New buttons found on the Posts/Media/Pages/Themes/Plugins/Users screens all fail to comply to the Admin Color Scheme as they don't utilize the .button class which is how the colour scheme is applied to other buttons.

All the best,
Cheers

Attachments (7)

Screen Shot 2019-11-18 at 2.36.47 PM.png (18.5 KB) - added by garrett-eclipse 5 months ago.
Unstyled Add New on Posts
Screen Shot 2019-11-18 at 2.36.59 PM.png (16.6 KB) - added by garrett-eclipse 5 months ago.
Unstyled Add New on Media
Screen Shot 2019-11-18 at 2.37.25 PM.png (19.9 KB) - added by garrett-eclipse 5 months ago.
Markup for the Add New buttons is missing .button class which is standardly how the Admin Colour Scheme styling gets applied.
48715.diff (851 bytes) - added by melchoyce 4 months ago.
48715-after.gif (141.5 KB) - added by melchoyce 4 months ago.
Should match new styling in #48585
9034dc6cae68a637d441620d512f2fcd.gif (611.1 KB) - added by garrett-eclipse 4 months ago.
Default Colour Scheme shows blue focus outline for both Add New and Apply/Filter
c3200076b4b1e788571faab228c45f3c.gif (596.2 KB) - added by garrett-eclipse 4 months ago.
Using a colour scheme the focus outline on the Add New uses the scheme while the Apply/Filter don't

Download all attachments as: .zip

Change History (15)

@garrett-eclipse
5 months ago

Unstyled Add New on Posts

@garrett-eclipse
5 months ago

Unstyled Add New on Media

@garrett-eclipse
5 months ago

Markup for the Add New buttons is missing .button class which is standardly how the Admin Colour Scheme styling gets applied.

This ticket was mentioned in Slack in #design by garrett-eclipse. View the logs.


5 months ago

#2 @afercia
5 months ago

  • Keywords has-screenshots needs-design-feedback added

Some prior conversation on the "Add New" button happened on #34904.

Historically, this button has always had its own specific styling. Before WordPress 4.5 it used a medium grey and no border. Blue on hover / focus. See screenshot on the left.

The contrast was not sufficient so it was changed in WordPress 4.5 to use a lighter grey plus some border. See screenshot on the right.

http://cldup.com/hfI3e4MtuV.png

This change made the Add New button very close to secondary buttons, but still different on hover / focus. See relevant discussion on #34864. See also #34876 and the related changeset [35791].

Among other things, this button has also a different border-radius compared to the standard buttons.

That's not to say it can't be changed :) Personally, I'd be in favor of making it a standard secondary button. I don't see strong reasons why it should be different from all the other buttons and I'm not sure why it should be bold and blue on hover / focus. Also, simplifying the CSS and removing exceptions is always a good thing in the long run. /Cc @michaelarestad

#3 @garrett-eclipse
5 months ago

Thanks for the history @afercia I tend to agree with you on making it consistent and removing the exceptions there. Along with falling in line with the new Admin CSS, accessibility improvements and any futher improvements to the UI it ensures that button will also reflect the user Admin Colour Scheme preference.

This ticket was mentioned in Slack in #core by garrett-eclipse. View the logs.


4 months ago

#5 @melchoyce
4 months ago

#48889 was marked as a duplicate.

@melchoyce
4 months ago

@melchoyce
4 months ago

Should match new styling in #48585

@garrett-eclipse
4 months ago

Default Colour Scheme shows blue focus outline for both Add New and Apply/Filter

@garrett-eclipse
4 months ago

Using a colour scheme the focus outline on the Add New uses the scheme while the Apply/Filter don't

#6 follow-up: @garrett-eclipse
4 months ago

  • Keywords 2nd-opinion added

Thanks for the patch @melchoyce

Upon initially reviewing was expecting the button colour to change with the colour scheme but that doesn't seem to be the case on this button and looking at the Apply/Filter for comparison it appears to conform so I guess these buttons don't change colour with the scheme.

That being said another difference I noticed was the focus state, when using the default colour scheme the Add New has the same focus as the Apply and Filter (blue outline). But when using a colour scheme the Add New got a different colour than the Apply and Filter (see screenshot) it seems the focus is could scheme specific but only on Add New and not the other buttons. Not sure if this is an issue or intentional.

Version 0, edited 4 months ago by garrett-eclipse (next)

#7 in reply to: ↑ 6 @garrett-eclipse
4 months ago

Replying to garrett-eclipse:

Upon initially reviewing was expecting the button colour to change with the colour scheme but that doesn't seem to be the case on this button and looking at the Apply/Filter for comparison it appears to conform so I guess these buttons don't change colour with the scheme.

From this recent Make post it seems this was intentional for secondary buttons;
https://make.wordpress.org/core/2019/12/10/alternate-color-schemes-changes-in-wordpress-5-3-1/

This ticket was mentioned in Slack in #design by estelaris. View the logs.


5 weeks ago

Note: See TracTickets for help on using tickets.