diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js index 2fc0c38828..049b7de2e0 100644 --- a/src/js/_enqueues/admin/common.js +++ b/src/js/_enqueues/admin/common.js @@ -1274,6 +1274,8 @@ $document.ready( function() { 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,13 +1315,31 @@ $document.ready( function() { $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(); + } }, /** @@ -1356,7 +1376,8 @@ $document.ready( function() { deactivate: function() { setPinMenu(); $adminmenu.removeData('wp-responsive'); - this.enableSortables(); + + this.maybeDisableSortables(); }, /** @@ -1391,6 +1412,8 @@ $document.ready( function() { } else { this.disableOverlay(); } + + this.maybeDisableSortables(); }, /** @@ -1439,6 +1462,7 @@ $document.ready( function() { if ( $sortables.length ) { try { $sortables.sortable( 'disable' ); + $sortables.find( '.ui-sortable-handle' ).addClass( 'is-non-sortable' ); } catch ( e ) {} } }, @@ -1454,6 +1478,7 @@ $document.ready( function() { if ( $sortables.length ) { try { $sortables.sortable( 'enable' ); + $sortables.find( '.ui-sortable-handle' ).removeClass( 'is-non-sortable' ); } catch ( e ) {} } } diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index fbf9f8d58e..66e3646cca 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2041,6 +2041,11 @@ html.wp-toolbar { 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;