Administration: Add box reordering toggle to Screen Options.

src/js/_enqueues/admin/common.js

@@ -1859,6 +1859,7 @@ $( function() {
 			var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
 
 			if (
+				$body.hasClass( 'metabox-reordering-disabled' ) ||
 				( width <= 782 ) ||
 				( 1 >= $sortables.find( '.ui-sortable-handle:visible' ).length && jQuery( '.columns-prefs-1 input' ).prop( 'checked' ) )
 			) {

src/js/_enqueues/admin/postbox.js

@@ -104,6 +104,10 @@
 				postboxWithinSortablesIndex = postboxesWithinSortables.index( postbox ),
 				firstOrLastPositionMessage;
 
+			if ( false === postboxes.reorderingEnabled ) {
+				return;
+			}
+
 			if ( 'dashboard_browser_nag' === postboxId ) {
 				return;
 			}
@@ -344,6 +348,13 @@
 					postboxes.save_order( page );
 				}
 			});
+
+			$( '.meta-box-reorder-tog' ).on( 'click.postboxes', function() {
+				var enabled = $( this ).prop( 'checked' );
+
+				postboxes.setReordering( enabled );
+				postboxes.save_reordering_state( page, enabled );
+			} );
 		},
 
 		/**
@@ -419,6 +430,8 @@
 				}
 			});
 
+			this.setReordering( this.isReorderingEnabled() );
+
 			if ( isMobile ) {
 				$(document.body).on('orientationchange.postboxes', function(){ postboxes._pb_change(); });
 				this._pb_change();
@@ -437,6 +450,68 @@
 			});
 		},
 
+		/**
+		 * Checks whether meta box reordering is enabled.
+		 *
+		 * @since 7.1.0
+		 *
+		 * @return {boolean} Whether meta box reordering is enabled.
+		 */
+		isReorderingEnabled: function() {
+			var $toggle = $( '#meta-box-reorder' );
+
+			if ( $toggle.length ) {
+				return $toggle.prop( 'checked' );
+			}
+
+			return ! $( document.body ).hasClass( 'metabox-reordering-disabled' );
+		},
+
+		/**
+		 * Enables or disables the meta box reordering UI.
+		 *
+		 * @since 7.1.0
+		 *
+		 * @param {boolean} enabled Whether reordering should be enabled.
+		 * @return {void}
+		 */
+		setReordering: function( enabled ) {
+			var $body = $( document.body ),
+				$orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
+
+			this.reorderingEnabled = !! enabled;
+
+			$body
+				.toggleClass( 'metabox-reordering-enabled', this.reorderingEnabled )
+				.toggleClass( 'metabox-reordering-disabled', ! this.reorderingEnabled );
+
+			if ( this.reorderingEnabled ) {
+				$orderButtons
+					.prop( 'disabled', false )
+					.removeAttr( 'tabindex aria-hidden' );
+				this.updateOrderButtonsProperties();
+			} else {
+				$orderButtons
+					.prop( 'disabled', true )
+					.attr( {
+						'aria-hidden': 'true',
+						tabindex: '-1'
+					} );
+			}
+
+			if ( window.wpResponsive && window.wpResponsive.maybeDisableSortables ) {
+				window.wpResponsive.maybeDisableSortables();
+				return;
+			}
+
+			try {
+				$( '.meta-box-sortables' )
+					.sortable( this.reorderingEnabled ? 'enable' : 'disable' )
+					.find( '.ui-sortable-handle' )
+						.toggleClass( 'is-non-sortable', ! this.reorderingEnabled );
+			} catch ( e ) {}
+		},
+
 		/**
 		 * Saves the state of the postboxes to the server.
 		 *
@@ -476,6 +551,32 @@
 			);
 		},
 
+		/**
+		 * Saves the meta box reordering setting to the server.
+		 *
+		 * @since 7.1.0
+		 *
+		 * @memberof postboxes
+		 *
+		 * @param {string}  page    The page we are currently on.
+		 * @param {boolean} enabled Whether meta box reordering is enabled.
+		 * @return {void}
+		 */
+		save_reordering_state : function( page, enabled ) {
+			$.post(
+				ajaxurl,
+				{
+					action: 'meta-box-reorder',
+					enabled: enabled ? 1 : 0,
+					screenoptionnonce: $( '#screenoptionnonce' ).val(),
+					page: page
+				},
+				function() {
+					wp.a11y.speak( __( 'Screen Options updated.' ) );
+				}
+			);
+		},
+
 		/**
 		 * Saves the order of the postboxes to the server.
 		 *

src/wp-admin/admin-ajax.php

@@ -79,6 +79,7 @@
 	'add-user',
 	'closed-postboxes',
 	'hidden-columns',
+	'meta-box-reorder',
 	'update-welcome-panel',
 	'menu-get-metabox',
 	'wp-link-ajax',

src/wp-admin/admin-header.php

@@ -214,6 +214,8 @@
 	$admin_body_class .= ' block-editor-page wp-embed-responsive';
 }
 
+$admin_body_class .= wp_is_meta_box_reordering_enabled( $current_screen ) ? ' metabox-reordering-enabled' : ' metabox-reordering-disabled';
+
 $admin_body_class .= ' wp-theme-' . sanitize_html_class( get_template() );
 if ( is_child_theme() ) {
 	$admin_body_class .= ' wp-child-theme-' . sanitize_html_class( get_stylesheet() );

src/wp-admin/css/common.css

@@ -1947,6 +1947,26 @@ p.auto-update-status {
 	line-height: 2.35;
 }
 
+.metabox-prefs > p {
+	margin: 0 0 8px;
+}
+
+.meta-box-reorder-prefs {
+	margin-top: 14px;
+}
+
+.meta-box-reorder-prefs legend {
+	padding-bottom: 2px;
+}
+
+.meta-box-reorder-prefs p {
+	margin: 0 0 4px;
+}
+
+.meta-box-reorder-prefs label {
+	line-height: 2;
+}
+
 #number-of-columns {
 	display: inline-block;
 	vertical-align: middle;
@@ -2223,6 +2243,12 @@ html.wp-toolbar {
 
 .postbox-header .handle-actions {
 	flex-shrink: 0;
+	padding-right: 8px;
+}
+
+.rtl .postbox-header .handle-actions {
+	padding-right: 0;
+	padding-left: 8px;
 }
 
 /* Post box order and toggle buttons. */
