Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#59960 new defect (bug)

Replace em-based `line-height` with unitless values

Reported by: sabernhardt's profile sabernhardt Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: good-first-bug has-patch
Focuses: css, administration, coding-standards Cc:

Description

Follow-up to #44643

The default line-height of 1.4em can cause issues, at least in the iframe-based editor. Other instances probably could be unitless too (while keeping their numeric value).

body {
	line-height: 1.4;
}

Change History (4)

#1 @sabernhardt
3 months ago

I found ten em-based line-height values in the CSS files within the wp-admin and wp-includes directories.

4 rulesets in wp-admin\css\common.css

/* Line 228 */
body {
	line-height: 1.4em;
}

/* Line 513 */
.widefat td,
.widefat td p,
.widefat td ol,
.widefat td ul {
	line-height: 1.5em;
}

/* Line 520 */
.widefat th,
.widefat thead td,
.widefat tfoot td {
	line-height: 1.3em;
}

/* Line 782 */
.widget .widget-top,
.postbox .hndle,
.stuffbox .hndle,
.control-section .accordion-section-title,
.sidebar-name,
#nav-menu-header,
#nav-menu-footer,
.menu-item-handle,
.checkbox,
.side-info,
#your-profile #rich_editing,
.widefat thead th,
.widefat thead td,
.widefat tfoot th,
.widefat tfoot td {
	line-height: 1.4em;
}

wp-admin\css\edit.css (line 1418)

p.popular-tags {
	line-height: 2em;
}

wp-admin\css\install.css (line 93)

#logo {
	line-height: 1.3em;
}

wp-admin\css\list-tables.css (line 2252)

@media screen and (max-width: 782px) {
	table.plugin-install td.column-name strong {
		line-height: 1.6em;
	}
}

wp-admin\css\media.css (line 203)

.media-item .progress {
	line-height: 2em;
}

wp-admin\css\nav-menus.css (line 181)

.bulk-actions input.menu-items-delete {
	line-height: 2.1em;
}

Thickbox styles (compiled from thickbox.css, line 83)

#TB_ajaxContent {
	line-height: 1.4em;
}

#2 @faisalmehmood786
3 months ago

Hi,
How can I reproduce this issue?

This ticket was mentioned in PR #5719 on WordPress/wordpress-develop by @andbalashov.


3 months ago
#3

  • Keywords has-patch added; needs-patch removed

This commit addresses ticket #59960, which identified issues with em-based line-height values in various CSS files within the WordPress Administration interface. Following the suggestion in the ticket, the em-based line-heights are replaced with unitless values while keeping their numeric value the same.

This change primarily affects the 'common.css' file but also includes updates in 'edit.css', 'install.css', 'list-tables.css', 'media.css', 'nav-menus.css', and the Thickbox styles. The update aims to enhance the consistency and scalability of the CSS and resolve issues particularly noted in iframe-based editors.

Referencing the follow-up to ticket #44643, this update aligns with the focus on coding standards and CSS improvements within the WordPress administration environment. By making line-heights unitless, we ensure better adaptability across different font sizes and display environments.

Files updated:

  • wp-admin/css/common.css
  • wp-admin/css/edit.css
  • wp-admin/css/install.css
  • wp-admin/css/list-tables.css
  • wp-admin/css/media.css
  • wp-admin/css/nav-menus.css
  • Compiled Thickbox styles (thickbox.css)

Trac ticket: https://core.trac.wordpress.org/ticket/59960

@mukesh27 commented on PR #5719:


3 months ago
#4

Thanks @andbalashov for the PR. The changes look good to me.

@sabernhardt could you please review it so we mark this ready for commit

Note: See TracTickets for help on using tickets.