Ticket #39074: 39074.12.diff

src/js/_enqueues/admin/postbox.js

@@ -203 +203 @@
                  * @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 ) {
                                 $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );

src/wp-admin/css/common.css

@@ -2011 +2011 @@
         flex-shrink: 0;
 }
 
+/* Post box order and toggle buttons. */
 .postbox .handle-order-higher,
 .postbox .handle-order-lower,
 .postbox .handlediv {
@@ -2028 +2029 @@
         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;