Accessibility: Improve reordering of the post boxes in the block editor meta boxes area.

Follow-up to [48373].
- ignores hidden "sortables" areas 
- hides the reorder buttons when there's only one post box 
- makes the reorder buttons slightly bigger to match the side of the toggle button

Fixes #39074.

Built from https://develop.svn.wordpress.org/trunk@48460


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

wp-admin/css/common-rtl.css

@@ -2012,6 +2012,7 @@ html.wp-toolbar {
 	flex-shrink: 0;
 }
 
+/* Post box order and toggle buttons. */
 .postbox .handle-order-higher,
 .postbox .handle-order-lower,
 .postbox .handlediv {
@@ -2029,6 +2030,14 @@ html.wp-toolbar {
 	color: #72777c;
 }
 
+/* Post box order buttons in the block editor meta boxes area. */
+.edit-post-meta-boxes-area .postbox .handle-order-higher,
+.edit-post-meta-boxes-area .postbox .handle-order-lower {
+	width: 44px;
+	height: 44px;
+	color: #191e23
+}
+
 .postbox .handle-order-higher[aria-disabled="true"],
 .postbox .handle-order-lower[aria-disabled="true"] {
 	cursor: default;

wp-admin/css/common.css

@@ -2011,6 +2011,7 @@ html.wp-toolbar {
 	flex-shrink: 0;
 }
 
+/* Post box order and toggle buttons. */
 .postbox .handle-order-higher,
 .postbox .handle-order-lower,
 .postbox .handlediv {
@@ -2028,6 +2029,14 @@ html.wp-toolbar {
 	color: #72777c;
 }
 
+/* Post box order buttons in the block editor meta boxes area. */
+.edit-post-meta-boxes-area .postbox .handle-order-higher,
+.edit-post-meta-boxes-area .postbox .handle-order-lower {
+	width: 44px;
+	height: 44px;
+	color: #191e23
+}
+
 .postbox .handle-order-higher[aria-disabled="true"],
 .postbox .handle-order-lower[aria-disabled="true"] {
 	cursor: default;

wp-admin/js/postbox.js

@@ -203,16 +203,30 @@
 		 * @return {void}
 		 */
 		updateOrderButtonsProperties: function() {
-			var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ),
-				lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ),
+			var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
+				lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
 				firstPostbox = $( '.postbox:visible:first' ),
 				lastPostbox = $( '.postbox:visible:last' ),
+				firstPostboxId = firstPostbox.attr( 'id' ),
+				lastPostboxId = lastPostbox.attr( 'id' ),
 				firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
-				lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' );
+				lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
+				moveUpButtons = $( '.handle-order-higher' ),
+				moveDownButtons = $( '.handle-order-lower' );
 
 			// Enable all buttons as a reset first.
-			$( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
-			$( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
+			moveUpButtons
+				.attr( 'aria-disabled', 'false' )
+				.removeClass( 'hidden' );
+			moveDownButtons
+				.attr( 'aria-disabled', 'false' )
+				.removeClass( 'hidden' );
+
+			// When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
+			if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
+				moveUpButtons.addClass( 'hidden' );
+				moveDownButtons.addClass( 'hidden' );
+			}
 
 			// Set an aria-disabled=true attribute on the first visible "move" buttons.
 			if ( firstSortablesId === firstPostboxSortablesId ) {

wp-includes/version.php

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