diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js index a309929d37..b94cadaa3d 100644 --- a/src/js/_enqueues/admin/postbox.js +++ b/src/js/_enqueues/admin/postbox.js @@ -203,16 +203,30 @@ * @return {void} */ updateOrderButtonsProperties: function() { - var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ), - lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ), + var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ), + lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ), firstPostbox = $( '.postbox:visible:first' ), lastPostbox = $( '.postbox:visible:last' ), + firstPostboxId = firstPostbox.attr( 'id' ), + lastPostboxId = lastPostbox.attr( 'id' ), firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ), - lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ); + lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ), + moveUpButtons = $( '.handle-order-higher' ), + moveDownButtons = $( '.handle-order-lower' ); // Enable all buttons as a reset first. - $( '.handle-order-higher' ).attr( 'aria-disabled', 'false' ); - $( '.handle-order-lower' ).attr( 'aria-disabled', 'false' ); + moveUpButtons + .attr( 'aria-disabled', 'false' ) + .removeClass( 'hidden' ); + moveDownButtons + .attr( 'aria-disabled', 'false' ) + .removeClass( 'hidden' ); + + // When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons. + if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) { + moveUpButtons.addClass( 'hidden' ); + moveDownButtons.addClass( 'hidden' ); + } // Set an aria-disabled=true attribute on the first visible "move" buttons. if ( firstSortablesId === firstPostboxSortablesId ) { diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 7064e2c70e..0d1bd2937d 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2011,6 +2011,7 @@ html.wp-toolbar { flex-shrink: 0; } +/* Post box order and toggle buttons. */ .postbox .handle-order-higher, .postbox .handle-order-lower, .postbox .handlediv { @@ -2028,6 +2029,14 @@ html.wp-toolbar { color: #72777c; } +/* Post box order buttons in the block editor meta boxes area. */ +.edit-post-meta-boxes-area .postbox .handle-order-higher, +.edit-post-meta-boxes-area .postbox .handle-order-lower { + width: 44px; + height: 44px; + color: #191e23 +} + .postbox .handle-order-higher[aria-disabled="true"], .postbox .handle-order-lower[aria-disabled="true"] { cursor: default;