WordPress.org

Make WordPress Core

Ticket #39074: 39074.4.diff

File 39074.4.diff, 7.6 KB (added by xkon, 3 weeks ago)
  • src/js/_enqueues/admin/postbox.js

    diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js
    index 9789518b65..376c16bb77 100644
    a b  
    3939                 */
    4040                handle_click : function () {
    4141                        var $el = $( this ),
    42                                 p = $el.parent( '.postbox' ),
     42                                p = $el.closest( '.postbox' ),
    4343                                id = p.attr( 'id' ),
    4444                                ariaExpandedValue;
    4545
     
    8686                        $document.trigger( 'postbox-toggled', p );
    8787                },
    8888
     89                /**
     90                 * Handles clicks on the order up/down icons inside the postbox heading.
     91                 *
     92                 * @since 5.4.0
     93                 * @memberof postboxes
     94                 *
     95                 * @return {void}
     96                 */
     97                handle_order: function() {
     98                        var el = $( this ),
     99                                closestPostbox = el.closest( '.postbox' ),
     100                                closestPostboxId = closestPostbox.attr( 'id' ),
     101                                closestSortables = el.closest( '.meta-box-sortables' ),
     102                                // We have to count -1 since we are starting from 0.
     103                                closestPostboxesCount = closestSortables.children( '.postbox' ).length - 1;
     104
     105                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     106                                return;
     107                        }
     108
     109                        if ( el.hasClass( 'handle-order-higher' ) ) {
     110                                closestPostbox.prev().before( closestPostbox );
     111                        }
     112
     113                        if ( el.hasClass( 'handle-order-lower' ) ) {
     114                                closestPostbox.next().after( closestPostbox );
     115                        }
     116
     117                        el.focus();
     118
     119                        var postboxIndex = $( '.meta-box-sortables .postbox' ).index( closestPostbox );
     120
     121                        if ( 0 === postboxIndex || closestPostboxesCount === postboxIndex ) {
     122                                el.attr( 'aria-disabled', 'true' );
     123                                el.siblings( '.handle-order-higher, .handle-order-lower' ).attr( 'aria-disabled', 'false' );
     124                        } else {
     125                                el.attr( 'aria-disabled', 'false' );
     126                                el.siblings( '.handle-order-higher, .handle-order-lower' ).attr( 'aria-disabled', 'false' );
     127                        }
     128
     129                        postboxes.save_order( postboxes.page );
     130                },
     131
     132
    89133                /**
    90134                 * Adds event handlers to all postboxes and screen option on the current page.
    91135                 *
     
    99143                 * @return {void}
    100144                 */
    101145                add_postbox_toggles : function (page, args) {
    102                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     146                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     147                                $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    103148
    104149                        this.page = page;
    105150                        this.init( page, args );
    106151
    107152                        $handles.on( 'click.postboxes', this.handle_click );
    108153
     154                        $order_buttons.on( 'click.postboxes', this.handle_order );
     155
    109156                        /**
    110157                         * @since 2.7.0
    111158                         */
  • src/wp-admin/css/common.css

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
    index a8b8112b00..34ff1079c4 100644
    a b html.wp-toolbar { 
    20572057        font-weight: 400;
    20582058}
    20592059
     2060.postbox .handle-actions {
     2061        float: right;
     2062        display: inline-block;
     2063        height: 36px;
     2064}
     2065
     2066.postbox .handle-order-higher,
     2067.postbox .handle-order-lower,
    20602068.postbox .handlediv {
    20612069        display: none;
    2062         float: right;
    20632070        width: 36px;
    20642071        height: 36px;
    20652072        margin: 0;
    html.wp-toolbar { 
    20692076        cursor: pointer;
    20702077}
    20712078
     2079.js .postbox .handle-order-higher,
     2080.js .postbox .handle-order-lower,
    20722081.js .postbox .handlediv {
    2073         display: block;
     2082        display: inline-block;
    20742083}
    20752084
    20762085.sortable-placeholder {
    img { 
    30303039/* Metabox collapse arrow indicators */
    30313040.sidebar-name .toggle-indicator:before,
    30323041.js .meta-box-sortables .postbox .toggle-indicator:before,
     3042.js .meta-box-sortables .postbox .order-higher-indicator:before,
     3043.js .meta-box-sortables .postbox .order-lower-indicator:before,
    30333044.bulk-action-notice .toggle-indicator:before,
    30343045.privacy-text-box .toggle-indicator:before {
    30353046        content: "\f142";
    img { 
    30483059        content: "\f140";
    30493060}
    30503061
     3062.js .postbox .handle-order-higher .order-higher-indicator:before {
     3063        content: "\f343";
     3064}
     3065
     3066.js .postbox .handle-order-lower .order-lower-indicator:before {
     3067        content: "\f347";
     3068}
     3069
     3070.js .postbox .handle-order-higher[aria-disabled=true] .order-higher-indicator:before,
     3071.js .postbox .handle-order-lower[aria-disabled=true] .order-lower-indicator:before {
     3072        cursor: default;
     3073        pointer-events: none;
     3074        opacity: .5;
     3075}
     3076
     3077.js .postbox .handle-order-higher .order-higher-indicator:before,
     3078.js .postbox .handle-order-lower .order-lower-indicator:before,
    30513079.js .postbox .handlediv .toggle-indicator:before {
    30523080        margin-top: 4px;
    30533081        width: 20px;
    img { 
    30553083        text-indent: -1px; /* account for the dashicon alignment */
    30563084}
    30573085
     3086.rtl.js .postbox .handle-order-higher .order-higher-indicator:before,
     3087.rtl.js .postbox .handle-order-lower .order-lower-indicator:before,
    30583088.rtl.js .postbox .handlediv .toggle-indicator:before {
    30593089        text-indent: 1px; /* account for the dashicon alignment */
    30603090}
    img { 
    30653095        color: #72777c;
    30663096}
    30673097
     3098.js .postbox .handle-order-higher:focus,
     3099.js .postbox .handle-order-lower:focus,
    30683100.js .postbox .handlediv:focus {
    30693101        box-shadow: none;
    30703102        outline: none;
    30713103}
    30723104
     3105.js .postbox .handle-order-higher:focus .order-higher-indicator:before,
     3106.js .postbox .handle-order-lower:focus .order-lower-indicator:before,
    30733107.js .postbox .handlediv:focus .toggle-indicator:before {
    30743108        box-shadow:
    30753109                0 0 0 1px #5b9dd9,
    img { 
    33753409.postbox .handlediv.button-link,
    33763410.item-edit,
    33773411.toggle-indicator,
     3412.order-higher-indicator,
     3413.order-lower-indicator,
    33783414.accordion-section-title:after {
    33793415        color: #72777c;
    33803416}
  • src/wp-admin/includes/template.php

    diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
    index 3ed611d0c4..209344d4ff 100644
    a b function do_meta_boxes( $screen, $context, $object ) { 
    12641264        if ( isset( $wp_meta_boxes[ $page ][ $context ] ) ) {
    12651265                foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) {
    12661266                        if ( isset( $wp_meta_boxes[ $page ][ $context ][ $priority ] ) ) {
     1267                                $total_postboxes = count( $wp_meta_boxes[ $page ][ $context ][ $priority ] );
     1268
    12671269                                foreach ( (array) $wp_meta_boxes[ $page ][ $context ][ $priority ] as $box ) {
    12681270                                        if ( false == $box || ! $box['title'] ) {
    12691271                                                continue;
    function do_meta_boxes( $screen, $context, $object ) { 
    13061308                                                        unset( $box['args']['__widget_basename'] );
    13071309                                                }
    13081310
     1311                                                $disable_order_higher = 'false';
     1312                                                $disable_order_lower  = 'false';
     1313
     1314                                                if ( 1 === $i ) {
     1315                                                        $disable_order_higher = 'true';
     1316                                                }
     1317
     1318                                                if ( $total_postboxes === $i ) {
     1319                                                        $disable_order_lower = 'true';
     1320                                                }
     1321
     1322                                                echo '<div class="handle-actions">';
     1323                                                echo '<button type="button" class="handle-order-higher" aria-disabled="' . $disable_order_higher . '">';
     1324                                                echo '<span class="screen-reader-text">' . sprintf(
     1325                                                        /* translators: Meta box title. */
     1326                                                        __( 'Order %s panel higher' ),
     1327                                                        $widget_title
     1328                                                ) . '</span>';
     1329                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
     1330                                                echo '</button>';
     1331
     1332                                                echo '<button type="button" class="handle-order-lower" aria-disabled="' . $disable_order_lower . '">';
     1333                                                echo '<span class="screen-reader-text">' . sprintf(
     1334                                                        /* translators: Meta box title. */
     1335                                                        __( 'Order %s panel lower' ),
     1336                                                        $widget_title
     1337                                                ) . '</span>';
     1338                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
     1339                                                echo '</button>';
     1340
    13091341                                                echo '<button type="button" class="handlediv" aria-expanded="true">';
    13101342                                                echo '<span class="screen-reader-text">' . sprintf(
    13111343                                                        /* translators: %s: Meta box title. */
    function do_meta_boxes( $screen, $context, $object ) { 
    13141346                                                ) . '</span>';
    13151347                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    13161348                                                echo '</button>';
     1349
     1350                                                echo '</div>';
    13171351                                        }
    13181352                                        echo '<h2 class="hndle">';
    13191353                                        if ( 'dashboard_php_nag' === $box['id'] ) {