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

[garrett-eclipse]

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

[garrett-eclipse]

Unstyled Add New on Posts

[garrett-eclipse]

Unstyled Add New on Media

[garrett-eclipse]

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

[afercia]

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.

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

[garrett-eclipse]

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.

[melchoyce]

#48889 was marked as a duplicate.

[melchoyce]

Should match new styling in #48585

[garrett-eclipse]

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

[garrett-eclipse]

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

[garrett-eclipse]

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 colour scheme specific but only on Add New and not the other buttons. Not sure if this is an issue or intentional.

[garrett-eclipse]

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/

[paaljoachim]

What kind of feedback is needed here?
Perhaps @ryelle might have some feedback.

[ryelle]

Since this ticket was created, the "add new" styles have had some iterations. These links now user a style very similar to the secondary button (ex, "Apply" the bulk actions) In most color schemes this means the buttons have a colored border and get darker on hover. Some of the schemes are considered "low contrast", so the secondary buttons are grey, and the Add New has a different focus style (see Ocean or Coffee).

I've automated taking a bunch of screenshots from all the color schemes, so here are 5 images for each color scheme:

1. The default state
2. Add New is hovered
3. Add New is focused
4. Apply (bulk actions) is hovered
5. Apply (bulk actions) is focused

​https://cloudup.com/ciynZYbbZAz

Given that these buttons now do have color scheme styles, I think this ticket can be closed, if design doesn't have anything to change here.

[michaelarestad]

Given that these buttons now do have color scheme styles, I think this ticket can be closed, if design doesn't have anything to change here.

I agree. This ticket can be closed for now. The button looks good across color schemes and matches color scheme styles.

[desrosj]

@ryelle Do you happen to know which ticket would have been responsible for the improvements making this ticket unnecessary? We should change the resolution from fixed to something else, like duplicate or invalid (default catch all).

[ryelle]

Looks like the work to update all the secondary buttons happened in #50537, so i've marked this one as a duplicate.