Ticket #49288: 49288.10.diff

src/js/_enqueues/admin/postbox.js

@@ -394 +394 @@
                                 opacity: 0.65,
                                 start: function() {
                                         $( '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' );
                                 },
                                 stop: function() {
                                         var $el = $( this );
@@ -520 +522 @@
                  * @return {void}
                  */
                 _mark_area : function() {
-                        var visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ),
+                        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 ( t.children('.postbox:visible').length ) {
+                                if ( visible == 1 || t.children( '.postbox:visible' ).length ) {
                                         t.removeClass('empty-container');
                                         areAllVisibleSortablesEmpty = false;
                                 }
@@ -543 +546 @@
                  *
                  * @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 ) {

src/wp-admin/css/common.css

@@ -29 +29 @@
         overflow: visible;
 }
 
+/* inner 2 column liquid layout */
+
+.inner-sidebar {
+        float: right;
+        clear: right;
+        display: none;
+        width: 281px;
+        position: relative;
+}
+
+.columns-2 .inner-sidebar {
+        margin-right: auto;
+        width: 286px;
+        display: block;
+}
+
+.inner-sidebar #side-sortables,
+.columns-2 .inner-sidebar #side-sortables {
+        min-height: 300px;
+        width: 280px;
+        padding: 0;
+}
+
+.has-right-sidebar .inner-sidebar {
+        display: block;
+}
+
+.has-right-sidebar #post-body {
+        float: left;
+        clear: left;
+        width: 100%;
+        margin-right: -2000px;
+}
+
+.has-right-sidebar #post-body-content {
+        margin-right: 300px;
+        float: none;
+        width: auto;
+}
+
 /* 2 columns main area */
 
 #col-left {
@@ -1945 +1985 @@
         padding-top: 10px;
 }
 
-.metabox-holder .postbox-container .empty-container {
-        outline: 3px dashed #b4b9be;
-        height: 250px;
+.metabox-holder .postbox-container .meta-box-sortables {
+        /* The jQuery UI Sortables need some initial height to work properly. */
+        min-height: 1px;
         position: relative;
 }
 

src/wp-admin/css/dashboard.css

@@ -54 +54 @@
         margin: 0 8px 20px;
 }
 
+#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;

src/wp-admin/css/edit.css

@@ -148 +148 @@
 
 /* Post Screen */
 
-/* Only target the sortables in the post screen excluding the ones in the Dashboard. */
-#post-body .meta-box-sortables {
-        /* Required min-height to make the jQuery UI Sortable drop zone work. */
-        min-height: 1px;
-}
-
-/* Resets height and outline inherited from common.css. */
-#post-body.columns-1 #side-sortables.empty-container,
-#post-body #normal-sortables.empty-container,
-#post-body #advanced-sortables.empty-container {
-        /* Sortables need some initial height to work correctly. */
-        height: 1px;
-        outline: none;
-}
-
 /* Only highlight drop zones when dragging and only in the 2 columns layout. */
-.is-dragging-metaboxes #post-body.columns-2 #side-sortables,
-.is-dragging-metaboxes #post-body #normal-sortables,
-.is-dragging-metaboxes #post-body #advanced-sortables {
+.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;
@@ -1542 +1525 @@
 
         #poststuff #postbox-container-1 .empty-container,
         #poststuff #postbox-container-1 #side-sortables:empty {
-                outline: none;
                 height: 0;
                 min-height: 0;
         }
@@ -1552 +1534 @@
                 width: auto;
         }
 
+        /* Increase min-height while dragging for the #side-sortables and any potential sortables area with custom ID. */
+        .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;
+        }
+
         /* hide the radio buttons for column prefs */
         .screen-layout,
         .columns-prefs {