Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#27418 closed enhancement (fixed)

"Notices" lack variety

Reported by: melchoyce's profile melchoyce Owned by: helen's profile 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 10 years ago.
Screen Shot 2014-10-08 at 19.57.41.png (11.7 KB) - added by iseulde 10 years ago.

Download all attachments as: .zip

Change History (12)

#1 @SergeyBiryukov
10 years ago

  • Version changed from trunk to 3.8

#2 @iseulde
10 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 10 years ago by iseulde (previous) (diff)

@iseulde
10 years ago

#3 @iseulde
10 years ago

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

Let's do this! :)

#4 follow-up: @iseulde
10 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
10 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
10 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
10 years ago

#30199 was marked as a duplicate.

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


10 years ago

#9 @helen
10 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
10 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.