"Notices" lack variety

[melchoyce]

Right now our notices look something like this:

That's a great start, but they're not easily extendible. There's no quick way to apply styling to a notice. Take a look at the HTML for the above examples:

<div class="updated"><p>Updated!</p></div>

<div class="error"><p>Error!</p></div>

<div class="update-nag">Upgrade WP!</div>

It's incredibly specific.

Proposal: let's create a set of default notice classes that can used across wp-admin. It could look something like this:

.notice-success {
     border-color: #78d248;
}

.notice-warning {
    border-color: #fdba24;
}

.notice-alert,
.notice-error {
    border-color: #db3736;
}

.notice-info,
.notice-active {
    border-color: #2ea2cc;
}

These classes can be applied to various notices depending on context. That way, we won't end up with notices that look like this, where a green border is applied to a warning:

[iseulde]

I think this would be useful. I've had scenarios in which I wanted to use and orange border (used for update-nag) but couldn't because it's styled differently.

Adding some additional CSS rules doesn't do any harm, and after that we could review all the notices in core.

[iseulde]

Let's do this! :)

[iseulde]

Another notice that doesn't have the right colour: "Session expired. Please log in again. You will not move away from this page." (See screenshot.)

This should be red|orange (error|warning), but certainly not green (success).

[SergeyBiryukov]

Replying to avryl:

Another notice that doesn't have the right colour: "Session expired. Please log in again. You will not move away from this page." (See screenshot.)

Does the latest patch address this?

[iseulde]

No, I didn't touch wp-login.php.

Proposal:

• Session expired. Please log in again. You will not move away from this page. (warning=orange instead of success=green)
• Please enter your username or email address. You will receive a link to create a new password via email. (info=blue instead of success=green)
• Enter your new password below. (info=blue instead of success=green)

The rest of the messages seem good, except that I wouldn't add "<strong>ERROR</strong>: " before some error messages.

[kpdesign]

#30199 was marked as a duplicate.

[helen]

Just going to make all login messages blue, since it's separate and doesn't know if it's a warning vs. informational right now. We can re-evaluate in another release if we want to get specific, since that will need more work.

[helen]

In 30505:

Admin notices: Add more variety and make more generically usable.

There is now a base class of notice, with additional classes of notice-success, notice-warning, notice-error, and a new blue notice-info.

Also corrects some misleading notice colors, such as plugin tested up to warnings and login messages.

props avryl, melchoyce.
fixes #27418.