Changeset 49325

Timestamp:

10/27/2020 10:45:36 AM (4 years ago)

Author:

azaozz

Message:

Revert the improvenents to arranging of postboxes/metaboxes, [49179]. The current patch fixes about half a dozen problems, but seems more general improvements are needed to how Screen Options work.

See #50699.

Location:

trunk/src

Files:

• js/_enqueues/admin/postbox.js (modified) (24 diffs)
• js/_enqueues/wp/dashboard.js (modified) (1 diff)
• wp-admin/css/common.css (modified) (2 diffs)
• wp-admin/css/dashboard.css (modified) (6 diffs)
• wp-admin/css/edit.css (modified) (3 diffs)
• wp-admin/includes/template.php (modified) (2 diffs)

trunk/src/js/_enqueues/admin/postbox.js

@@ -10 +10 @@
 /* global ajaxurl, postboxes */
 
-( function( $ ) {
+(function($) {
     var $document = $( document ),
-        $body = $( 'body' ),
         __ = wp.i18n.__;
 
@@ -65 +64 @@
 
             if ( postboxes.page !== 'press-this' ) {
-                postboxes.save_state();
+                postboxes.save_state( postboxes.page );
             }
 
@@ -120 +119 @@
             }
 
+            // Move a postbox up.
             if ( button.hasClass( 'handle-order-higher' ) ) {
-                // Move a postbox up.
                 // If the box is first within a sortable area, move it to the previous sortable area.
                 if ( 0 === postboxWithinSortablesIndex ) {
@@ -131 +130 @@
                 button.focus();
                 postboxes.updateOrderButtonsProperties();
-                postboxes.save_order();
-            } else if ( button.hasClass( 'handle-order-lower' ) ) {
-                // Move a postbox down.
+                postboxes.save_order( postboxes.page );
+            }
+
+            // Move a postbox down.
+            if ( button.hasClass( 'handle-order-lower' ) ) {
                 // If the box is last within a sortable area, move it to the next sortable area.
                 if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
@@ -143 +144 @@
                 button.focus();
                 postboxes.updateOrderButtonsProperties();
-                postboxes.save_order();
-            }
+                postboxes.save_order( postboxes.page );
+            }
+
         },
 
@@ -190 +192 @@
             postboxes._mark_area();
             button.focus();
-            postboxes.save_order();
-        },
-
-        showArrangeArrows: function() {
-            $( '.postbox-arrange-arrow' )
+            postboxes.updateOrderButtonsProperties();
+            postboxes.save_order( postboxes.page );
+        },
+
+        /**
+         * Update the move buttons properties depending on the postbox position.
+         *
+         * @since 5.5.0
+         *
+         * @return {void}
+         */
+        updateOrderButtonsProperties: function() {
+            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' ),
+                moveUpButtons = $( '.handle-order-higher' ),
+                moveDownButtons = $( '.handle-order-lower' );
+
+            // Enable all buttons as a reset first.
+            moveUpButtons
                 .attr( 'aria-disabled', 'false' )
                 .removeClass( 'hidden' );
-
-            postboxes._mark_area();
-        },
-
-        hideArrangeArrows: function() {
-            $( '.postbox-arrange-arrow' )
-                .attr( 'aria-disabled', 'true' )
-                .addClass( 'hidden' );
-
-            postboxes._mark_area();
-        },
-
-        /**
-         * Update the move buttons properties depending on the postbox position.
-         *
-         * @since 5.5.0
-         *
-         * @return {void}
-         */
-        updateOrderButtonsProperties: function() {
-            var elements  = $( '.postbox:visible' ),
-                containers = $( '.meta-box-sortables:visible' )
-                    .not( '.unused-container' )
-                    .filter( function( i, container ) {
-                        if ( i > 0 && container.clientHeight === 0 ) {
-                            return false;
-                        }
-
-                        return true;
-                    } );
-
-            // When there's only one "sortables" area (e.g. in the block editor)
-            // and only one visible postbox, hide the buttons.
-            if ( containers.length === 1 && elements.length === 1 ) {
-                $( '.postbox-arrange-arrow' ).addClass( 'hidden' ).attr( 'aria-disabled', 'true' );
-                return;
-            }
-
-            // Reset.
-            if ( $body.hasClass( 'screen-options-open' ) ) {
-                $( '.postbox-arrange-arrow' ).removeClass( 'hidden' ).attr( 'aria-disabled', 'false' );
-            }
-
-            if ( elements.first().parent()[0] === containers.first()[0] ) {
-                // Set an aria-disabled=true attribute on the first visible "move higher" buttons.
-                elements.first().find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
-            }
-
-            if ( elements.last().parent()[0] === containers.last()[0] ) {
-                // Set an aria-disabled=true attribute on the last visible "move lower" buttons.
-                elements.last().find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
+            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 ) {
+                $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
+            }
+
+            // Set an aria-disabled=true attribute on the last visible "move" buttons.
+            if ( lastSortablesId === lastPostboxSortablesId ) {
+                $( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
             }
         },
@@ -264 +253 @@
          * @return {void}
          */
-        add_postbox_toggles: function ( page, args ) {
+        add_postbox_toggles : function (page, args) {
             var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
-                $orderButtons = $( '.postbox .postbox-arrange-arrow' );
+                $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
 
             this.page = page;
@@ -279 +268 @@
              * @since 2.7.0
              */
-            $( '.postbox .hndle a' ).on( 'click', function( event ) {
-                event.stopPropagation();
+            $('.postbox .hndle a').click( function(e) {
+                e.stopPropagation();
             });
 
@@ -295 +284 @@
              * @return {void}
              */
-            $( '.postbox a.dismiss' ).on( 'click.postboxes', function( event ) {
-                var hide_id = $( this ).parents( '.postbox' ).attr( 'id' ) + '-hide';
-
-                event.preventDefault();
-                $( '#' + hide_id ).prop( 'checked', false ).triggerHandler( 'click' );
+            $( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
+                var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
+                e.preventDefault();
+                $( '#' + hide_id ).prop('checked', false).triggerHandler('click');
             });
 
@@ -315 +303 @@
              * @return {void}
              */
-            $( '.hide-postbox-tog' ).on( 'click.postboxes', function() {
-                var $el = $( this ),
+            $('.hide-postbox-tog').bind('click.postboxes', function() {
+                var $el = $(this),
                     boxId = $el.val(),
                     $postbox = $( '#' + boxId );
@@ -322 +310 @@
                 if ( $el.prop( 'checked' ) ) {
                     $postbox.show();
-
                     if ( $.isFunction( postboxes.pbshow ) ) {
                         postboxes.pbshow( boxId );
@@ -328 +315 @@
                 } else {
                     $postbox.hide();
-
                     if ( $.isFunction( postboxes.pbhide ) ) {
                         postboxes.pbhide( boxId );
@@ -334 +320 @@
                 }
 
-                postboxes.save_state();
+                postboxes.save_state( page );
                 postboxes._mark_area();
 
@@ -351 +337 @@
              * @return {void}
              */
-            $( '.columns-prefs input[type="radio"]' ).on( 'click.postboxes', function() {
-                var number = parseInt( $( this ).val(), 10 );
-
-                if ( number ) {
-                    postboxes._pb_edit( number );
-                    postboxes.save_order();
-                }
-            });
-
-            // Enable dragging/arranging of postboxes and show drop placeholders when Screen Options tab is open.
-            // If there is no Screen Options tab on the screen, dragging/arranging is enabled on page load.
-            $document.on( 'screen:options:open', function() {
-                $body.addClass( 'screen-options-open' );
-                postboxes.initializeSortable();
-                postboxes.showArrangeArrows();
-            } ).on( 'screen:options:close', function() {
-                $body.removeClass( 'screen-options-open' );
-                $( '.meta-box-sortables' ).sortable( 'destroy' );
-                postboxes.hideArrangeArrows();
-            } );
-        },
-
-        initializeSortable: function() {
-            var hasScreenOptions = $document.find( '#screen-options-wrap' ).length > 0;
-
-            $( '.meta-box-sortables' ).sortable( {
+            $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
+                var n = parseInt($(this).val(), 10);
+
+                if ( n ) {
+                    postboxes._pb_edit(n);
+                    postboxes.save_order( page );
+                }
+            });
+        },
+
+        /**
+         * Initializes all the postboxes, mainly their sortable behaviour.
+         *
+         * @since 2.7.0
+         *
+         * @memberof postboxes
+         *
+         * @param {string} page The page we are currently on.
+         * @param {Object} [args={}] The arguments for the postbox initializer.
+         * @param {Function} args.pbshow A callback that is called when a postbox opens.
+         * @param {Function} args.pbhide A callback that is called when a postbox
+         *                               closes.
+         *
+         * @return {void}
+         */
+        init : function(page, args) {
+            var isMobile = $( document.body ).hasClass( 'mobile' ),
+                $handleButtons = $( '.postbox .handlediv' );
+
+            $.extend( this, args || {} );
+            $('.meta-box-sortables').sortable({
                 placeholder: 'sortable-placeholder',
                 connectWith: '.meta-box-sortables',
@@ -382 +373 @@
                 handle: '.hndle',
                 cursor: 'move',
-                delay: ( $body.hasClass( 'mobile' ) ? 200 : 0 ),
+                delay: ( isMobile ? 200 : 0 ),
                 distance: 2,
                 tolerance: 'pointer',
-                opacity: 0.65,
                 forcePlaceholderSize: true,
-                containment: '#wpwrap',
-
                 helper: function( event, element ) {
                     /* `helper: 'clone'` is equivalent to `return element.clone();`
@@ -399 +387 @@
                     return element.clone()
                         .find( ':input' )
-                        .attr( 'name', function( i, currentName ) {
-                            return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
-                        } )
+                            .attr( 'name', function( i, currentName ) {
+                                return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
+                            } )
                         .end();
                 },
+                opacity: 0.65,
                 start: function() {
-                    // Pretend the Screen Options tab exists.
-                    if ( ! hasScreenOptions ) {
-                        $body.addClass( 'screen-options-open' );
-                    }
-
+                    $( 'body' ).addClass( 'is-dragging-metaboxes' );
                     // Refresh the cached positions of all the sortable items so that the min-height set while dragging works.
                     $( '.meta-box-sortables' ).sortable( 'refreshPositions' );
@@ -416 +401 @@
                     var $el = $( this );
 
-                    if ( ! hasScreenOptions ) {
-                        $body.removeClass( 'screen-options-open' );
-                    }
+                    $( 'body' ).removeClass( 'is-dragging-metaboxes' );
 
                     if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
-                        $el.sortable( 'cancel' );
+                        $el.sortable('cancel');
                         return;
                     }
 
+                    postboxes.updateOrderButtonsProperties();
+                    postboxes.save_order(page);
+                },
+                receive: function(e,ui) {
+                    if ( 'dashboard_browser_nag' == ui.item[0].id )
+                        $(ui.sender).sortable('cancel');
+
                     postboxes._mark_area();
-                    postboxes.save_order();
-                },
-                receive: function( event, ui ) {
-                    if ( 'dashboard_browser_nag' == ui.item[0].id ) {
-                        $( ui.sender ).sortable( 'cancel' );
-                    }
-
                     $document.trigger( 'postbox-moved', ui.item );
                 }
             });
-        },
-
-        /**
-         * Initializes the postboxes, mainly their sortable behaviour.
-         *
-         * @since 2.7.0
-         *
-         * @memberof postboxes
-         *
-         * @param {string} page The page we are currently on. Not used, here for back-compat.
-         * @param {Object} [args={}] The arguments for the postbox initializer.
-         * @param {Function} args.pbshow A callback that is called when a postbox opens.
-         * @param {Function} args.pbhide A callback that is called when a postbox
-         *                               closes.
-         *
-         * @return {void}
-         */
-        init: function( page, args ) {
-            $.extend( this, args || {} );
-
-            if ( $body.hasClass( 'mobile' ) ) {
-                $body.on( 'orientationchange.postboxes', function() { postboxes._pb_change(); } );
+
+            if ( isMobile ) {
+                $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
                 this._pb_change();
             }
 
-            // Set the "arrange" (up/down) buttons properties on page load...
+            this._mark_area();
+
+            // Update the "move" buttons properties.
             this.updateOrderButtonsProperties();
-
-            // ...and keep updating it when postboxes are added or removed by using the checkboxes in Screen Options.
-            $document.on( 'postbox-toggled', this._mark_area );
+            $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
 
             // Set the handle buttons `aria-expanded` attribute initial value on page load.
-            $( '.postbox .handlediv' ).each( function () {
+            $handleButtons.each( function () {
                 var $el = $( this );
                 $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
             });
-
-            // Init sortables now if there is no Screen Options tab.
-            // Otherwise init when Screen Options are open.
-            if ( ! $document.find( '#screen-options-wrap' ).length ) {
-                this.initializeSortable();
-                this.showArrangeArrows();
-            }
         },
 
@@ -494 +451 @@
          * @return {void}
          */
-        save_state : function() {
+        save_state : function(page) {
             var closed, hidden;
 
             // Return on the nav-menus.php screen, see #35112.
-            if ( 'nav-menus' === postboxes.page ) {
+            if ( 'nav-menus' === page ) {
                 return;
             }
@@ -505 +462 @@
             hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
 
-            $.post( ajaxurl, {
+            $.post(ajaxurl, {
                 action: 'closed-postboxes',
                 closed: closed,
                 hidden: hidden,
-                closedpostboxesnonce: $( '#closedpostboxesnonce' ).val(),
-                page: postboxes.page
+                closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
+                page: page
             });
         },
@@ -523 +480 @@
          * @memberof postboxes
          *
-         * @return {void}
-         */
-        save_order : function() {
-            var postVars = {
+         * @param {string} page The page we are currently on.
+         * @return {void}
+         */
+        save_order : function(page) {
+            var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
+
+            postVars = {
                 action: 'meta-box-order',
-                _ajax_nonce: $( '#meta-box-order-nonce' ).val(),
-                page_columns: $( '.columns-prefs input:checked' ).val() || 0,
-                page: postboxes.page
+                _ajax_nonce: $('#meta-box-order-nonce').val(),
+                page_columns: page_columns,
+                page: page
             };
 
-            $( '.meta-box-sortables' ).each( function() {
+            $('.meta-box-sortables').each( function() {
                 postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
             } );
@@ -563 +523 @@
          */
         _mark_area : function() {
-            var elements = $( '.postbox:visible' ),
-                containers = $( '.meta-box-sortables:visible' );
-
-            containers.each( function( index, element ) {
-                var container = $( element );
-
-                if ( container.children( '.postbox:visible' ).length ) {
-                    container
-                        .removeClass( 'empty-container unused-container' )
-                        .removeAttr( 'data-emptystring' );
-                } else {
-                    container.addClass( 'empty-container' );
-
-                    if ( elements.length < 1 ) {
-                        // Edge case: all postboxes are disabled.
-                        // Mark the first container as empty, the rest as unused.
-                        if ( index === 0 ) {
-                            container.attr( 'data-emptystring', __( 'Enable screen elements from the Screen Options menu' ) );
-                        } else {
-                            container.addClass( 'unused-container' );
-                        }
-
-                        // Break the loop.
-                        return false;
-                    }
-
-                    container.attr( 'data-emptystring', __( 'Drag screen elements here' ) );
-
-                    if ( elements.length <= index ) {
-                        // If there are not enough elements (postboxes) to add to all containers,
-                        // (and this container is empty, as tested above)
-                        // mark it as "unused".
-                        container.addClass( 'unused-container' );
-                    } else {
-                        container.removeClass( 'unused-container' );
-                    }
-                }
-            });
-
-            // Refresh up/down arrows attributes.
-            if ( $body.hasClass( 'screen-options-open' ) ) {
-                postboxes.updateOrderButtonsProperties();
-            }
+            var visible = $( 'div.postbox:visible' ).length,
+                visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
+                areAllVisibleSortablesEmpty = true;
+
+            visibleSortables.each( function() {
+                var t = $(this);
+
+                if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
+                    t.removeClass('empty-container');
+                    areAllVisibleSortablesEmpty = false;
+                }
+                else {
+                    t.addClass('empty-container');
+                }
+            });
+
+            postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty );
+        },
+
+        /**
+         * Updates the text for the empty sortable areas on the Dashboard.
+         *
+         * @since 5.5.0
+         *
+         * @param {Object}  visibleSortables            The jQuery object representing the visible sortable areas.
+         * @param {boolean} areAllVisibleSortablesEmpty Whether all the visible sortable areas are "empty".
+         *
+         * @return {void}
+         */
+        updateEmptySortablesText: function( visibleSortables, areAllVisibleSortablesEmpty ) {
+            var isDashboard = $( '#dashboard-widgets' ).length,
+                emptySortableText = areAllVisibleSortablesEmpty ?  __( 'Add boxes from the Screen Options menu' ) : __( 'Drag boxes here' );
+
+            if ( ! isDashboard ) {
+                return;
+            }
+
+            visibleSortables.each( function() {
+                if ( $( this ).hasClass( 'empty-container' ) ) {
+                    $( this ).attr( 'data-emptyString', emptySortableText );
+                }
+            } );
         },
 
@@ -621 +580 @@
          * @return {void}
          */
-        _pb_edit : function( n ) {
-            var el = $( '.metabox-holder' ).get( 0 );
+        _pb_edit : function(n) {
+            var el = $('.metabox-holder').get(0);
 
             if ( el ) {
-                el.className = el.className.replace( /columns-\d+/, 'columns-' + n );
+                el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
             }
 
@@ -656 +615 @@
                 case 90:
                 case -90:
-                    if ( ! check.length || ! check.is( ':checked' ) ) {
-                        this._pb_edit( 2 );
-                    }
+                    if ( !check.length || !check.is(':checked') )
+                        this._pb_edit(2);
                     break;
                 case 0:
                 case 180:
                     if ( $( '#poststuff' ).length ) {
-                        this._pb_edit( 1 );
-                    } else if ( ! check.length || ! check.is( ':checked' ) ) {
-                        this._pb_edit( 2 );
+                        this._pb_edit(1);
+                    } else {
+                        if ( !check.length || !check.is(':checked') )
+                            this._pb_edit(2);
                     }
                     break;
@@ -693 +652 @@
     };
 
-}( jQuery ));
+}(jQuery));

trunk/src/js/_enqueues/wp/dashboard.js

@@ -181 +181 @@
         autoResizeTextarea();
     };
-
     window.quickPressLoad();
+
+    // Enable the dragging functionality of the widgets.
+    $( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
 
     /**

trunk/src/wp-admin/css/common.css

@@ -1987 +1987 @@
 }
 
-.postbox-container .meta-box-sortables {
+.metabox-holder .postbox-container .meta-box-sortables {
     /* The jQuery UI Sortables need some initial height to work properly. */
     min-height: 1px;
@@ -2016 +2016 @@
         min-height: 0;
     }
-
-    #wpbody-content .metabox-holder .postbox-container .empty-container:after {
-        display: none;
-    }
 }
 
 .js .widget .widget-top,
-.js.screen-options-open .postbox .hndle {
+.js .postbox .hndle {
     cursor: move;
 }

trunk/src/wp-admin/css/dashboard.css

@@ -50 +50 @@
 #dashboard-widgets .meta-box-sortables {
     display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
+    /* Required min-height to make the jQuery UI Sortable drop zone work. */
+    min-height: 100px;
     margin: 0 8px 20px;
 }
 
-/* The following four selectors also apply on the Edit Post screen. */
-.screen-options-open .meta-box-sortables {
+#dashboard-widgets .postbox-container .empty-container {
+    outline: 3px dashed #b4b9be;
+    height: 250px;
+}
+
+/* Only highlight drop zones when dragging and only in the 2 columns layout. */
+.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     outline: 3px dashed #606a73;
-    min-height: 250px;
-}
-
-.screen-options-open .postbox-container .empty-container {
-    outline-color: #b4b9be;
-}
-
-.postbox-container .empty-container:after {
+    /* Prevent margin on the child from collapsing with margin on the parent. */
+    display: flow-root;
+}
+
+#dashboard-widgets .postbox-container .empty-container:after {
     content: attr(data-emptystring);
     margin: auto;
@@ -79 +83 @@
 }
 
-.screen-options-open .postbox-container .empty-container:after {
-    display: block;
-}
 
 /* @todo: this was originally in this section, but likely belongs elsewhere */
@@ -1118 +1119 @@
     }
 
-    .screen-options-open #dashboard-widgets .meta-box-sortables {
+    .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
         min-height: 100px;
     }
@@ -1174 +1175 @@
         display: none;
     }
-/*
+
     #dashboard-widgets .postbox-container .empty-container:after {
         display: block;
     }
-*/
 }
 
@@ -1206 +1206 @@
         display: none;
     }
-/*
+
     #dashboard-widgets .postbox-container .empty-container:after {
         display: block;
     }
-*/
-}
-
-/* Always show the "Drag boxes here" CSS generated content on large screens.
+}
+
+/* Always show the "Drag boxes here" CSS generated content on large screens. */
 @media only screen and (min-width: 1801px) {
     #dashboard-widgets .postbox-container .empty-container:after {
@@ -1219 +1218 @@
     }
 }
-*/
+
 @media screen and (max-width: 870px) {
     .welcome-panel .welcome-panel-column,

trunk/src/wp-admin/css/edit.css

@@ -149 +149 @@
 /* Post Screen */
 
-.screen-options-open .metabox-holder .postbox-container .meta-box-sortables {
+/* Only highlight drop zones when dragging and only in the 2 columns layout. */
+.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables {
+    outline: 3px dashed #606a73;
+    /* Prevent margin on the child from collapsing with margin on the parent. */
+    display: flow-root;
+    /*
+     * This min-height is meant to limit jumpiness while dragging. It's equivalent
+     * to the minimum height of the sortable-placeholder which is given by the height
+     * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder
+     * bottom margin (20px) + 2 additional pixels to compensate browsers rounding.
+     */
+    min-height: 60px;
     margin-bottom: 20px;
-}
-
-.screen-options-open #postbox-container-2 #advanced-sortables.empty-container {
-    height: 0;
-    min-height: 0;
-    outline: none;
-}
-
-.screen-options-open #postbox-container-2 #advanced-sortables.empty-container:after {
-    display: none;
 }
 
@@ -1523 +1524 @@
     }
 
-    .screen-options-open.post-type-attachment #post-body .meta-box-sortables {
+    .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
         outline: none;
         min-height: 0;
@@ -1563 +1564 @@
 
     /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
-    .screen-options-open #poststuff #postbox-container-1 .empty-container,
-    .screen-options-open #poststuff #postbox-container-1 #side-sortables:empty,
-    .screen-options-open #poststuff #post-body.columns-2 #side-sortables,
-    .screen-options-open #poststuff #post-body.columns-2 .meta-box-sortables {
+    .is-dragging-metaboxes #poststuff #postbox-container-1 .empty-container,
+    .is-dragging-metaboxes #poststuff #postbox-container-1 #side-sortables:empty,
+    .is-dragging-metaboxes #poststuff #post-body.columns-2 #side-sortables,
+    .is-dragging-metaboxes #poststuff #post-body.columns-2 .meta-box-sortables {
         height: auto;
         min-height: 60px;

trunk/src/wp-admin/includes/template.php

@@ -1336 +1336 @@
                         echo '<div class="handle-actions hide-if-no-js">';
 
-                        echo '<button type="button" class="handle-order-higher postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
+                        echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
                         echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
                         echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
@@ -1346 +1346 @@
                         ) . '</span>';
 
-                        echo '<button type="button" class="handle-order-lower postbox-arrange-arrow hidden" aria-disabled="true" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
+                        echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
                         echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
                         echo '<span class="order-lower-indicator" aria-hidden="true"></span>';