@@ -2244,6 +2270,30 @@ html.wp-toolbar {
 	width: 1.62rem;
 }
 
+.js.metabox-reordering-enabled .postbox .handle-order-higher,
+.js.metabox-reordering-enabled .postbox .handle-order-lower {
+	opacity: 0;
+	pointer-events: none;
+	transform: translateY( -1px );
+	transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.js.metabox-reordering-enabled .postbox-header:hover .handle-order-higher,
+.js.metabox-reordering-enabled .postbox-header:hover .handle-order-lower,
+.js.metabox-reordering-enabled .postbox-header:focus-within .handle-order-higher,
+.js.metabox-reordering-enabled .postbox-header:focus-within .handle-order-lower,
+.js.metabox-reordering-enabled .postbox .handle-order-higher:focus,
+.js.metabox-reordering-enabled .postbox .handle-order-lower:focus {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translateY( 0 );
+}
+
+.js.metabox-reordering-disabled .postbox .handle-order-higher,
+.js.metabox-reordering-disabled .postbox .handle-order-lower {
+	display: none;
+}
+
 /* 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 {
@@ -3329,7 +3379,13 @@ img {
 }
 
 .postbox .handle-order-higher:focus,
-.postbox .handle-order-lower:focus,
+.postbox .handle-order-lower:focus {
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
+	border-radius: 4px;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+}
+
 .postbox .handlediv:focus {
 	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 	border-radius: 50%;

src/wp-admin/css/dashboard.css

@@ -67,11 +67,10 @@
 }
 
 #dashboard-widgets .postbox-container .empty-container {
-	outline: 2px dashed rgb(0, 0, 0, 0.15);
-	outline-offset: -2px;
+	box-sizing: border-box;
+	border: 1px dashed #c3c4c7;
 	border-radius: 8px;
 	height: 250px;
-	margin: 4px;
 }
 
 /* Only highlight drop zones when dragging. */
@@ -82,7 +81,7 @@
 }
 
 .is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {
-	background: rgb(0, 0, 0, 0.01);
+	background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
 }
 
 #dashboard-widgets .postbox-container .empty-container:after {
@@ -1385,6 +1384,19 @@ a.rsswidget {
 	}
 }
 
+.js.metabox-reordering-disabled #dashboard-widgets .postbox-container .empty-container {
+	display: none;
+	height: 0;
+	min-height: 0;
+	margin: 0;
+	outline: none;
+}
+
+.js.metabox-reordering-disabled #dashboard-widgets .postbox-container .empty-container:after {
+	content: none;
+	display: none;
+}
+
 @media screen and (max-width: 870px) {
 	/* @deprecated 5.9.0 -- Lists removed from welcome panel. */
 	.welcome-panel .welcome-panel-column li {

src/wp-admin/includes/ajax-actions.php

@@ -1856,6 +1856,30 @@ function wp_ajax_hidden_columns() {
 	wp_die( 1 );
 }
 
+/**
+ * Handles the meta box reordering setting via AJAX.
+ *
+ * @since 7.1.0
+ */
+function wp_ajax_meta_box_reorder() {
+	check_ajax_referer( 'screen-options-nonce', 'screenoptionnonce' );
+	$page = $_POST['page'] ?? '';
+
+	if ( sanitize_key( $page ) !== $page ) {
+		wp_die( 0 );
+	}
+
+	$user = wp_get_current_user();
+	if ( ! $user ) {
+		wp_die( -1 );
+	}
+
+	$enabled = isset( $_POST['enabled'] ) && '1' === (string) $_POST['enabled'];
+	update_user_meta( $user->ID, "metaboxreorder_$page", $enabled ? 'enabled' : 'disabled' );
+
+	wp_die( 1 );
+}
+
 /**
  * Handles updating whether to display the welcome panel via AJAX.
  *