Ticket #39074: 39074.6.diff

src/js/_enqueues/admin/postbox.js

@@ -41 +41 @@
                  */
                 handle_click : function () {
                         var $el = $( this ),
-                                p = $el.parent( '.postbox' ),
+                                p = $el.closest( '.postbox' ),
                                 id = p.attr( 'id' ),
                                 ariaExpandedValue;
 
@@ -88 +88 @@
                         $document.trigger( 'postbox-toggled', p );
                 },
 
+                /**
+                 * Handles clicks on the order up/down icons inside the postbox heading.
+                 *
+                 * @since 5.4.0
+                 * @memberof postboxes
+                 *
+                 * @return {void}
+                 */
+                handle_order: function() {
+                        var el = $( this ),
+                                closestPostbox = el.closest( '.postbox' ),
+                                closestPostboxId = closestPostbox.attr( 'id' );
+
+                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
+                                return;
+                        }
+
+                        if ( el.hasClass( 'handle-order-higher' ) ) {
+                                closestPostbox.prev().before( closestPostbox );
+                        }
+
+                        if ( el.hasClass( 'handle-order-lower' ) ) {
+                                closestPostbox.next().after( closestPostbox );
+                        }
+
+                        el.focus();
+
+                        postboxes.enable_disable_order_buttons();
+
+                        postboxes.save_order( postboxes.page );
+                },
+
+                /**
+                 * Adjusts the aria-disabled attribute for the up/down sorting arrows within the page.
+                 *
+                 * @return {void}
+                 */
+                enable_disable_order_buttons: function() {
+
+                        $( 'body' ).find( '.meta-box-sortables' ).each( function() {
+                                // we need to count -1 since indexing starts from 0.
+                                var postBoxesCount = $( this ).children( '.postbox' ).length - 1;
+
+                                $( this ).children( '.postbox' ).each( function() {
+                                        var postboxIndex = $( this ).index();
+
+                                        if ( 0 === postboxIndex ) {
+                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
+                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
+                                        } else if ( postBoxesCount === postboxIndex ) {
+                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
+                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
+                                        } else {
+                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
+                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
+                                        }
+                                });
+                        });
+                },
+
+                /**
+                 * Handles clicks on the move between sortables icon inside the postbox heading.
+                 *
+                 * @since 5.4.0
+                 * @memberof postboxes
+                 *
+                 * @return {void}
+                 */
+                handle_move: function() {
+                        var el = $( this ),
+                                closestPostbox = el.closest( '.postbox' ),
+                                closestPostboxId = closestPostbox.attr( 'id' ),
+                                closestSortables = el.closest( '.meta-box-sortables' ).attr( 'id' ),
+                                sortablesArray = [],
+                                goToSortables;
+
+                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
+                                return;
+                        }
+
+                        // Get the list of sortables within page.
+                        $( '.meta-box-sortables').each( function() {
+                                sortablesArray.push( $( this ).attr( 'id' ) );
+                        });
+
+                        // We need to count -1 since indexing starts from 0.
+                        var sortablesArrayCount = sortablesArray.length - 1;
+
+                        // Find the index of the current sortables within the sortablesArray.
+                        var sortablesIndex = $.inArray( closestSortables, sortablesArray );
+
+                        // If we're inside the last sortable we have to reset for a loop effect.
+                        if ( sortablesIndex === sortablesArrayCount ) {
+                                goToSortables = 0;
+                        } else {
+                                goToSortables = sortablesIndex + 1;
+                        }
+
+                        // Find the ID of the next Sortables.
+                        var goToSortablesId = sortablesArray[ goToSortables ];
+
+                        // Move the Postbox to the first position of the next Sortables.
+                        var detachedPostbox = closestPostbox.detach();
+
+                        $( detachedPostbox ).prependTo( '#' + goToSortablesId );
+
+                        // Refresh marked areas.
+                        postboxes._mark_area();
+
+                        el.focus();
+
+                        postboxes.enable_disable_order_buttons();
+
+                        postboxes.save_order( postboxes.page );
+                },
+
                 /**
                  * Adds event handlers to all postboxes and screen option on the current page.
                  *
@@ -102 +218 @@
                  * @return {void}
                  */
                 add_postbox_toggles : function (page, args) {
-                        var $handles = $( '.postbox .hndle, .postbox .handlediv' );
+                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
+                                $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' ),
+                                $move_buttons = $( '.postbox .handle-move-between-sortables' );
 
                         this.page = page;
                         this.init( page, args );
 
                         $handles.on( 'click.postboxes', this.handle_click );
 
+                        $order_buttons.on( 'click.postboxes', this.handle_order );
+
+                        $move_buttons.on( 'click.postboxes', this.handle_move );
+
                         /**
                          * @since 2.7.0
                          */
@@ -244 +366 @@
                                                 return;
                                         }
 
+                                        postboxes.enable_disable_order_buttons();
                                         postboxes.save_order(page);
                                 },
                                 receive: function(e,ui) {

src/wp-admin/css/common.css

@@ -2057 +2057 @@
         font-weight: 400;
 }
 
+.postbox .handle-actions {
+        float: right;
+        display: inline-block;
+        height: 36px;
+}
+
+.postbox .handle-move-between-sortables,
+.postbox .handle-order-higher,
+.postbox .handle-order-lower,
 .postbox .handlediv {
         display: none;
-        float: right;
         width: 36px;
         height: 36px;
         margin: 0;
@@ -2069 +2077 @@
         cursor: pointer;
 }
 
