Changeset 48718 for branches/5.5

Timestamp:

08/04/2020 01:28:58 PM (4 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;
     }