WordPress.org
Get WordPress

Make WordPress Core

Ticket #39074: 39074.8.diff

File 39074.8.diff, 14.6 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 919ac92659..82c9b0644c 100644
    a b  
    1010/* global ajaxurl, postBoxL10n, postboxes */
    1111
    1212(function($) {
    13         var $document = $( document );
     13        var $document = $( document ),
     14                __ = wp.i18n.__;
    1415
    1516        /**
    1617         * This object contains all function to handle the behaviour of the post boxes. The post boxes are the boxes you see
    … …  
    4142                 */
    4243                handle_click : function () {
    4344                        var $el = $( this ),
    44                                 p = $el.parent( '.postbox' ),
     45                                p = $el.closest( '.postbox' ),
    4546                                id = p.attr( 'id' ),
    4647                                ariaExpandedValue;
    4748
    … …  
    8889                        $document.trigger( 'postbox-toggled', p );
    8990                },
    9091
     92                /**
     93                 * Handles clicks on the order up/down icons inside the postbox heading.
     94                 *
     95                 * @since 5.4.0
     96                 * @memberof postboxes
     97                 *
     98                 * @return {void}
     99                 */
     100                handle_order: function() {
     101                        var el = $( this ),
     102                                closestPostbox = el.closest( '.postbox' ),
     103                                closestPostboxId = closestPostbox.attr( 'id' ),
     104                                closestPostboxIndex = closestPostbox.index(),
     105                                closestPostboxesCount = closestPostbox.siblings().length;
     106
     107                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     108                                return;
     109                        }
     110
     111                        // If any of the order buttons are disabled do nothing.
     112                        if ( el.hasClass( 'handle-order-higher' ) && 'true' === el.attr( 'aria-disabled' ) ) {
     113                                wp.a11y.speak( __( 'The postbox is already on the first position.' ) );
     114                                return;
     115                        } else if ( el.hasClass( 'handle-order-lower' ) && 'true' === el.attr( 'aria-disabled' ) ) {
     116                                wp.a11y.speak( __( 'The postbox is already on the last position.' ) );
     117                                return;
     118                        }
     119
     120                        // Move the postboxes to the needed positions depending on their index within a sortable area.
     121                        if ( el.hasClass( 'handle-order-higher' ) && 0 === closestPostboxIndex ) {
     122                                postboxes.handle_order_between_sortables( 'previous', el );
     123                        } else if ( el.hasClass( 'handle-order-higher' ) ) {
     124                                closestPostbox.prev().before( closestPostbox );
     125
     126                                el.focus();
     127
     128                                postboxes.adjust_order_buttons_css( el );
     129
     130                                postboxes.save_order( postboxes.page );
     131                        } else if ( el.hasClass( 'handle-order-lower' ) && closestPostboxIndex === closestPostboxesCount ) {
     132                                postboxes.handle_order_between_sortables( 'next', el );
     133                        } else if ( el.hasClass( 'handle-order-lower' ) ) {
     134                                closestPostbox.next().after( closestPostbox );
     135
     136                                el.focus();
     137
     138                                postboxes.adjust_order_buttons_css( el );
     139
     140                                postboxes.save_order( postboxes.page );
     141                        }
     142
     143                },
     144
     145                /**
     146                 * Handles clicks on the move between sortables icon inside the postbox heading.
     147                 *
     148                 * @since 5.4.0
     149                 * @memberof postboxes
     150                 *
     151                 * @param {string} position "previous" or "next" sortables area.
     152                 * @param {object} el The element that was clicked.
     153                 *
     154                 * @return {void}
     155                 */
     156                handle_order_between_sortables : function( position, el ) {
     157                        var closestPostbox = el.closest( '.postbox' ),
     158                                closestPostboxId = closestPostbox.attr( 'id' ),
     159                                closestSortables = el.closest( '.meta-box-sortables' ).attr( 'id' ),
     160                                sortablesArray = [],
     161                                sortablesIndex,
     162                                goToSortables,
     163                                goToSortablesId,
     164                                detachedPostbox;
     165
     166                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     167                                return;
     168                        }
     169
     170                        // Get the list of sortables within page.
     171                        $( '.meta-box-sortables').each( function() {
     172                                sortablesArray.push( $( this ).attr( 'id' ) );
     173                        });
     174
     175                        // Find the index of the current sortables within the sortablesArray.
     176                        sortablesIndex = $.inArray( closestSortables, sortablesArray );
     177
     178                        // Depending on the position requested we need to get the id of the Sortables.
     179                        if ( 'previous' === position ) {
     180                                goToSortables = sortablesIndex - 1;
     181                        } else if ( 'next' === position ) {
     182                                goToSortables = sortablesIndex + 1;
     183                        }
     184
     185                        // Find the ID of the next Sortables.
     186                        goToSortablesId = sortablesArray[ goToSortables ];
     187
     188                        // Move the Postbox to the first position of the next Sortables.
     189                        detachedPostbox = closestPostbox.detach();
     190
     191                        if ( 'previous' === position ) {
     192                                $( detachedPostbox ).appendTo( '#' + goToSortablesId );
     193                        } else if ( 'next' === position ) {
     194                                $( detachedPostbox ).prependTo( '#' + goToSortablesId );
     195                        }
     196
     197                        // Refresh marked areas.
     198                        postboxes._mark_area();
     199
     200                        // Keep the buttons clicked focused.
     201                        el.focus();
     202
     203                        // Enable disable move buttons.
     204                        postboxes.adjust_order_buttons_css( el );
     205
     206                        // Save the order of postboxes.
     207                        postboxes.save_order( postboxes.page );
     208                },
     209
     210                /**
     211                 * Enables or disables the order buttons depending on the postbox index.
     212                 *
     213                 * @since 5.4.0
     214                 * @memberof postboxes
     215                 *
     216                 * @param {object} el The element that was clicked.
     217                 *
     218                 * @return {void}
     219                 */
     220                adjust_order_buttons_css : function ( el ) {
     221                        var firstPostbox = $( '.meta-box-sortables .postbox:not(.hide-if-js):first' ),
     222                                lastPostbox  = $( '.meta-box-sortables .postbox:not(.hide-if-js):last' ),
     223                                firstPostboxParentId = firstPostbox.parent().attr( 'id' ),
     224                                lastPostboxParentId = lastPostbox.parent().attr( 'id' ),
     225                                firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ),
     226                                lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' );
     227
     228                        // Enable all buttons as a reset first.
     229                        $( '.meta-box-sortables .postbox:not(.hide-if-js)' ).each( function() {
     230                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     231                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     232                        });
     233
     234                        // The first postbox of the first sorables should have the "higher" button disabled and higher enabled.
     235                        if ( firstPostboxParentId === firstSortablesId ) {
     236                                $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     237                                $( firstPostbox ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     238                        }
     239
     240                        // The last postbox of the last sortables should have the "lower" button disabled and higher enabled.
     241                        if ( lastPostboxParentId === lastSortablesId ) {
     242                                $( lastPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     243                                $( lastPostbox ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
     244                        }
     245
     246                        // Keep the opacity at 1 on the focused order buttons.
     247                        if ( $( el ).hasClass( 'handle-order-higher' ) || $( el ).hasClass( 'handle-order-lower' ) ) {
     248                                $( el ).parent().addClass( 'show' );
     249                        }
     250                },
     251
    91252                /**
    92253                 * Adds event handlers to all postboxes and screen option on the current page.
    93254                 *
    … …  
    102263                 * @return {void}
    103264                 */
    104265                add_postbox_toggles : function (page, args) {
    105                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     266                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     267                                $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    106268
    107269                        this.page = page;
    108270                        this.init( page, args );
    109271
    110272                        $handles.on( 'click.postboxes', this.handle_click );
    111273
     274                        /**
     275                         * Handles the order of the postboxes.
     276                         *
     277                         * @since 5.4.0
     278                         */
     279                        $order_buttons.on( 'click.postboxes', this.handle_order );
     280
    112281                        /**
    113282                         * @since 2.7.0
    114283                         */
    … …  
    244413                                                return;
    245414                                        }
    246415
     416                                        /**
     417                                         * Enable or disable the order buttons.
     418                                         *
     419                                         * @since 5.4.0
     420                                         */
     421                                        postboxes.adjust_order_buttons_css();
     422
    247423                                        postboxes.save_order(page);
    248424                                },
    249425                                receive: function(e,ui) {
    … …  
    262438
    263439                        this._mark_area();
    264440
     441                        /**
     442                         * Enable or disable the order buttons.
     443                         *
     444                         * @since 5.4.0
     445                         */
     446                        this.adjust_order_buttons_css();
     447
    265448                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
    266449                        $handleButtons.each( function () {
    267450                                var $el = $( this );
    268451                                $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
    269452                        });
     453
     454                        /**
     455                         * Change the opacity of order buttons.
     456                         *
     457                         * @since 5.4.0
     458                         */
     459                        $( 'body' ).on( 'keyup', function( e ) {
     460                                var keyCode = e.keyCode || e.which;
     461
     462                                // We only need to check on a Tab keyup.
     463                                if ( 9 === keyCode ) {
     464                                        var target = $( e.target );
     465
     466                                        $( '.handle-order-higher, .handle-order-lower' ).each( function() {
     467                                                $( this ).removeClass( 'show' );
     468                                        });
     469
     470                                        if ( $( target ).hasClass( 'handle-order-higher' ) || $( target ).hasClass( 'handle-order-lower' ) ) {
     471                                                $( target ).parent().addClass( 'show' );
     472                                        }
     473                                }
     474                        });
     475
     476                        $( '.meta-box-sortables .postbox' )
     477                                .mouseenter( function() {
     478                                        $( this ).find( '.order-buttons-group' ).addClass( 'show' );
     479                                })
     480                                .mouseleave( function() {
     481                                        $( this ).find( '.order-buttons-group' ).removeClass( 'show' );
     482                                });
    270483                },
    271484
    272485                /**
    … …  
    328541                                postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
    329542                        } );
    330543
    331                         $.post( ajaxurl, postVars );
     544                        $.post(
     545                                ajaxurl,
     546                                postVars,
     547                                function( response ) {
     548                                        if ( response.success ) {
     549                                                wp.a11y.speak( __( 'The postboxes order has been saved.' ) );
     550                                        }
     551                                }
     552                        );
    332553                },
    333554
    334555                /**

  • src/wp-admin/css/common.css 

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 5c97f14453..d3235b01f0 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 .order-buttons-group {
     2067        display: inline-block;
     2068        opacity: 0;
     2069        transition: all .1s ease;
     2070}
     2071
     2072.postbox .order-buttons-group.show {
     2073        opacity: 1;
     2074}
     2075
     2076.postbox .handle-order-higher,
     2077.postbox .handle-order-lower,
    20602078.postbox .handlediv {
    20612079        display: none;
    2062         float: right;
    20632080        width: 36px;
    20642081        height: 36px;
    20652082        margin: 0;
    … … html.wp-toolbar { 
    20692086        cursor: pointer;
    20702087}
    20712088
     2089.js .postbox .handle-order-higher,
     2090.js .postbox .handle-order-lower,
    20722091.js .postbox .handlediv {
    2073         display: block;
     2092        display: inline-block;
    20742093}
    20752094
    20762095.sortable-placeholder {
    … … img { 
    30313050/* Metabox collapse arrow indicators */
    30323051.sidebar-name .toggle-indicator:before,
    30333052.js .meta-box-sortables .postbox .toggle-indicator:before,
     3053.js .meta-box-sortables .postbox .order-higher-indicator:before,
     3054.js .meta-box-sortables .postbox .order-lower-indicator:before,
    30343055.bulk-action-notice .toggle-indicator:before,
    30353056.privacy-text-box .toggle-indicator:before {
    30363057        content: "\f142";
    … … img { 
    30493070        content: "\f140";
    30503071}
    30513072
     3073.js .postbox .handle-order-higher .order-higher-indicator:before {
     3074        content: "\f343";
     3075}
     3076
     3077.js .postbox .handle-order-lower .order-lower-indicator:before {
     3078        content: "\f347";
     3079}
     3080
     3081.js .postbox .handle-order-higher[aria-disabled=true] .order-higher-indicator:before,
     3082.js .postbox .handle-order-lower[aria-disabled=true] .order-lower-indicator:before {
     3083        cursor: default;
     3084        pointer-events: none;
     3085        opacity: .5;
     3086}
     3087
     3088.js .postbox .handle-order-higher .order-higher-indicator:before,
     3089.js .postbox .handle-order-lower .order-lower-indicator:before,
    30523090.js .postbox .handlediv .toggle-indicator:before {
    30533091        margin-top: 4px;
    30543092        width: 20px;
    … … img { 
    30563094        text-indent: -1px; /* account for the dashicon alignment */
    30573095}
    30583096
     3097.rtl.js .postbox .handle-order-higher .order-higher-indicator:before,
     3098.rtl.js .postbox .handle-order-lower .order-lower-indicator:before,
    30593099.rtl.js .postbox .handlediv .toggle-indicator:before {
    30603100        text-indent: 1px; /* account for the dashicon alignment */
    30613101}
    … … img { 
    30663106        color: #72777c;
    30673107}
    30683108
     3109.js .postbox .handle-order-higher:focus,
     3110.js .postbox .handle-order-lower:focus,
    30693111.js .postbox .handlediv:focus {
    30703112        box-shadow: none;
    30713113        outline: none;
    30723114}
    30733115
     3116.js .postbox .handle-order-higher:focus .order-higher-indicator:before,
     3117.js .postbox .handle-order-lower:focus .order-lower-indicator:before,
    30743118.js .postbox .handlediv:focus .toggle-indicator:before {
    30753119        box-shadow:
    30763120                0 0 0 1px #5b9dd9,
    … … img { 
    33763420.postbox .handlediv.button-link,
    33773421.item-edit,
    33783422.toggle-indicator,
     3423.order-higher-indicator,
     3424.order-lower-indicator,
    33793425.accordion-section-title:after {
    33803426        color: #72777c;
    33813427}

  • src/wp-admin/includes/ajax-actions.php 

    diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php
index ea33d9d792..036ce33fc4 100644
    a b function wp_ajax_meta_box_order() { 
    19231923                update_user_option( $user->ID, "screen_layout_$page", $page_columns, true );
    19241924        }
    19251925
    1926         wp_die( 1 );
     1926        wp_send_json_success();
    19271927}
    19281928
    19291929/**

  • src/wp-admin/includes/template.php 

    diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
index a6f74722cf..f5c8144156 100644
    a b function do_meta_boxes( $screen, $context, $object ) { 
    13081308                                                        unset( $box['args']['__widget_basename'] );
    13091309                                                }
    13101310
     1311                                                echo '<div class="handle-actions">';
     1312
     1313                                                echo '<div class="order-buttons-group">';
     1314
     1315                                                echo '<button type="button" class="handle-order-higher" aria-disabled="false">';
     1316                                                echo '<span class="screen-reader-text">' . sprintf(
     1317                                                        /* translators: Meta box title. */
     1318                                                        __( 'Order %s panel higher' ),
     1319                                                        $widget_title
     1320                                                ) . '</span>';
     1321                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
     1322                                                echo '</button>';
     1323
     1324                                                echo '<button type="button" class="handle-order-lower" aria-disabled="false">';
     1325                                                echo '<span class="screen-reader-text">' . sprintf(
     1326                                                        /* translators: Meta box title. */
     1327                                                        __( 'Order %s panel lower' ),
     1328                                                        $widget_title
     1329                                                ) . '</span>';
     1330                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
     1331                                                echo '</button>';
     1332
     1333                                                echo '</div>';
     1334
    13111335                                                echo '<button type="button" class="handlediv" aria-expanded="true">';
    13121336                                                echo '<span class="screen-reader-text">' . sprintf(
    13131337                                                        /* translators: %s: Meta box title. */
    … … function do_meta_boxes( $screen, $context, $object ) { 
    13161340                                                ) . '</span>';
    13171341                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    13181342                                                echo '</button>';
     1343
     1344                                                echo '</div>';
    13191345                                        }
    13201346                                        echo '<h2 class="hndle">';
    13211347                                        if ( 'dashboard_php_nag' === $box['id'] ) {

  • src/wp-includes/script-loader.php 

    diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index ef085b5c93..3789a5ab80 100644
    a b function wp_default_scripts( &$scripts ) { 
    13371337
    13381338                $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 );
    13391339
    1340                 $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 );
     1340                $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable', 'wp-a11y', 'wp-i18n' ), false, 1 );
    13411341                did_action( 'init' ) && $scripts->localize(
    13421342                        'postbox',
    13431343                        'postBoxL10n',