Use regular core button styling for page header buttons

[melchoyce]

In an effort to make WordPress more consistent, let's update the "Add New" page header buttons to use core button styles.

Uploading a before/after image of what I mean.

[melchoyce]

(Just noticed — the "after" button needs to do down 1px more.)

[danieltj]

Currently these buttons use the .page-title-action class which seems to be styled specifically for this use case. I'd argue, if we're going to change them to the proper default buttons, that the primary class be used instead of the secondary class as these are call to action buttons so they need to stand out. Hence why they have the blue outline at the moment.

Let's see what I can do here.

[danieltj]

Proposed change to action button

[danieltj]

Changed class for title action buttons

[danieltj]

After patch is applied

[helen]

Some thoughts:

1. We've tried for a long time to adhere to buttons only being used for form submission or in-page actions, but I'm not sure just how successful we've actually been or if this is something that still matters today.
2. The current styling for that link already looks so much like a button that it rather looks like something is wrong with it as opposed to purposefully being not-a-button.
3. There are instances where it is an in-page action - see uploading a theme.
4. In core usage I would disagree that it's the primary action on any page so it shouldn't be blue. The blue outline is the standard focus styling, color is not related to primary-ness.
5. We should be aware of what plugins are doing with that class and adding links to that area, it may (or may not) affect the actual code change decision (changing classes vs. changing CSS for the existing class).

[danieltj]

Replying to helen:

Some thoughts:

1. We've tried for a long time to adhere to buttons only being used for form submission or in-page actions, but I'm not sure just how successful we've actually been or if this is something that still matters today.
2. The current styling for that link already looks so much like a button that it rather looks like something is wrong with it as opposed to purposefully being not-a-button.
3. There are instances where it is an in-page action - see uploading a theme.
4. In core usage I would disagree that it's the primary action on any page so it shouldn't be blue. The blue outline is the standard focus styling, color is not related to primary-ness.
5. We should be aware of what plugins are doing with that class and adding links to that area, it may (or may not) affect the actual code change decision (changing classes vs. changing CSS for the existing class).

Many plugins are using the page-title-action class to place buttons there next to the h1 on the page, so we can't remove that without breaking the layout of plugins who are using it (two of my plugins do, I've also seen many others).

Additionally, that button has always been for single core actions within the admin dashboard. On each page that has one it's almost always used to add something new so I disagree, it is the primary focus (not all the time, but most of the time).

My opinion is that it should be left as is, or changed to use the primary button class to make it more blue so it stands out. Changing it to have the secondary class so it's fully grey will make the button just as much, if not less noticeable than it already is.

[melchoyce]

Changing it to have the secondary class so it's fully grey will make the button just as much, if not less noticeable than it already is.

We could run two sets of usability tests to test this — one with as-is, one with secondary.

(I still personally believe it's not the primary action on the page, and should be secondary.)

[helen]

Replying to danieltj:

Many plugins are using the page-title-action class to place buttons there next to the h1 on the page, so we can't remove that without breaking the layout of plugins who are using it (two of my plugins do, I've also seen many others).

If you could provide examples to test against so we don't have to go searching through the plugin directory (I'm aware that this is a thing that's done, but I can't name any specific examples), that would be very helpful.

Additionally, that button has always been for single core actions within the admin dashboard. On each page that has one it's almost always used to add something new so I disagree, it is the primary focus (not all the time, but most of the time).

My opinion is that it should be left as is, or changed to use the primary button class to make it more blue so it stands out. Changing it to have the secondary class so it's fully grey will make the button just as much, if not less noticeable than it already is.

Adding a new item often has its own menu item already and is not inherently the primary action on a screen where you are managing or browsing items (posts, themes, plugins, etc.). I also don't think the goal here is to make the link more noticeable but rather to make it not look like it's a button gone wrong. But, if there's actually a problem identified surrounding how to navigate to these various things vs. visual consistency, then testing sounds like a good thing to do :)

[danieltj]

Wow, it's been a while since I last commented on this! After re-reading your comments (both @melchoyce and @helen) I've changed my mind and agree that perhaps it's better to use the grey button styling (secondary) for this. I have seen some plugins use that button in the header as it currently is, I have a plugin or two that do use it for consistency across wp-admin.

I think updating all of the buttons in this area to have the button button-secondary class is probably the best way to go for most instances. I don't know how we'd successfully split test something like this, although making this button slightly more grey (removing the blue border and text) probably won't make too big of a difference.

I think it's just important to ensure we know the purpose of this button in each instance it occurs and what it's actually used for because I do see it personally as a primary action in some places (the All Posts page) but others, I see it more of a secondary action. Whichever intention is chosen, I think removing the currently button styling and making it more consistent is the way forward, whether it uses the grey secondary or blue primary styling.

[boemedia]

I'm trying to find documentation on (button) styles for WP. @melchoyce , can you point me to a direction?

[melchoyce]

I use WordPress itself as the source of truth — so, the button and button-primary classes.

[afercia]

See some conversation around this also on https://core.trac.wordpress.org/ticket/34904#comment:76

For what is worth I'd be in favor of using one of the default styles for the Add New buttons. I'm not sure they should be primary though, as in most of the related pages there are many available actions and "add new" is only one of them. Personally, I'd use the default style (secondary buttons). Please notice these are going to have blue borders in #34904, which may help :)

Noting there are a few inconsistencies in core (please ignore me if this has been already noticed) for example:

• add terms: it's already primary (I guess just because it's at the bottom ot the page)
• Widgets > Manage with Live Preview: custom
• Menus > Manage with Live Preview: custom
• Add Plugins > Upload Plugin: custom

[michaelarestad]

I also suggest switching to the secondary button styles. I'm going to mark this as a good first bug.

[emailjoey]

patch button to match style of secondary buttons

Modified styles of .page-title-action button to match that of the secondary buttons.

Trac ticket: https://core.trac.wordpress.org/ticket/41986

[emailjoey]

Cleaned up the CSS a bit for merge

[emailjoey]

Screenshot of before and after change

[TimothyBlynJacobs]

In 56458:

General: Use regular core button styles for page header actions.

Props emailjoey, melchoyce, afercia, michaelarestad, danieltj, helen.
Fixes #41986.

Merged in https://core.trac.wordpress.org/changeset/56458.

[kebbet]

I think this changeset was introduced in 6.4, is that correct? Please milestone it accordingly @TimothyBlynJacobs, thanks!

Trying to clean up committed tickets from the Awaiting review milestone.

[TimothyBlynJacobs]

Apologies for the oversight @kebbet.