Audit usage of the buttons CSS classes

[afercia]

Looks like the buttons styling in WordPress is built in a way that the "base" CSS class .button should always be used. Then, controls (links or buttons) may have additional classes like .button-primary and .button-secondary.

By the way, there are places where the base class is missing and elements use only .button-primary or .button-secondary. This affects the focus style when elements are focused, and it actually depends also on the platform and browser used.

For example, the buttons in the Quick Edit form miss the base .button class and this is how they look in Chrome on OS X:

This happens because the native outline style (which is different across platforms and browsers) is reset only by the base .button CSS class:

.wp-core-ui .button:active,
.wp-core-ui .button:focus {
	outline: none;
}

Worth noting links that look like buttons are not affected because common.css already resets the links outline. So this applies just to buttons, see in the screenshots below:

There are probably two options:

• check all the buttons and make sure they have the .button class
• just reset the outline also in the other button CSS rules

Related: #34904

[anonymized_15026628]

I would prefer to add the selector *[class*='button-'] after .button selector. So it may look like this:

.button, *[class*='button-'] { ... button's base style ... }

[afercia]

Turns out I was partially wrong and worth clarifying that the .button-secondary class is there just for backward
compatibility reasons and should not be used. From wp-includes/css/buttons.css:

WordPress-style Buttons
=======================
Create a button by adding the `.button` class to an element. For backward
compatibility, we support several other classes (such as `.button-secondary`),
but these will *not* work with the stackable classes described below.

Related: #27314, #37448

[karmatosed]

@afercia so is the outline not going to appear?

[afercia]

@karmatosed yep, the outline property should be reset for all the buttons. I think that's the intended behaviour, it doesn't work well in some cases just because the classes are used incorrectly.

[afercia]

One more example is about a few places where button-large is used without the base class button. For example, in the edit attachment screen, the primary button in the publish box uses these classes:
button-primary button-large
and they should be
button button-primary button-large

Currently, this button has the standard size, with a height of 28px:

but it should be a bit bigger, also for consistency with the similar button in the Post Publish meta box:

The base class button is necessary also to properly reset the outline property, see what happens in Chrome on OS X without the button class:

and with:

[afercia]

In 38616:

Accessibility: Standardize the remove/delete/cancel links in the Menus screen and Publish meta boxes.

The submitdelete CSS class is used in various places across the admin for some
"red" action links. It is worth simplifying this rule for further improvements
related to color contrast.

• simplifies a non-standard styling for the "Remove/Cancel" links in the Menus screen
• underlines all the "Move to trash/Delete" red links in all the Publish meta boxes
• fixes CSS classes usage for all the Publish meta boxes primary buttons
• fixes broken layout for the old Link Manager publish meta box

Props karmatosed, hugobaeta, monikarao, afercia.
Fixes #37969, #37018. See #37448, #37138, #27314.

[afercia]

In 38672:

Administration: Improve the usage of the button CSS classes.

Introduces some consistency in the usage of the button CSS classes, fixes the
focus style for accessibility and responsiveness of the buttons.

• Adds the button class to all primary buttons make them responsive
• Removes all secondary-button classes and replaces it with button when needed. button-secondary shouldn't be used and exists just for backward compatibility reasons
• Replaces classes inside submit_button() with a shorthand for some buttons, and use an empty string for the default button class. Passing button is unnecessary
• Adjusts get_submit_button() to remove empty items

Props iseulde, dimchik, chris_d2d, mhowell, afercia.
Fixes #27314, #37138, #37448.