WordPress.org
Get WordPress

Make WordPress Core

Ticket #39074: 39074.7.diff

File 39074.7.diff, 13.3 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 ff144777f9..a90974c047 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
     105                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     106                                return;
     107                        }
     108
     109                        if ( el.hasClass( 'handle-order-higher' ) && 'true' === el.attr( 'aria-disabled' ) ) {
     110                                wp.a11y.speak( __( 'The postbox is already on the first position.' ) );
     111                                return;
     112                        }
     113
     114                        if ( el.hasClass( 'handle-order-lower' ) && 'true' === el.attr( 'aria-disabled' ) ) {
     115                                wp.a11y.speak( __( 'The postbox is already on the last position.' ) );
     116                                return;
     117                        }
     118
     119                        if ( el.hasClass( 'handle-order-higher' ) ) {
     120                                closestPostbox.prev().before( closestPostbox );
     121                        }
     122
     123                        if ( el.hasClass( 'handle-order-lower' ) ) {
     124                                closestPostbox.next().after( closestPostbox );
     125                        }
     126
     127                        el.focus();
     128
     129                        postboxes.enable_disable_order_buttons();
     130
     131                        postboxes.save_order( postboxes.page );
     132                },
     133
     134                /**
     135                 * Adjusts the aria-disabled attribute for the up/down sorting arrows within the page.
     136                 *
     137                 * @return {void}
     138                 */
     139                enable_disable_order_buttons: function() {
     140
     141                        $( 'body' ).find( '.meta-box-sortables' ).each( function() {
     142                                // we need to count -1 since indexing starts from 0.
     143                                var postBoxesCount = $( this ).children( '.postbox' ).length - 1;
     144
     145                                $( this ).children( '.postbox' ).each( function() {
     146                                        var postboxIndex = $( this ).index();
     147
     148                                        if ( 0 === postboxIndex ) {
     149                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     150                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     151                                        } else if ( postBoxesCount === postboxIndex ) {
     152                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     153                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
     154                                        } else {
     155                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     156                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     157                                        }
     158                                });
     159                        });
     160                },
     161
     162                /**
     163                 * Handles clicks on the move between sortables icon inside the postbox heading.
     164                 *
     165                 * @since 5.4.0
     166                 * @memberof postboxes
     167                 *
     168                 * @return {void}
     169                 */
     170                handle_move: function() {
     171                        var el = $( this ),
     172                                closestPostbox = el.closest( '.postbox' ),
     173                                closestPostboxId = closestPostbox.attr( 'id' ),
     174                                closestSortables = el.closest( '.meta-box-sortables' ).attr( 'id' ),
     175                                sortablesArray = [],
     176                                goToSortables;
     177
     178                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     179                                return;
     180                        }
     181
     182                        // Get the list of sortables within page.
     183                        $( '.meta-box-sortables').each( function() {
     184                                sortablesArray.push( $( this ).attr( 'id' ) );
     185                        });
     186
     187                        // We need to count -1 since indexing starts from 0.
     188                        var sortablesArrayCount = sortablesArray.length - 1;
     189
     190                        // Find the index of the current sortables within the sortablesArray.
     191                        var sortablesIndex = $.inArray( closestSortables, sortablesArray );
     192
     193                        // If we're inside the last sortable we have to reset for a loop effect.
     194                        if ( sortablesIndex === sortablesArrayCount ) {
     195                                goToSortables = 0;
     196                        } else {
     197                                goToSortables = sortablesIndex + 1;
     198                        }
     199
     200                        // Find the ID of the next Sortables.
     201                        var goToSortablesId = sortablesArray[ goToSortables ];
     202
     203                        // Move the Postbox to the first position of the next Sortables.
     204                        var detachedPostbox = closestPostbox.detach();
     205
     206                        $( detachedPostbox ).prependTo( '#' + goToSortablesId );
     207
     208                        // Refresh marked areas.
     209                        postboxes._mark_area();
     210
     211                        el.focus();
     212
     213                        postboxes.enable_disable_order_buttons();
     214
     215                        postboxes.save_order( postboxes.page );
     216                },
     217
    91218                /**
    92219                 * Adds event handlers to all postboxes and screen option on the current page.
    93220                 *
    … …  
    102229                 * @return {void}
    103230                 */
    104231                add_postbox_toggles : function (page, args) {
    105                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     232                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     233                                $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' ),
     234                                $move_buttons = $( '.postbox .handle-move-between-sortables' );
    106235
    107236                        this.page = page;
    108237                        this.init( page, args );
    109238
    110239                        $handles.on( 'click.postboxes', this.handle_click );
    111240
     241                        $order_buttons.on( 'click.postboxes', this.handle_order );
     242
     243                        $move_buttons.on( 'click.postboxes', this.handle_move );
     244
    112245                        /**
    113246                         * @since 2.7.0
    114247                         */
    … …  
    244377                                                return;
    245378                                        }
    246379
     380                                        postboxes.enable_disable_order_buttons();
    247381                                        postboxes.save_order(page);
    248382                                },
    249383                                receive: function(e,ui) {
    … …  
    328462                                postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
    329463                        } );
    330464
    331                         $.post( ajaxurl, postVars );
     465                        $.post(
     466                                ajaxurl,
     467                                postVars,
     468                                function( response ) {
     469                                        if ( response.success ) {
     470                                                wp.a11y.speak( __( 'The postboxes order has been saved.' ) );
     471                                        }
     472                                }
     473                        );
    332474                },
    333475
    334476                /**

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

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index a8b8112b00..c041e25ae9 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-move-between-sortables,
     2067.postbox .handle-order-higher,
     2068.postbox .handle-order-lower,
    20602069.postbox .handlediv {
    20612070        display: none;
    2062         float: right;
    20632071        width: 36px;
    20642072        height: 36px;
    20652073        margin: 0;
    … … html.wp-toolbar { 
    20692077        cursor: pointer;
    20702078}
    20712079
     2080.js .postbox .handle-move-between-sortables,
     2081.js .postbox .handle-order-higher,
     2082.js .postbox .handle-order-lower,
    20722083.js .postbox .handlediv {
    2073         display: block;
     2084        display: inline-block;
    20742085}
    20752086
    20762087.sortable-placeholder {
    … … img { 
    30303041/* Metabox collapse arrow indicators */
    30313042.sidebar-name .toggle-indicator:before,
    30323043.js .meta-box-sortables .postbox .toggle-indicator:before,
     3044.js .meta-box-sortables .postbox .move-between-sortables-indicator:before,
     3045.js .meta-box-sortables .postbox .order-higher-indicator:before,
     3046.js .meta-box-sortables .postbox .order-lower-indicator:before,
    30333047.bulk-action-notice .toggle-indicator:before,
    30343048.privacy-text-box .toggle-indicator:before {
    30353049        content: "\f142";
    … … img { 
    30483062        content: "\f140";
    30493063}
    30503064
     3065.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before {
     3066        content: "\f503";
     3067}
     3068
     3069.js .postbox .handle-order-higher .order-higher-indicator:before {
     3070        content: "\f343";
     3071}
     3072
     3073.js .postbox .handle-order-lower .order-lower-indicator:before {
     3074        content: "\f347";
     3075}
     3076
     3077.js .postbox .handle-order-higher[aria-disabled=true] .order-higher-indicator:before,
     3078.js .postbox .handle-order-lower[aria-disabled=true] .order-lower-indicator:before {
     3079        cursor: default;
     3080        pointer-events: none;
     3081        opacity: .5;
     3082}
     3083
     3084.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before,
     3085.js .postbox .handle-order-higher .order-higher-indicator:before,
     3086.js .postbox .handle-order-lower .order-lower-indicator:before,
    30513087.js .postbox .handlediv .toggle-indicator:before {
    30523088        margin-top: 4px;
    30533089        width: 20px;
    … … img { 
    30553091        text-indent: -1px; /* account for the dashicon alignment */
    30563092}
    30573093
     3094.rtl.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before,
     3095.rtl.js .postbox .handle-order-higher .order-higher-indicator:before,
     3096.rtl.js .postbox .handle-order-lower .order-lower-indicator:before,
    30583097.rtl.js .postbox .handlediv .toggle-indicator:before {
    30593098        text-indent: 1px; /* account for the dashicon alignment */
    30603099}
    … … img { 
    30653104        color: #72777c;
    30663105}
    30673106
     3107.js .postbox .handle-move-between-sortables:focus,
     3108.js .postbox .handle-order-higher:focus,
     3109.js .postbox .handle-order-lower:focus,
    30683110.js .postbox .handlediv:focus {
    30693111        box-shadow: none;
    30703112        outline: none;
    30713113}
    30723114
     3115.js .postbox .handle-move-between-sortables:focus .move-between-sortables-indicator:before,
     3116.js .postbox .handle-order-higher:focus .order-higher-indicator:before,
     3117.js .postbox .handle-order-lower:focus .order-lower-indicator:before,
    30733118.js .postbox .handlediv:focus .toggle-indicator:before {
    30743119        box-shadow:
    30753120                0 0 0 1px #5b9dd9,
    … … img { 
    33753420.postbox .handlediv.button-link,
    33763421.item-edit,
    33773422.toggle-indicator,
     3423.move-between-sortables-indicator,
     3424.order-higher-indicator,
     3425.order-lower-indicator,
    33783426.accordion-section-title:after {
    33793427        color: #72777c;
    33803428}

  • 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 6f38d2221c..9b03941035 100644
    a b function wp_ajax_meta_box_order() { 
    19071907        $page = isset( $_POST['page'] ) ? $_POST['page'] : '';
    19081908
    19091909        if ( $page != sanitize_key( $page ) ) {
    1910                 wp_die( 0 );
     1910                wp_send_json_error();
    19111911        }
    19121912
    19131913        $user = wp_get_current_user();
    19141914        if ( ! $user ) {
    1915                 wp_die( -1 );
     1915                wp_send_json_error();
    19161916        }
    19171917
    19181918        if ( $order ) {
    … … 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 81e3d7d462..ffb5069f22 100644
    a b function do_meta_boxes( $screen, $context, $object ) { 
    12661266        if ( isset( $wp_meta_boxes[ $page ][ $context ] ) ) {
    12671267                foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) {
    12681268                        if ( isset( $wp_meta_boxes[ $page ][ $context ][ $priority ] ) ) {
     1269                                $total_postboxes = count( $wp_meta_boxes[ $page ][ $context ][ $priority ] );
     1270
    12691271                                foreach ( (array) $wp_meta_boxes[ $page ][ $context ][ $priority ] as $box ) {
    12701272                                        if ( false == $box || ! $box['title'] ) {
    12711273                                                continue;
    … … function do_meta_boxes( $screen, $context, $object ) { 
    13081310                                                        unset( $box['args']['__widget_basename'] );
    13091311                                                }
    13101312
     1313                                                $disable_order_higher = 'false';
     1314                                                $disable_order_lower  = 'false';
     1315
     1316                                                if ( 1 === $i ) {
     1317                                                        $disable_order_higher = 'true';
     1318                                                }
     1319
     1320                                                if ( $total_postboxes === $i ) {
     1321                                                        $disable_order_lower = 'true';
     1322                                                }
     1323
     1324                                                echo '<div class="handle-actions">';
     1325                                                echo '<button type="button" class="handle-move-between-sortables">';
     1326                                                echo '<span class="screen-reader-text">' . sprintf(
     1327                                                        /* translators: Meta box title. */
     1328                                                        __( 'Move %s panel to next area' ),
     1329                                                        $widget_title
     1330                                                ) . '</span>';
     1331                                                echo '<span class="move-between-sortables-indicator" aria-hidden="true"></span>';
     1332                                                echo '</button>';
     1333
     1334                                                echo '<button type="button" class="handle-order-higher" aria-disabled="' . $disable_order_higher . '">';
     1335                                                echo '<span class="screen-reader-text">' . sprintf(
     1336                                                        /* translators: Meta box title. */
     1337                                                        __( 'Order %s panel higher' ),
     1338                                                        $widget_title
     1339                                                ) . '</span>';
     1340                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
     1341                                                echo '</button>';
     1342
     1343                                                echo '<button type="button" class="handle-order-lower" aria-disabled="' . $disable_order_lower . '">';
     1344                                                echo '<span class="screen-reader-text">' . sprintf(
     1345                                                        /* translators: Meta box title. */
     1346                                                        __( 'Order %s panel lower' ),
     1347                                                        $widget_title
     1348                                                ) . '</span>';
     1349                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
     1350                                                echo '</button>';
     1351
    13111352                                                echo '<button type="button" class="handlediv" aria-expanded="true">';
    13121353                                                echo '<span class="screen-reader-text">' . sprintf(
    13131354                                                        /* translators: %s: Meta box title. */
    … … function do_meta_boxes( $screen, $context, $object ) { 
    13161357                                                ) . '</span>';
    13171358                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    13181359                                                echo '</button>';
     1360
     1361                                                echo '</div>';
    13191362                                        }
    13201363                                        echo '<h2 class="hndle">';
    13211364                                        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 f45471d7e1..7250bcf6fb 100644
    a b function wp_default_scripts( &$scripts ) { 
    15931593                        )
    15941594                );
    15951595
    1596                 $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y' ), false, 1 );
     1596                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y', 'wp-i18n' ), false, 1 );
    15971597
    15981598                $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
    15991599