Audit our secondary button uses

[markjaquith]

helen pondered in #wordpress-ui that maybe the "apply" button in the Screen Options dropdown should be a primary button. There's a good argument to be made that when this panel is down, that "apply" button is your new primary.

We should do an audit of our buttons to see if there are any other cases where we could make an action or a temporarily primary action more obvious by using the primary button style.

[alexandec]

I've examined the Dashboard and found a number of cases where a primary button is not used, but could be:

• On the Edit Post page, in the Publish box, after clicking one of the three Edit links, the "OK" button could be a primary button.
• On the Edit Post page, after clicking "+ Add New Category", the "Add New Category" button could be a primary button.
• On the Media Library page, the "Add New" button could be a primary button (right now it looks like a primary button on hover only). Adding media is probably the most likely single action for a user to perform on this page, so it makes sense to focus the user on it.
• On the Media Library -> Add New page, the "Select Files" button could be primary.
• In the single-file Browser Uploader, the "Upload" button could be primary.
• On the Pages page, the "Add New" button could be a primary button.
• On the Users page, the "Add New" button could be a primary button.
• On Posts, Media, Pages, and Comments pages, when one or more checkboxes are checked next to items, the "Apply" button next to "Bulk Actions" could become a primary button. If a user checks boxes, it's very likely they will perform a bulk action next. The primary button serves as a visual cue showing them how to proceed.
• On Posts, Media, Pages, and Comments pages, when the user chooses a dropdown option next to the "Filter" button, the "Filter" button could become a primary button, reminding the user they need to click the button to activate the filter.

[Dezzy]

I would like to fix this problem.

[iseulde]

The "Delete Users" and "Import WordPress" screens both don't have a primary button and should really have one. See screenshots.

[tivvit]

Hi I want to help with this too.
I chose this ticket for school project so I need to solve it.

thx

[utkarshd_42]

I think the apply buttons beside the Bulk actions menu should be a primary button.

[utkarshd_42]

Replying to tivvit:

Hi I want to help with this too.
I chose this ticket for school project so I need to solve it.

thx

Hi, I don't think there is any solving required. It's just an audit of their secondary button usage. As far as I can interpret only reporting those buttons (which are secondary and you think are supposed to be primary), is needed. For actually changing such buttons to primary, as almost all buttons have been added using the function submit_button() you could just pass the $type parameter as 'primary'.

[Dezzy]

Patch for buttons.

[Dezzy]

Hi, I have uploaded patch for few buttons in description. Now I'll start working on Bulk actions menu.

Is this all right? It's my first bug, so I'm not sure in this things.

Thx for reply.

[nacin]

Assigning to markjaquith for review (and to take this ticket off the good-first-bugs report).

[helen]

Since this has been sitting for so long, I'm going to handle getting this in rather than prompting for a re-patch, as I usually would.

Replying to alexandec:

• On the Edit Post page, in the Publish box, after clicking one of the three Edit links, the "OK" button could be a primary button.

This is a bit noisy and too close to the Publish button, and they also stay on-screen.

• On the Edit Post page, after clicking "+ Add New Category", the "Add New Category" button could be a primary button.

See above.

• On the Media Library page, the "Add New" button could be a primary button (right now it looks like a primary button on hover only).

The "Add New" links are not buttons and shouldn't be.

• On the Media Library -> Add New page, the "Select Files" button could be primary.
• In the single-file Browser Uploader, the "Upload" button could be primary.

Sounds good.

• On the Pages page, the "Add New" button could be a primary button.
• On the Users page, the "Add New" button could be a primary button.

Per above, not buttons.

• On Posts, Media, Pages, and Comments pages, when one or more checkboxes are checked next to items, the "Apply" button next to "Bulk Actions" could become a primary button. If a user checks boxes, it's very likely they will perform a bulk action next. The primary button serves as a visual cue showing them how to proceed.

I wouldn't want to change a button's color this way, but I think there's a ticket about enabling/disabling/hiding things up there when nothing's selected that may already have some commits on it.

• On Posts, Media, Pages, and Comments pages, when the user chooses a dropdown option next to the "Filter" button, the "Filter" button could become a primary button, reminding the user they need to click the button to activate the filter.

Also wouldn't want to shift a button's color here.

[helen]

In 35161:

Screen options: Improve the "Apply" button

Previously the button was output as a part of the per-page option rendering, inline with that input. While this was appropriate for core's usage, the screen_settings filter has allowed plugins to place additional items at the bottom of the panel, which a number take advantage of. This leads to confusing situations where plugins that don't save settings via Ajax either have to add their own button or piggyback onto the existing button, which doesn't make any sense in the flow of additional options. It also hinders core from adding any other options that need to be submitted.

Also, when the screen options panel is open, a submit button there is the primary action at that moment. The "Apply" button also does a full page load, which a primary button indicates better.

fixes #34295. see #22222, #23738.

[helen]

Replying to helen:

• On the Media Library -> Add New page, the "Select Files" button could be primary.
• In the single-file Browser Uploader, the "Upload" button could be primary.

Sounds good.

Upon actually trying this out, it is overbearing and distracts from the drag-and-drop hint in plupload. Seems fine for the browser uploader button though, since it's a similar context to the import file button.

[helen]

In 35182:

Make some primary action buttons look primary.

• User deletion/removal
• Site status change (multisite)
• Network upgrade
• Import file upload
• Media browser upload

props Dezzy for the initial patch.
fixes #23738.

[helen]

In 35204:

Make the database update button primary.

see #23738.