Administration: Attempt to even-out the new Up/Down arrows in metabox headings and make them look a bit better. Also group them a little closer together in an attempt to reduce confusion of having two down arrows next to one another. Move the focus outline to the button instead of only the icon.

Fixes #39074.
Built from https://develop.svn.wordpress.org/trunk@48465


git-svn-id: http://core.svn.wordpress.org/trunk@48234 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -2028,6 +2028,7 @@ html.wp-toolbar {
 .postbox .handle-order-higher,
 .postbox .handle-order-lower {
 	color: #72777c;
+	width: 1.62rem;
 }
 
 /* Post box order buttons in the block editor meta boxes area. */
@@ -2056,6 +2057,10 @@ html.wp-toolbar {
 	line-height: 1;
 }
 
+.postbox.closed {
+	border-bottom: 0;
+}
+
 /* user-select is not a part of the CSS standard - may change behavior in the future */
 .postbox .hndle,
 .stuffbox .hndle {
@@ -3022,13 +3027,21 @@ img {
 }
 
 .postbox .handle-order-higher .order-higher-indicator::before,
-.postbox .handle-order-lower .order-lower-indicator::before,
+.postbox .handle-order-lower .order-lower-indicator::before {
+	position: relative;
+    top: 0.11rem;
+	width: 20px;
+	height: 20px;
+}
+
 .postbox .handlediv .toggle-indicator::before {
 	width: 20px;
 	border-radius: 50%;
 }
 
 .postbox .handlediv .toggle-indicator::before {
+	position: relative;
+	top: 0.05rem;
 	text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
 }
 
@@ -3045,7 +3058,9 @@ img {
 .postbox .handle-order-higher:focus,
 .postbox .handle-order-lower:focus,
 .postbox .handlediv:focus {
-	box-shadow: none;
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, 0.8);
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }
@@ -3053,9 +3068,7 @@ img {
 .postbox .handle-order-higher:focus .order-higher-indicator::before,
 .postbox .handle-order-lower:focus .order-lower-indicator::before,
 .postbox .handlediv:focus .toggle-indicator::before {
-	box-shadow:
-		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, 0.8);
+	box-shadow: none;
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }

wp-admin/css/common.css

@@ -2027,6 +2027,7 @@ html.wp-toolbar {
 .postbox .handle-order-higher,
 .postbox .handle-order-lower {
 	color: #72777c;
+	width: 1.62rem;
 }
 
 /* Post box order buttons in the block editor meta boxes area. */
@@ -2055,6 +2056,10 @@ html.wp-toolbar {
 	line-height: 1;
 }
 
+.postbox.closed {
+	border-bottom: 0;
+}
+
 /* user-select is not a part of the CSS standard - may change behavior in the future */
 .postbox .hndle,
 .stuffbox .hndle {
@@ -3021,13 +3026,21 @@ img {
 }
 
 .postbox .handle-order-higher .order-higher-indicator::before,
-.postbox .handle-order-lower .order-lower-indicator::before,
+.postbox .handle-order-lower .order-lower-indicator::before {
+	position: relative;
+    top: 0.11rem;
+	width: 20px;
+	height: 20px;
+}
+
 .postbox .handlediv .toggle-indicator::before {
 	width: 20px;
 	border-radius: 50%;
 }
 
 .postbox .handlediv .toggle-indicator::before {
+	position: relative;
+	top: 0.05rem;
 	text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
 }
 
@@ -3044,7 +3057,9 @@ img {
 .postbox .handle-order-higher:focus,
 .postbox .handle-order-lower:focus,
 .postbox .handlediv:focus {
-	box-shadow: none;
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, 0.8);
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }
@@ -3052,9 +3067,7 @@ img {
 .postbox .handle-order-higher:focus .order-higher-indicator::before,
 .postbox .handle-order-lower:focus .order-lower-indicator::before,
 .postbox .handlediv:focus .toggle-indicator::before {
-	box-shadow:
-		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, 0.8);
+	box-shadow: none;
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.5-beta1-48464';
+$wp_version = '5.5-beta1-48465';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.