WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#27418 closed enhancement (fixed)

"Notices" lack variety

Reported by: melchoyce Owned by: helen
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

Right now our notices look something like this:
https://i.cloudup.com/XxflJQV1cD.png

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:

https://i.cloudup.com/UDDeFjESlB.png

Attachments (2)

27418.patch (5.5 KB) - added by iseulde 6 years ago.
Screen Shot 2014-10-08 at 19.57.41.png (11.7 KB) - added by iseulde 6 years ago.

Download all attachments as: .zip

Change History (12)

#1 @SergeyBiryukov
6 years ago

  • Version changed from trunk to 3.8

#2 @iseulde
6 years ago

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 CSS rules doesn't do any harm, and after that we could review all the notices in core.

Last edited 6 years ago by iseulde (previous) (diff)

@iseulde
6 years ago

#3 @iseulde
6 years ago

  • Keywords has-patch added
  • Milestone changed from Future Release to 4.1

Let's do this! :)

#4 follow-up: @iseulde
6 years ago

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

#5 in reply to: ↑ 4 @SergeyBiryukov
6 years ago

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?

#6 @iseulde
6 years ago

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.

#7 @kpdesign
6 years ago

#30199 was marked as a duplicate.

This ticket was mentioned in Slack in #core by helen. View the logs.


6 years ago

#9 @helen
6 years ago

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.

#10 @helen
6 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.