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

Fixes #49288.

Built from https://develop.svn.wordpress.org/trunk@48717


git-svn-id: http://core.svn.wordpress.org/trunk@48479 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -30,6 +30,46 @@
 	overflow: visible;
 }
 
+/* inner 2 column liquid layout */
+
+.inner-sidebar {
+	float: left;
+	clear: left;
+	display: none;
+	width: 281px;
+	position: relative;
+}
+
+.columns-2 .inner-sidebar {
+	margin-left: 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: right;
+	clear: right;
+	width: 100%;
+	margin-left: -2000px;
+}
+
+.has-right-sidebar #post-body-content {
+	margin-left: 300px;
+	float: none;
+	width: auto;
+}
+
 /* 2 columns main area */
 
 #col-left {
@@ -1946,9 +1986,9 @@ html.wp-toolbar {
 	padding-top: 10px;
 }
 
-.metabox-holder .postbox-container .empty-container {
+.metabox-holder .postbox-container .meta-box-sortables {
-	outline: 3px dashed #b4b9be;
+	/* The jQuery UI Sortables need some initial height to work properly. */
-	height: 250px;
+	min-height: 1px;
 	position: relative;
 }
 

wp-admin/css/common.css

@@ -29,6 +29,46 @@
 	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,9 +1985,9 @@ html.wp-toolbar {
 	padding-top: 10px;
 }
 
-.metabox-holder .postbox-container .empty-container {
+.metabox-holder .postbox-container .meta-box-sortables {
-	outline: 3px dashed #b4b9be;
+	/* The jQuery UI Sortables need some initial height to work properly. */
-	height: 250px;
+	min-height: 1px;
 	position: relative;
 }
 

wp-admin/css/dashboard-rtl.css

@@ -55,6 +55,11 @@
 	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;

wp-admin/css/dashboard.css

@@ -54,6 +54,11 @@
 	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;

wp-admin/css/edit-rtl.css

@@ -149,25 +149,8 @@ body.post-new-php .submitbox .submitdelete {
 
 /* 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 .metabox-holder .postbox-container .meta-box-sortables {
-.is-dragging-metaboxes #post-body #normal-sortables,
-.is-dragging-metaboxes #post-body #advanced-sortables {
 	outline: 3px dashed #606a73;
 	/* Prevent margin on the child from collapsing with margin on the parent. */
 	display: flow-root;
@@ -1543,7 +1526,6 @@ table.links-table {
 
 	#poststuff #postbox-container-1 .empty-container,
 	#poststuff #postbox-container-1 #side-sortables:empty {
-		outline: none;
 		height: 0;
 		min-height: 0;
 	}
@@ -1553,6 +1535,15 @@ table.links-table {
 		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 {

wp-admin/css/edit.css

@@ -148,25 +148,8 @@ body.post-new-php .submitbox .submitdelete {
 
 /* 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 .metabox-holder .postbox-container .meta-box-sortables {
-.is-dragging-metaboxes #post-body #normal-sortables,
-.is-dragging-metaboxes #post-body #advanced-sortables {
 	outline: 3px dashed #606a73;
 	/* Prevent margin on the child from collapsing with margin on the parent. */
 	display: flow-root;
@@ -1542,7 +1525,6 @@ table.links-table {
 
 	#poststuff #postbox-container-1 .empty-container,
 	#poststuff #postbox-container-1 #side-sortables:empty {
-		outline: none;
 		height: 0;
 		min-height: 0;
 	}
@@ -1552,6 +1534,15 @@ table.links-table {
 		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 {

wp-admin/js/postbox.js

@@ -394,6 +394,8 @@
 				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,13 +522,14 @@
 		 * @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,6 +546,9 @@
 		 *
 		 * @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 ) {

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.6-alpha-48716';
+$wp_version = '5.6-alpha-48717';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.