WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 3 weeks ago

#41986 new enhancement

Use regular core button styling for page header buttons

Reported by: melchoyce Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: ui-feedback has-patch needs-refresh
Focuses: ui, administration Cc:
PR Number:

Description

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.

Attachments (4)

add-new.png (14.5 KB) - added by melchoyce 2 years ago.
page-action-button.png (18.8 KB) - added by danieltj 2 years ago.
Proposed change to action button
41986.diff (102.3 KB) - added by danieltj 2 years ago.
Changed class for title action buttons
after-patch-41986.png (20.2 KB) - added by danieltj 2 years ago.
After patch is applied

Download all attachments as: .zip

Change History (17)

@melchoyce
2 years ago

#1 @melchoyce
2 years ago

  • Keywords needs-patch ui-feedback added

#2 @melchoyce
2 years ago

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

#3 @danieltj
2 years ago

  • Keywords 2nd-opinion added

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
2 years ago

Proposed change to action button

@danieltj
2 years ago

Changed class for title action buttons

@danieltj
2 years ago

After patch is applied

#4 @danieltj
2 years ago

  • Keywords has-patch added; needs-patch removed

#5 follow-up: @helen
2 years ago

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).

#6 in reply to: ↑ 5 ; follow-up: @danieltj
2 years ago

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.

#7 @melchoyce
2 years ago

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.)

#8 in reply to: ↑ 6 @helen
2 years ago

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 :)

#9 @danieltj
20 months ago

  • Keywords needs-refresh added; 2nd-opinion removed

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.

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


9 months ago

#11 @boemedia
7 months ago

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

#12 @melchoyce
7 months ago

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

#13 @afercia
3 weeks ago

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
Note: See TracTickets for help on using tickets.