Changeset 48718

Timestamp:

08/04/2020 01:28:58 PM (6 years ago)

Author:

afercia

Message:

Accessibility: Administration: Address backward compatibility concerns for the sortable postboxes areas after [48340].

Merges [48717] to the 5.5 branch.
Fixes #49288 for 5.5.

Location:

branches/5.5

Files:

• . (modified) (1 prop)
• src/js/_enqueues/admin/postbox.js (modified) (4 diffs)
• src/wp-admin/css/common.css (modified) (2 diffs)
• src/wp-admin/css/dashboard.css (modified) (1 diff)
• src/wp-admin/css/edit.css (modified) (3 diffs)

branches/5.5/src/js/_enqueues/admin/postbox.js

@@ -395 +395 @@
                                 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() {
@@ -521 +523 @@
                  */
                 _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;
 
@@ -527 +530 @@
                                 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}

branches/5.5/src/wp-admin/css/common.css

@@ -28 +28 @@
         width: 100%;
         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;
 }
 
@@ -1946 +1986 @@
 }
 
-.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;
 }

branches/5.5/src/wp-admin/css/dashboard.css

@@ -53 +53 @@
         min-height: 100px;
         margin: 0 8px 20px;
+}
+
+#dashboard-widgets .postbox-container .empty-container {
+        outline: 3px dashed #b4b9be;
+        height: 250px;
 }
 

branches/5.5/src/wp-admin/css/edit.css

@@ -149 +149 @@
 /* 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. */
@@ -1543 +1526 @@
         #poststuff #postbox-container-1 .empty-container,
         #poststuff #postbox-container-1 #side-sortables:empty {
-                outline: none;
                 height: 0;
                 min-height: 0;
@@ -1551 +1533 @@
                 min-height: 0;
                 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;
         }