WordPress.org
Get WordPress

Make WordPress Core

Ticket #39074: 39074.5.diff

File 39074.5.diff, 8.2 KB (added by xkon, 6 years 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..7bfd0852fb 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
     102                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     103                                return;
     104                        }
     105
     106                        if ( el.hasClass( 'handle-order-higher' ) ) {
     107                                closestPostbox.prev().before( closestPostbox );
     108                        }
     109
     110                        if ( el.hasClass( 'handle-order-lower' ) ) {
     111                                closestPostbox.next().after( closestPostbox );
     112                        }
     113
     114                        el.focus();
     115
     116                        postboxes.enable_disable_order_buttons();
     117
     118                        postboxes.save_order( postboxes.page );
     119                },
     120
     121                /**
     122                 * Adjusts the aria-disabled attribute for the up/down sorting arrows within the page.
     123                 *
     124                 * @return {void}
     125                 */
     126                enable_disable_order_buttons: function() {
     127
     128                        $( 'body' ).find( '.meta-box-sortables' ).each( function() {
     129                                // we need to count -1 since indexing starts from 0.
     130                                var postBoxesCount = $( this ).children( '.postbox' ).length - 1;
     131
     132                                $( this ).children( '.postbox' ).each( function() {
     133                                        var postboxIndex = $( this ).index();
     134
     135                                        if ( 0 === postboxIndex ) {
     136                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     137                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     138                                        } else if ( postBoxesCount === postboxIndex ) {
     139                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     140                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
     141                                        } else {
     142                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     143                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     144                                        }
     145                                });
     146                        });
     147                },
     148
    89149                /**
    90150                 * Adds event handlers to all postboxes and screen option on the current page.
    91151                 *
    … …  
    99159                 * @return {void}
    100160                 */
    101161                add_postbox_toggles : function (page, args) {
    102                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     162                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     163                                $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    103164
    104165                        this.page = page;
    105166                        this.init( page, args );
    106167
    107168                        $handles.on( 'click.postboxes', this.handle_click );
    108169
     170                        $order_buttons.on( 'click.postboxes', this.handle_order );
     171
    109172                        /**
    110173                         * @since 2.7.0
    111174                         */
    … …  
    240303                                                return;
    241304                                        }
    242305
     306                                        postboxes.enable_disable_order_buttons();
    243307                                        postboxes.save_order(page);
    244308                                },
    245309                                receive: function(e,ui) {

  • 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'] ) {