WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#14891 closed defect (bug) (fixed)

Fix line-height of admin CSS for .updated and .error messages

Reported by: joelhardi Owned by:
Milestone: 3.1 Priority: normal
Severity: minor Version: 3.1
Component: Administration Keywords: has-patch dev-feedback
Focuses: Cc:

Description

This is just a one-line fix to wp-admin/css/global.dev.css. Either bug or enhancement depending on how you rate typography/design/readability.

In 3.0.1 and trunk, the line-height property for error messages is set to 1. These are the pink- and yellow-background messages such as "Settings saved" that are displayed to the user.

The bug is that with line-height set to 1, the leading/line spacing == the font size, so these look horrible when the message wraps more than one line in the browser. The lines of type overlap each other, so it's hard to read. My guess would be that the design tester just wasn't looking at multi-line error messages, or it would have been caught earlier. Short, single-line messages such as "Settings saved." look fine.

To see one, call add_settings_error('some', 'text', 'some text that's long enough to wrap more than one line in the browser') on some admin page.

I've attached a patch with suggested fix to change this property from 1 (i.e. == 100%) to 125%. An alternate fix that I'd be happy with would be to just delete the property (so that line-height would revert to being the same as other <p> elements on the page). As long as line-height is set to some reasonable default value so that I don't have to hardcode style rules into my plugins any more, I will be happy!

More info: The computed font size of .updated p, .error p in the browser is 12px. So, my suggestion of 125% equals leading of 15px. This is slightly narrower than the line spacing of the other <p> elements on the admin page and I believe fits the designer's presumed original intent of compressing the line spacing slightly for these error messages. But again, I would also agree with just deleting the "line-height" property for this style declaration, so that the line spacing for these messages is the same as for other <p>s on the admin pages, and is obviously simpler to just not modify the default line-height at all.

Attachments (4)

global.dev.css.diff (310 bytes) - added by joelhardi 5 years ago.
patch to wp-admin/css/global.dev.css with suggested fix
wp_error_msg.png (25.1 KB) - added by joelhardi 5 years ago.
screenshot of admin showing bug
screenshot-patched-125percent.png (25.5 KB) - added by joelhardi 5 years ago.
screenshot showing suggested fix of line-height "125%" or "normal"
screenshot-patched-no_line-height.png (25.6 KB) - added by joelhardi 5 years ago.
screenshot showing alternate fix of simply deleting line-height declaration

Download all attachments as: .zip

Change History (11)

@joelhardi5 years ago

patch to wp-admin/css/global.dev.css with suggested fix

@joelhardi5 years ago

screenshot of admin showing bug

comment:1 @nacin5 years ago

  • Keywords ui-feedback added; css removed
  • Milestone changed from Awaiting Review to 3.1

[13844] - Note my commit message. +1.

Screenshot showing the result will be helpful for the UI group.

@joelhardi5 years ago

screenshot showing suggested fix of line-height "125%" or "normal"

@joelhardi5 years ago

screenshot showing alternate fix of simply deleting line-height declaration

comment:2 follow-up: @joelhardi5 years ago

Cool, thx for the attention (FYI met you at WCMA last weekend).

Attached screenshots for both setting line-height to 125% (12px/15px computed style) and deleting the line-height declaration (12px/16px computed style, same as other <p>s on page).

FYI, setting line-height to "normal" returns same computed style of 12px/15px as "125%" in Safari and Firefox.

comment:3 in reply to: ↑ 2 @nacin5 years ago

  • Cc John added

Replying to joelhardi:

Cool, thx for the attention (FYI met you at WCMA last weekend).

I skimmed right over the reporter name on first review. Cool :-)

FYI introduced in [9963]. We'll have JohnONolan weigh in on implementation, but it'll definitely be fixed in 3.1.

comment:4 @nacin5 years ago

  • Cc John removed

comment:5 @jane5 years ago

  • Keywords ui-feedback removed

I'm fine with the revised appearance, but want the actual css to be in line with whatever @johnonolan is doing for the css refactor.

comment:6 @jane5 years ago

  • Keywords has-patch dev-feedback added

comment:7 @nacin5 years ago

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

(In [16010]) Improve the line height on div.updated, div.error. props joelhardi, fixes #14891.

Note: See TracTickets for help on using tickets.