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,11 @@ html.wp-toolbar {
 	width: 1.62rem;
 }
 
+.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 +3360,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.
  *

src/wp-admin/includes/class-wp-screen.php

@@ -1023,7 +1023,7 @@ public function show_screen_options() {
 		 */
 		$this->_screen_settings = apply_filters( 'screen_settings', $this->_screen_settings, $this );
 
-		if ( $this->_screen_settings || $this->_options ) {
+		if ( $this->_screen_settings || $this->_options || $this->show_meta_box_reorder_options() ) {
 			$show_screen = true;
 		}
 
@@ -1081,6 +1081,7 @@ public function render_screen_options( $options = array() ) {
 		$this->render_meta_boxes_preferences();
 		$this->render_list_table_columns_preferences();
 		$this->render_screen_layout();
+		$this->render_meta_box_reorder_options();
 		$this->render_per_page_options();
 		$this->render_view_mode();
 		echo $this->_screen_settings;
@@ -1120,8 +1121,8 @@ public function render_meta_boxes_preferences() {
 		<fieldset class="metabox-prefs">
 		<legend><?php _e( 'Screen elements' ); ?></legend>
 		<p>
-			<?php _e( 'Some screen elements can be shown or hidden by using the checkboxes.' ); ?>
-			<?php _e( 'Expand or collapse the elements by clicking on their headings, and arrange them by dragging their headings or by clicking on the up and down arrows.' ); ?>
+			<?php _e( 'Use the checkboxes to show or hide screen elements.' ); ?>
+			<?php _e( 'Expand or collapse screen elements by clicking their headings.' ); ?>
 		</p>
 		<div class="metabox-prefs-container">
 		<?php
@@ -1148,6 +1149,53 @@ public function render_meta_boxes_preferences() {
 		<?php
 	}
 
+	/**
+	 * Renders the option to enable or disable meta box reordering.
+	 *
+	 * @since 7.1.0
+	 */
+	public function render_meta_box_reorder_options() {
+		if ( ! $this->show_meta_box_reorder_options() ) {
+			return;
+		}
+
+		?>
+		<fieldset class="metabox-prefs meta-box-reorder-prefs">
+		<legend><?php _e( 'Reordering' ); ?></legend>
+		<p><?php _e( 'When enabled, boxes can be rearranged by dragging their headings or using the up and down controls.' ); ?></p>
+		<label for="meta-box-reorder">
+			<input class="meta-box-reorder-tog" name="meta-box-reorder" type="checkbox" id="meta-box-reorder" value="enabled" <?php checked( wp_is_meta_box_reordering_enabled( $this ) ); ?> />
+			<?php _e( 'Enable box reordering' ); ?>
+		</label>
+		</fieldset>
+		<?php
+	}
+
+	/**
+	 * Determines whether to show the meta box reordering option.
+	 *
+	 * @since 7.1.0
+	 *
+	 * @global array $wp_meta_boxes Global meta box state.
+	 *
+	 * @return bool Whether to show the option.
+	 */
+	private function show_meta_box_reorder_options() {
+		global $wp_meta_boxes;
+
+		$show_reorder_option = ! empty( $wp_meta_boxes[ $this->id ] );
+
+		/**
+		 * Filters whether to show the meta box reordering option.
+		 *
+		 * @since 7.1.0
+		 *
+		 * @param bool      $show_reorder_option Whether to show the option.
+		 * @param WP_Screen $screen              WP_Screen object.
+		 */
+		return (bool) apply_filters( 'screen_options_show_meta_box_reorder', $show_reorder_option, $this );
+	}
+
 	/**
 	 * Renders the list table columns preferences.
 	 *