WordPress.org
Get WordPress

Make WordPress Core

Ticket #39074: 39074.9.diff

File 39074.9.diff, 16.5 KB (added by afercia, 5 years ago)

  • src/js/_enqueues/admin/postbox.js

     
    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
    … …  
    5051                        }
    5152
    5253                        p.toggleClass( 'closed' );
    53 
    5454                        ariaExpandedValue = ! p.hasClass( 'closed' );
    5555
    5656                        if ( $el.hasClass( 'handlediv' ) ) {
    … …  
    8989                },
    9090
    9191                /**
     92                 * Handles clicks on the move up/down buttons.
     93                 *
     94                 * @since 5.5.0
     95                 *
     96                 * @return {void}
     97                 */
     98                handleOrder: function() {
     99                        var button = $( this ),
     100                                postbox = button.closest( '.postbox' ),
     101                                postboxId = postbox.attr( 'id' ),
     102                                postboxesWithinSortables = postbox.closest( '.meta-box-sortables' ).find( '.postbox:visible' ),
     103                                postboxesWithinSortablesCount = postboxesWithinSortables.length,
     104                                postboxWithinSortablesIndex = postboxesWithinSortables.index( postbox ),
     105                                firstOrLastPositionMessage;
     106
     107                        if ( 'dashboard_browser_nag' === postboxId ) {
     108                                return;
     109                        }
     110
     111                        // If on the first or last position, do nothing and send an audible message to screen reader users.
     112                        if ( 'true' === button.attr( 'aria-disabled' ) ) {
     113                                firstOrLastPositionMessage = button.hasClass( 'handle-order-higher' ) ?
     114                                        __( 'The box is on the first position' ) :
     115                                        __( 'The box is on the last position' );
     116
     117                                wp.a11y.speak( firstOrLastPositionMessage );
     118                                return;
     119                        }
     120
     121                        // Move a postbox up.
     122                        if ( button.hasClass( 'handle-order-higher' ) ) {
     123                                // If the box is first within a sortable area, move it to the previous sortable area.
     124                                if ( 0 === postboxWithinSortablesIndex ) {
     125                                        postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
     126                                        return;
     127                                }
     128
     129                                postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
     130                                button.focus();
     131                                postboxes.updateOrderButtonsProperties();
     132                                postboxes.save_order( postboxes.page );
     133                        }
     134
     135                        // Move a postbox down.
     136                        if ( button.hasClass( 'handle-order-lower' ) ) {
     137                                // If the box is last within a sortable area, move it to the next sortable area.
     138                                if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
     139                                        postboxes.handleOrderBetweenSortables( 'next', button, postbox );
     140                                        return;
     141                                }
     142
     143                                postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
     144                                button.focus();
     145                                postboxes.updateOrderButtonsProperties();
     146                                postboxes.save_order( postboxes.page );
     147                        }
     148
     149                },
     150
     151                /**
     152                 * Moves postboxes between the sortables areas.
     153                 *
     154                 * @since 5.5.0
     155                 *
     156                 * @param {string} position The "previous" or "next" sortables area.
     157                 * @param {object} button   The jQuery object representing the button that was clicked.
     158                 * @param {object} postbox  The jQuery object representing the postbox to be moved.
     159                 *
     160                 * @return {void}
     161                 */
     162                handleOrderBetweenSortables: function( position, button, postbox ) {
     163                        var closestSortablesId = button.closest( '.meta-box-sortables' ).attr( 'id' ),
     164                                sortablesIds = [],
     165                                sortablesIndex,
     166                                detachedPostbox;
     167
     168                        // Get the list of sortables within the page.
     169                        $( '.meta-box-sortables:visible' ).each( function() {
     170                                sortablesIds.push( $( this ).attr( 'id' ) );
     171                        });
     172
     173                        // Return if there's only one visible sortables area, e.g. in the block editor page.
     174                        if ( 1 === sortablesIds.length ) {
     175                                return;
     176                        }
     177
     178                        // Find the index of the current sortables area within all the sortable areas.
     179                        sortablesIndex = $.inArray( closestSortablesId, sortablesIds );
     180                        // Detach the postbox to be moved.
     181                        detachedPostbox = postbox.detach();
     182
     183                        // Move the detached postbox to its new position.
     184                        if ( 'previous' === position ) {
     185                                $( detachedPostbox ).appendTo( '#' + sortablesIds[ sortablesIndex - 1 ] );
     186                        }
     187
     188                        if ( 'next' === position ) {
     189                                $( detachedPostbox ).prependTo( '#' + sortablesIds[ sortablesIndex + 1 ] );
     190                        }
     191
     192                        postboxes._mark_area();
     193                        button.focus();
     194                        postboxes.updateOrderButtonsProperties();
     195                        postboxes.save_order( postboxes.page );
     196                },
     197
     198                /**
     199                 * Update the move buttons properties depending on the postbox position.
     200                 *
     201                 * @since 5.5.0
     202                 *
     203                 * @return {void}
     204                 */
     205                updateOrderButtonsProperties: function() {
     206                        var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ),
     207                                lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ),
     208                                firstPostbox = $( '.postbox:visible:first' ),
     209                                lastPostbox = $( '.postbox:visible:last' ),
     210                                firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
     211                                lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' );
     212
     213                        // Enable all buttons as a reset first.
     214                        $( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     215                        $( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     216
     217                        // Set an aria-disabled=true attribute on the first visible "move" buttons.
     218                        if ( firstSortablesId === firstPostboxSortablesId ) {
     219                                $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     220                        }
     221
     222                        // Set an aria-disabled=true attribute on the last visible "move" buttons.
     223                        if ( lastSortablesId === lastPostboxSortablesId ) {
     224                                $( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
     225                        }
     226                },
     227
     228                /**
    92229                 * Adds event handlers to all postboxes and screen option on the current page.
    93230                 *
    94231                 * @since 2.7.0
    … …  
    102239                 * @return {void}
    103240                 */
    104241                add_postbox_toggles : function (page, args) {
    105                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     242                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     243                                $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    106244
    107245                        this.page = page;
    108246                        this.init( page, args );
    … …  
    109247
    110248                        $handles.on( 'click.postboxes', this.handle_click );
    111249
     250                        // Handle the order of the postboxes.
     251                        $orderButtons.on( 'click.postboxes', this.handleOrder );
     252
    112253                        /**
    113254                         * @since 2.7.0
    114255                         */
    … …  
    122263                         * Event handler for the postbox dismiss button. After clicking the button
    123264                         * the postbox will be hidden.
    124265                         *
     266                         * As of WordPress 5.5, this is only used for the browser update nag.
     267                         *
    125268                         * @since 3.2.0
    126269                         *
    127270                         * @return {void}
    … …  
    243386                                                return;
    244387                                        }
    245388
     389                                        postboxes.updateOrderButtonsProperties();
    246390                                        postboxes.save_order(page);
    247391                                },
    248392                                receive: function(e,ui) {
    … …  
    261405
    262406                        this._mark_area();
    263407
     408                        // Update the "move" buttons properties.
     409                        this.updateOrderButtonsProperties();
     410                        $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
     411
    264412                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
    265413                        $handleButtons.each( function () {
    266414                                var $el = $( this );
    267                                 $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
     415                                $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
    268416                        });
    269417                },
    270418
    … …  
    327475                                postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
    328476                        } );
    329477
    330                         $.post( ajaxurl, postVars );
     478                        $.post(
     479                                ajaxurl,
     480                                postVars,
     481                                function( response ) {
     482                                        if ( response.success ) {
     483                                                wp.a11y.speak( __( 'The boxes order has been saved.' ) );
     484                                        }
     485                                }
     486                        );
    331487                },
    332488
    333489                /**

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

     
    767767        color: #23282d;
    768768}
    769769
    770 .postbox .hndle,
    771770.stuffbox .hndle {
    772771        border-bottom: 1px solid #ccd0d4;
    773772}
    … …  
    20362035        cursor: auto;
    20372036}
    20382037
     2038/* Configurable dashboard widgets "Configure" edit-box link. */
    20392039.hndle a {
    2040         font-size: 11px;
     2040        font-size: 12px;
    20412041        font-weight: 400;
    20422042}
    20432043
     2044.postbox-header {
     2045        display: flex;
     2046        align-items: center;
     2047        justify-content: space-between;
     2048        border-bottom: 1px solid #ccd0d4;
     2049}
     2050
     2051.postbox-header .hndle {
     2052        flex-grow: 1;
     2053        /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
     2054        display: flex;
     2055        justify-content: space-between;
     2056        align-items: center;
     2057}
     2058
     2059.postbox-header .handle-actions {
     2060        flex-shrink: 0;
     2061}
     2062
     2063.postbox .handle-order-higher,
     2064.postbox .handle-order-lower,
    20442065.postbox .handlediv {
    2045         display: none;
    2046         float: right;
    20472066        width: 36px;
    20482067        height: 36px;
    20492068        margin: 0;
    … …  
    20532072        cursor: pointer;
    20542073}
    20552074
    2056 .js .postbox .handlediv {
    2057         display: block;
     2075.postbox .handle-order-higher,
     2076.postbox .handle-order-lower {
     2077        color: #72777c;
    20582078}
    20592079
     2080.postbox .handle-order-higher[aria-disabled="true"],
     2081.postbox .handle-order-lower[aria-disabled="true"] {
     2082        cursor: default;
     2083        color: #a0a5aa;
     2084}
     2085
    20602086.sortable-placeholder {
    20612087        border: 1px dashed #b4b9be;
    20622088        margin-bottom: 20px;
    … …  
    30023028}
    30033029
    30043030/* Metabox collapse arrow indicators */
    3005 .sidebar-name .toggle-indicator:before,
    3006 .js .meta-box-sortables .postbox .toggle-indicator:before,
    3007 .bulk-action-notice .toggle-indicator:before,
    3008 .privacy-text-box .toggle-indicator:before {
     3031.sidebar-name .toggle-indicator::before,
     3032.meta-box-sortables .postbox .toggle-indicator::before,
     3033.meta-box-sortables .postbox .order-higher-indicator::before,
     3034.meta-box-sortables .postbox .order-lower-indicator::before,
     3035.bulk-action-notice .toggle-indicator::before,
     3036.privacy-text-box .toggle-indicator::before {
    30093037        content: "\f142";
    30103038        display: inline-block;
    30113039        font: normal 20px/1 dashicons;
    … …  
    30153043        text-decoration: none;
    30163044}
    30173045
    3018 .js .widgets-holder-wrap.closed .toggle-indicator:before,
    3019 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
    3020 .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before,
    3021 .privacy-text-box.closed .toggle-indicator:before {
     3046.js .widgets-holder-wrap.closed .toggle-indicator::before,
     3047.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
     3048.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
     3049.privacy-text-box.closed .toggle-indicator::before {
    30223050        content: "\f140";
    30233051}
    30243052
    3025 .js .postbox .handlediv .toggle-indicator:before {
    3026         margin-top: 4px;
     3053.postbox .handle-order-higher .order-higher-indicator::before {
     3054        content: "\f343";
     3055        color: inherit;
     3056}
     3057
     3058.postbox .handle-order-lower .order-lower-indicator::before {
     3059        content: "\f347";
     3060        color: inherit;
     3061}
     3062
     3063.postbox .handle-order-higher .order-higher-indicator::before,
     3064.postbox .handle-order-lower .order-lower-indicator::before,
     3065.postbox .handlediv .toggle-indicator::before {
    30273066        width: 20px;
    30283067        border-radius: 50%;
    3029         text-indent: -1px; /* account for the dashicon alignment */
    30303068}
    30313069
    3032 .rtl.js .postbox .handlediv .toggle-indicator:before {
    3033         text-indent: 1px; /* account for the dashicon alignment */
     3070.postbox .handlediv .toggle-indicator::before {
     3071        text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
    30343072}
    30353073
    3036 .bulk-action-notice .toggle-indicator:before {
     3074.rtl .postbox .handlediv .toggle-indicator::before {
     3075        text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
     3076}
     3077
     3078.bulk-action-notice .toggle-indicator::before {
    30373079        line-height: 16px;
    30383080        vertical-align: top;
    30393081        color: #72777c;
    30403082}
    30413083
    3042 .js .postbox .handlediv:focus {
     3084.postbox .handle-order-higher:focus,
     3085.postbox .handle-order-lower:focus,
     3086.postbox .handlediv:focus {
    30433087        box-shadow: none;
    30443088        outline: none;
    30453089}
    30463090
    3047 .js .postbox .handlediv:focus .toggle-indicator:before {
     3091.postbox .handle-order-higher:focus .order-higher-indicator::before,
     3092.postbox .handle-order-lower:focus .order-lower-indicator::before,
     3093.postbox .handlediv:focus .toggle-indicator::before {
    30483094        box-shadow:
    30493095                0 0 0 1px #5b9dd9,
    30503096                0 0 2px 1px rgba(30, 140, 190, 0.8);

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

     
    4848}
    4949
    5050#dashboard-widgets .meta-box-sortables {
     51        display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
    5152        margin: 0 8px;
    5253        min-height: 100px;
    5354}

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

     
    19271927                update_user_option( $user->ID, "screen_layout_$page", $page_columns, true );
    19281928        }
    19291929
    1930         wp_die( 1 );
     1930        wp_send_json_success();
    19311931}
    19321932
    19331933/**

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

     
    13141314                                        // get_hidden_meta_boxes() doesn't apply in the block editor.
    13151315                                        $hidden_class = ( ! $screen->is_block_editor() && in_array( $box['id'], $hidden, true ) ) ? ' hide-if-js' : '';
    13161316                                        echo '<div id="' . $box['id'] . '" class="postbox ' . postbox_classes( $box['id'], $page ) . $hidden_class . '" ' . '>' . "\n";
     1317
     1318                                        echo '<div class="postbox-header">';
     1319                                        echo '<h2 class="hndle">';
     1320                                        if ( 'dashboard_php_nag' === $box['id'] ) {
     1321                                                echo '<span aria-hidden="true" class="dashicons dashicons-warning"></span>';
     1322                                                echo '<span class="screen-reader-text">' . __( 'Warning:' ) . ' </span>';
     1323                                        }
     1324                                        echo "{$box['title']}";
     1325                                        echo "</h2>\n";
     1326
    13171327                                        if ( 'dashboard_browser_nag' !== $box['id'] ) {
    13181328                                                $widget_title = $box['title'];
    13191329
    … …  
    13231333                                                        unset( $box['args']['__widget_basename'] );
    13241334                                                }
    13251335
     1336                                                echo '<div class="handle-actions hide-if-no-js">';
     1337
     1338                                                echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
     1339                                                echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
     1340                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
     1341                                                echo '</button>';
     1342                                                echo '<span class="hidden" id="' . $box['id'] . '-handle-order-higher-description">' . sprintf(
     1343                                                        /* translators: %s: Meta box title. */
     1344                                                        __( 'Move %s box up' ),
     1345                                                        $widget_title
     1346                                                ) . '</span>';
     1347
     1348                                                echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
     1349                                                echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
     1350                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
     1351                                                echo '</button>';
     1352                                                echo '<span class="hidden" id="' . $box['id'] . '-handle-order-lower-description">' . sprintf(
     1353                                                        /* translators: %s: Meta box title. */
     1354                                                        __( 'Move %s box down' ),
     1355                                                        $widget_title
     1356                                                ) . '</span>';
     1357
    13261358                                                echo '<button type="button" class="handlediv" aria-expanded="true">';
    13271359                                                echo '<span class="screen-reader-text">' . sprintf(
    13281360                                                        /* translators: %s: Meta box title. */
    … …  
    13311363                                                ) . '</span>';
    13321364                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    13331365                                                echo '</button>';
     1366
     1367                                                echo '</div>';
    13341368                                        }
    1335                                         echo '<h2 class="hndle">';
    1336                                         if ( 'dashboard_php_nag' === $box['id'] ) {
    1337                                                 echo '<span aria-hidden="true" class="dashicons dashicons-warning"></span>';
    1338                                                 echo '<span class="screen-reader-text">' . __( 'Warning:' ) . ' </span>';
    1339                                         }
    1340                                         echo "<span>{$box['title']}</span>";
    1341                                         echo "</h2>\n";
     1369                                        echo '</div>';
     1370
    13421371                                        echo '<div class="inside">' . "\n";
    13431372
    13441373                                        if ( WP_DEBUG && ! $block_compatible && 'edit' === $screen->parent_base && ! $screen->is_block_editor() && ! isset( $_GET['meta-box-loader'] ) ) {

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

     
    12701270
    12711271                $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 );
    12721272
    1273                 $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 );
     1273                $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable', 'wp-a11y', 'wp-i18n' ), false, 1 );
    12741274                did_action( 'init' ) && $scripts->localize(
    12751275                        'postbox',
    12761276                        'postBoxL10n',