CSS Optimization: Use shorthand 'border' value in wp-admin/css/admin-menu.css

[ankitmaru]

Properties can be replaced with 'border' shorthand.

[audrasjb]

Hi, thanks for the ticket and patch,

I think it would be nice to quickly check other occurence of this.
For example, in wp-admin/css/common.css:

.contextual-help-tabs li {
	margin-bottom: 0;
	list-style-type: none;
	border-style: solid;
	border-width: 0 0 0 2px;
	border-color: transparent;
}

.contextual-help-tabs a {
	display: block;
	padding: 5px 5px 5px 12px;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid transparent;
	border-right: none;
	border-left: none;
}

[audrasjb]

Hum… looks like it's legitimate in this case, though… because there is a different border for each side…

[sabernhardt]

Besides jquery-ui-dialog.css, I found one additional instance that can combine all three properties into one line:
wp-includes/css/editor.css

#wp_editimgbtn,
#wp_delimgbtn,
#wp_editgallery,
#wp_delgallery {
	background-color: #eee;
	margin: 2px;
	padding: 2px;
	border: 1px solid #999;
	border-radius: 3px;
}

Border styles like .contextual-help-tabs li (comment:5) could combine to two lines, if desired.

[ankitmaru]

I have added few more patches as well. Checked whole css/ folder for the same improvements.
Replying to audrasjb:

Hi, thanks for the ticket and patch,

I think it would be nice to quickly check other occurence of this.
For example, in wp-admin/css/common.css:

.contextual-help-tabs li {
	margin-bottom: 0;
	list-style-type: none;
	border-style: solid;
	border-width: 0 0 0 2px;
	border-color: transparent;
}

[audrasjb]

@ankitmaru it would be easier for committers to merge all those patch in one unique patch, if possible :)

[ankitmaru]

@audrasjb Sorry for that, Here I am attaching one unique patch.

[audrasjb]

Thanks for the quick update @ankitmaru you rock!

One small change on my side:

• the /* equal height column trick */ comment should be kept (in common.css file). As this is a small CSS "hack", it's better to keep it documented ;-)

[ankitmaru]

@audrasjb Thanks

[ankitmaru]

@audrasjb Sorry for too many patches, Now it looks good to go. Thanks

[audrasjb]

@ankitmaru there’s not need to be sorry, thank you for helping this patch to move forward!

The patch looks good to me. Marking this for commit.

[ankitmaru]

@audrasjb Thank you so much.

[audrasjb]

I'm really sorry @ankitmaru but I have few more requests:

• in common.css replace padding: 10px 26px 99999px 26px; with padding: 10px 26px 99999px; / and padding: 16px 16px 99999px 16px; with padding: 16px 16px 99999px;
• In customize-controls.css replace padding: 0px 0px 7px 0px; with padding: 0 0 7px;
• In install.css replace padding: 0px 0px 7px 0px; with padding: 0 0 7px;
• In nav-menus.css replace margin: 0px 0px 5px 0px; with margin: 0 0 5px;

See MDN Docs for further informations:
​https://developer.mozilla.org/en-US/docs/Web/CSS/padding#syntax

The padding [it also applies for margin] property may be specified using one, two, three, or four values.

• When one value is specified, it applies the same padding to all four sides.
• When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
• When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom.
• When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).

[ankitmaru]

@audrasjb updated the patch.

[mukesh27]

I review the patches for the ticket and found the mention issues.

customize-controls.css_52148.patch​

This padding: 0px 0px 7px 0px; should replace with padding: 0px 0px 7px;

class-wp-comments-list-table.php_52148.patch​

As per our docs standard return should be at last not at first in the documentation.

install.css_52148.patch​

This padding: 0px 0px 7px 0px; should replace with padding: 0px 0px 7px;

nav-menus.css_52148.patch​

This margin: 0px 0px 5px 0px; should replace with margin: 0px 0px 5px;

[sabernhardt]

@ankitmaru Thanks for combining the patches and updating it in css_updated_52148.patch​.

Please make two more changes:

1. For the second change in customize-controls.css, remove the units with a zero value:

   margin: 0 0 0 10px;
   

(​see coding standards about zero value)

2. Combine the 3 border properties in wp-includes/css/editor.css (comment:7)

If you don't have time to update the patch today, I could do that.

[ankitmaru]

I have fixed the point no. 2, Can you please share more info about point no. 1?
Replying to sabernhardt:

@ankitmaru Thanks for combining the patches and updating it in css_updated_52148.patch​.

Please make two more changes:

1. For the second change in customize-controls.css, remove the units with a zero value:

   margin: 0 0 0 10px;
   

(​see coding standards about zero value)

2. Combine the 3 border properties in wp-includes/css/editor.css (comment:7)

If you don't have time to update the patch today, I could do that.

[sabernhardt]

The styles for #customize-theme-controls .add-new-menu-item do not need the px units for the three zero values, because the result is the same no matter what the unit is.

#customize-theme-controls .add-new-widget,
#customize-theme-controls .add-new-menu-item {
	cursor: pointer;
	float: right;
	margin: 0 0 0 10px;
	transition: all 0.2s;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	outline: none;
}

(You already did similarly with the body.cheatin h1 padding earlier in that file.)

padding: 0 0 7px;

Also, I don't think the class-wp-comments-list-table.php change belongs on this ticket. After putting the @global int $post_id first among the global variables, you could upload a patch for that file to ticket:51800.

[hellofromTonya]

Refreshed to (a) change 0px to 0 and (b) remove class-wp-comments-list-table.php changes

[hellofromTonya]

Today is 5.7 Beta 1. I refreshed the patch per @sabernhardt last comment.

Marking this as a commit candidate.

[SergeyBiryukov]

Thanks for the patches! This looks good to me, but I would skip the changes in wp-admin/css/common.css.

That "trick" looks more readable to me as is, and since we're not combining margin properties there, I don't see a point in combining padding.

[jorbin]

In 50162:

Administration: use shorthand css properties to improve readability

Consolidating border, padding, and margin instances where the shorthand can be used to improve readability.

Props ankitmaru, audrasjb, sabernhardt, mukesh27, hellofromTonya.
Fixes #52148.