Ticket #39074: 39074.2.diff

src/js/_enqueues/admin/postbox.js

@@ -41 +41 @@
                         var $el = $( this ),
                                 p = $el.parent( '.postbox' ),
                                 id = p.attr( 'id' ),
-                                ariaExpandedValue;
+                                ariaExpandedValue,
+                                closestPostbox = $( this ).closest( '.postbox' );
 
                         if ( 'dashboard_browser_nag' === id ) {
                                 return;
                         }
 
+                        if ( $el.hasClass( 'handle-order-prev' ) ) {
+                                // The handle order prev button was clicked.
+                                closestPostbox.prev().before( closestPostbox );
+                                postboxes.save_order( postboxes.page );
+                                $el.focus();
+                                return;
+                        }
+
+                        if ( $el.hasClass( 'handle-order-next' ) ) {
+                                // The handle order next button was clicked.
+                                closestPostbox.next().after( closestPostbox );
+                                postboxes.save_order( postboxes.page );
+                                $el.focus();
+                                return;
+                        }
+
                         p.toggleClass( 'closed' );
 
                         ariaExpandedValue = ! p.hasClass( 'closed' );
@@ -99 +116 @@
                  * @return {void}
                  */
                 add_postbox_toggles : function (page, args) {
-                        var $handles = $( '.postbox .hndle, .postbox .handlediv' );
+                        var $handles = $( '.postbox .hndle, .postbox .handlediv, .postbox .handle-order-next, .postbox .handle-order-prev' );
 
                         this.page = page;
                         this.init( page, args );
@@ -202 +219 @@
                  */
                 init : function(page, args) {
                         var isMobile = $( document.body ).hasClass( 'mobile' ),
-                                $handleButtons = $( '.postbox .handlediv' );
+                                $handleButtons = $( '.postbox .ui-actions .handlediv' );
 
                         $.extend( this, args || {} );
                         $('#wpbody-content').css('overflow','hidden');

src/wp-admin/css/common.css

@@ -2057 +2057 @@
         font-weight: 400;
 }
 
+.postbox .handle-order-prev,
+.postbox .handle-order-next,
 .postbox .handlediv {
         display: none;
         float: right;
@@ -2069 +2071 @@
         cursor: pointer;
 }
 
+.postbox .handle-order-prev,
+.postbox .handle-order-next,
 .js .postbox .handlediv {
-        display: block;
+        display: inline-block;
 }
 
 .sortable-placeholder {
@@ -3048 +3052 @@
         content: "\f140";
 }
 
+.js .postbox .handle-order-next .toggle-indicator:before {
+        content: "\f347";
+}
+
+.js .postbox .handle-order-prev .toggle-indicator:before {
+        content: "\f343";
+}
+
+.js .postbox .handle-order-next .toggle-indicator:before,
+.js .postbox .handle-order-prev .toggle-indicator:before,
 .js .postbox .handlediv .toggle-indicator:before {
         margin-top: 4px;
         width: 20px;
@@ -3055 +3069 @@
         text-indent: -1px; /* account for the dashicon alignment */
 }
 
+.rtl.js .postbox .handle-order-next .toggle-indicator:before,
+.rtl.js .postbox .handle-order-prev .toggle-indicator:before,
 .rtl.js .postbox .handlediv .toggle-indicator:before {
         text-indent: 1px; /* account for the dashicon alignment */
 }
@@ -3065 +3081 @@
         color: #72777c;
 }
 
+.js .postbox .handle-order-next:focus,
+.js .postbox .handle-order-prev:focus,
 .js .postbox .handlediv:focus {
         box-shadow: none;
         outline: none;
 }
 
+.js .postbox .handle-order-next:focus .toggle-indicator:before,
+.js .postbox .handle-order-prev:focus .toggle-indicator:before,
 .js .postbox .handlediv:focus .toggle-indicator:before {
         box-shadow:
                 0 0 0 1px #5b9dd9,

src/wp-admin/includes/template.php

@@ -1315 +1315 @@
                                                 ) . '</span>';
                                                 echo '<span class="toggle-indicator" aria-hidden="true"></span>';
                                                 echo '</button>';
+
+                                                echo '<button type="button" class="handle-order-next">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Move %s panel to next position' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
+
+                                                echo '<button type="button" class="handle-order-prev">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Move %s panel to previous position' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
                                         }
                                         echo '<h2 class="hndle">';
                                         if ( 'dashboard_php_nag' === $box['id'] ) {