Ticket #47131: 47131.3.diff

src/js/_enqueues/admin/common.js

@@ -1274 +1274 @@
                 init: function() {
                         var self = this;
 
+                        this.maybeDisableSortables = this.maybeDisableSortables.bind( this );
+
                         // Modify functionality based on custom activate/deactivate event
                         $document.on( 'wp-responsive-activate.wp-responsive', function() {
                                 self.activate();
@@ -1313 +1315 @@
                         $document.on( 'wp-window-resized.wp-responsive', $.proxy( this.trigger, this ) );
 
                         // This needs to run later as UI Sortable may be initialized later on $(document).ready().
-                        $window.on( 'load.wp-responsive', function() {
-                                var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
+                        $window.on( 'load.wp-responsive', this.maybeDisableSortables );
+                        $document.on( 'postbox-toggled', this.maybeDisableSortables );
 
-                                if ( width <= 782 ) {
-                                        self.disableSortables();
-                                }
-                        });
+                        // When the screen columns are changed, potentially disable sortables.
+                        $( '#screen-options-wrap input' ).on( 'click', this.maybeDisableSortables );
                 },
 
                 /**
+                 * Disable sortables if there is only one metabox, or the screen is in one column mode. Otherwise, enable sortables.
+                 *
+                 * @since 5.3.0
+                 *
+                 * @returns {void}
+                 */
+                maybeDisableSortables: function() {
+                        var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
+
+                        if (
+                                ( width <= 782 ) ||
+                                ( 1 >= $sortables.find( '.ui-sortable-handle:visible' ).length && jQuery( '.columns-prefs-1 input' ).prop( 'checked' ) )
+                        ) {
+                                this.disableSortables();
+                        } else {
+                                this.enableSortables();
+                        }
+                },
+
+                /**
                  * Changes properties of body and admin menu.
                  *
                  * Pins and unpins the menu and adds the auto-fold class to the body.
@@ -1356 +1376 @@
                 deactivate: function() {
                         setPinMenu();
                         $adminmenu.removeData('wp-responsive');
-                        this.enableSortables();
+
+                        this.maybeDisableSortables();
                 },
 
                 /**
@@ -1391 +1412 @@
                         } else {
                                 this.disableOverlay();
                         }
+
+                        this.maybeDisableSortables();
                 },
 
                 /**
@@ -1439 +1462 @@
                         if ( $sortables.length ) {
                                 try {
                                         $sortables.sortable( 'disable' );
+                                        $sortables.find( '.ui-sortable-handle' ).addClass( 'is-non-sortable' );
                                 } catch ( e ) {}
                         }
                 },
@@ -1454 +1478 @@
                         if ( $sortables.length ) {
                                 try {
                                         $sortables.sortable( 'enable' );
+                                        $sortables.find( '.ui-sortable-handle' ).removeClass( 'is-non-sortable' );
                                 } catch ( e ) {}
                         }
                 }

src/wp-admin/css/common.css

@@ -2051 +2051 @@
         cursor: move;
 }
 
+.js .widget .widget-top.is-non-sortable,
+.js .postbox .hndle.is-non-sortable {
+        cursor: auto;
+}
+
 .hndle a {
         font-size: 11px;
         font-weight: 400;