+.js .postbox .handle-move-between-sortables,
+.js .postbox .handle-order-higher,
+.js .postbox .handle-order-lower,
 .js .postbox .handlediv {
-        display: block;
+        display: inline-block;
 }
 
 .sortable-placeholder {
@@ -3030 +3041 @@
 /* Metabox collapse arrow indicators */
 .sidebar-name .toggle-indicator:before,
 .js .meta-box-sortables .postbox .toggle-indicator:before,
+.js .meta-box-sortables .postbox .move-between-sortables-indicator:before,
+.js .meta-box-sortables .postbox .order-higher-indicator:before,
+.js .meta-box-sortables .postbox .order-lower-indicator:before,
 .bulk-action-notice .toggle-indicator:before,
 .privacy-text-box .toggle-indicator:before {
         content: "\f142";
@@ -3048 +3062 @@
         content: "\f140";
 }
 
+.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before {
+        content: "\f503";
+}
+
+.js .postbox .handle-order-higher .order-higher-indicator:before {
+        content: "\f343";
+}
+
+.js .postbox .handle-order-lower .order-lower-indicator:before {
+        content: "\f347";
+}
+
+.js .postbox .handle-order-higher[aria-disabled=true] .order-higher-indicator:before,
+.js .postbox .handle-order-lower[aria-disabled=true] .order-lower-indicator:before {
+        cursor: default;
+        pointer-events: none;
+        opacity: .5;
+}
+
+.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before,
+.js .postbox .handle-order-higher .order-higher-indicator:before,
+.js .postbox .handle-order-lower .order-lower-indicator:before,
 .js .postbox .handlediv .toggle-indicator:before {
         margin-top: 4px;
         width: 20px;
@@ -3055 +3091 @@
         text-indent: -1px; /* account for the dashicon alignment */
 }
 
+.rtl.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before,
+.rtl.js .postbox .handle-order-higher .order-higher-indicator:before,
+.rtl.js .postbox .handle-order-lower .order-lower-indicator:before,
 .rtl.js .postbox .handlediv .toggle-indicator:before {
         text-indent: 1px; /* account for the dashicon alignment */
 }
@@ -3065 +3104 @@
         color: #72777c;
 }
 
+.js .postbox .handle-move-between-sortables:focus,
+.js .postbox .handle-order-higher:focus,
+.js .postbox .handle-order-lower:focus,
 .js .postbox .handlediv:focus {
         box-shadow: none;
         outline: none;
 }
 
+.js .postbox .handle-move-between-sortables:focus .move-between-sortables-indicator:before,
+.js .postbox .handle-order-higher:focus .order-higher-indicator:before,
+.js .postbox .handle-order-lower:focus .order-lower-indicator:before,
 .js .postbox .handlediv:focus .toggle-indicator:before {
         box-shadow:
                 0 0 0 1px #5b9dd9,
@@ -3375 +3420 @@
 .postbox .handlediv.button-link,
 .item-edit,
 .toggle-indicator,
+.move-between-sortables-indicator,
+.order-higher-indicator,
+.order-lower-indicator,
 .accordion-section-title:after {
         color: #72777c;
 }

src/wp-admin/includes/template.php

@@ -1266 +1266 @@
         if ( isset( $wp_meta_boxes[ $page ][ $context ] ) ) {
                 foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) {
                         if ( isset( $wp_meta_boxes[ $page ][ $context ][ $priority ] ) ) {
+                                $total_postboxes = count( $wp_meta_boxes[ $page ][ $context ][ $priority ] );
+
                                 foreach ( (array) $wp_meta_boxes[ $page ][ $context ][ $priority ] as $box ) {
                                         if ( false == $box || ! $box['title'] ) {
                                                 continue;
@@ -1308 +1310 @@
                                                         unset( $box['args']['__widget_basename'] );
                                                 }
 
+                                                $disable_order_higher = 'false';
+                                                $disable_order_lower  = 'false';
+
+                                                if ( 1 === $i ) {
+                                                        $disable_order_higher = 'true';
+                                                }
+
+                                                if ( $total_postboxes === $i ) {
+                                                        $disable_order_lower = 'true';
+                                                }
+
+                                                echo '<div class="handle-actions">';
+                                                echo '<button type="button" class="handle-move-between-sortables">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Move %s panel to next area' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="move-between-sortables-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
+
+                                                echo '<button type="button" class="handle-order-higher" aria-disabled="' . $disable_order_higher . '">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Order %s panel higher' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
+
+                                                echo '<button type="button" class="handle-order-lower" aria-disabled="' . $disable_order_lower . '">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Order %s panel lower' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
+
                                                 echo '<button type="button" class="handlediv" aria-expanded="true">';
                                                 echo '<span class="screen-reader-text">' . sprintf(
                                                         /* translators: %s: Meta box title. */
@@ -1316 +1357 @@
                                                 ) . '</span>';
                                                 echo '<span class="toggle-indicator" aria-hidden="true"></span>';
                                                 echo '</button>';
+
+                                                echo '</div>';
                                         }
                                         echo '<h2 class="hndle">';
                                         if ( 'dashboard_php_nag' === $box['id'] ) {