From 48837a340d19e4e272cf087b785c384217ab0ad6 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 4 Aug 2020 13:15:52 +0000 Subject: [PATCH] Accessibility: Administration: Address backward compatibility concerns for the sortable postboxes areas after [48340]. Fixes #49288. git-svn-id: https://develop.svn.wordpress.org/trunk@48717 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/admin/postbox.js | 10 +++++-- src/wp-admin/css/common.css | 46 +++++++++++++++++++++++++++++-- src/wp-admin/css/dashboard.css | 5 ++++ src/wp-admin/css/edit.css | 29 +++++++------------ 4 files changed, 66 insertions(+), 24 deletions(-) diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js index e67cc9946d..7ae595e3ef 100644 --- a/src/js/_enqueues/admin/postbox.js +++ b/src/js/_enqueues/admin/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 ) { diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 047a4d156c..083159a22f 100644 --- a/src/wp-admin/css/common.css +++ b/src/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 { - 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; } diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index f48320b5c4..cee5ef3ca7 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/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; diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index edc4525be5..a4b585f350 100644 --- a/src/wp-admin/css/edit.css +++ b/src/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 #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,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 {