WordPress.org

Make WordPress Core

Ticket #39074: 39074.11.diff

File 39074.11.diff, 16.5 KB (added by afercia, 10 months ago)
  • src/js/_enqueues/admin/postbox.js

     
    4242                 */
    4343                handle_click : function () {
    4444                        var $el = $( this ),
    45                                 p = $el.parent( '.postbox' ),
     45                                p = $el.closest( '.postbox' ),
    4646                                id = p.attr( 'id' ),
    4747                                ariaExpandedValue;
    4848
     
    5151                        }
    5252
    5353                        p.toggleClass( 'closed' );
    54 
    5554                        ariaExpandedValue = ! p.hasClass( 'closed' );
    5655
    5756                        if ( $el.hasClass( 'handlediv' ) ) {
     
    9089                },
    9190
    9291                /**
     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                /**
    93229                 * Adds event handlers to all postboxes and screen option on the current page.
    94230                 *
    95231                 * @since 2.7.0
     
    103239                 * @return {void}
    104240                 */
    105241                add_postbox_toggles : function (page, args) {
    106                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     242                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     243                                $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    107244
    108245                        this.page = page;
    109246                        this.init( page, args );
     
    110247
    111248                        $handles.on( 'click.postboxes', this.handle_click );
    112249
     250                        // Handle the order of the postboxes.
     251                        $orderButtons.on( 'click.postboxes', this.handleOrder );
     252
    113253                        /**
    114254                         * @since 2.7.0
    115255                         */
     
    123263                         * Event handler for the postbox dismiss button. After clicking the button
    124264                         * the postbox will be hidden.
    125265                         *
     266                         * As of WordPress 5.5, this is only used for the browser update nag.
     267                         *
    126268                         * @since 3.2.0
    127269                         *
    128270                         * @return {void}
     
    248390                                                $el.sortable('cancel');
    249391                                                return;
    250392                                        }
     393
     394                                        postboxes.updateOrderButtonsProperties();
    251395                                        postboxes.save_order(page);
    252396                                },
    253397                                receive: function(e,ui) {
     
    266410
    267411                        this._mark_area();
    268412
     413                        // Update the "move" buttons properties.
     414                        this.updateOrderButtonsProperties();
     415                        $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
     416
    269417                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
    270418                        $handleButtons.each( function () {
    271419                                var $el = $( this );
    272                                 $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
     420                                $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
    273421                        });
    274422                },
    275423
     
    332480                                postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
    333481                        } );
    334482
    335                         $.post( ajaxurl, postVars );
     483                        $.post(
     484                                ajaxurl,
     485                                postVars,
     486                                function( response ) {
     487                                        if ( response.success ) {
     488                                                wp.a11y.speak( __( 'The boxes order has been saved.' ) );
     489                                        }
     490                                }
     491                        );
    336492                },
    337493
    338494                /**
  • src/wp-admin/css/common.css

     
    727727        color: #23282d;
    728728}
    729729
    730 .postbox .hndle,
    731730.stuffbox .hndle {
    732731        border-bottom: 1px solid #ccd0d4;
    733732}
     
    19831982        cursor: auto;
    19841983}
    19851984
     1985/* Configurable dashboard widgets "Configure" edit-box link. */
    19861986.hndle a {
    1987         font-size: 11px;
     1987        font-size: 12px;
    19881988        font-weight: 400;
    19891989}
    19901990
     1991.postbox-header {
     1992        display: flex;
     1993        align-items: center;
     1994        justify-content: space-between;
     1995        border-bottom: 1px solid #ccd0d4;
     1996}
     1997
     1998.postbox-header .hndle {
     1999        flex-grow: 1;
     2000        /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
     2001        display: flex;
     2002        justify-content: space-between;
     2003        align-items: center;
     2004}
     2005
     2006.postbox-header .handle-actions {
     2007        flex-shrink: 0;
     2008}
     2009
     2010.postbox .handle-order-higher,
     2011.postbox .handle-order-lower,
    19912012.postbox .handlediv {
    1992         display: none;
    1993         float: right;
    19942013        width: 36px;
    19952014        height: 36px;
    19962015        margin: 0;
     
    20002019        cursor: pointer;
    20012020}
    20022021
    2003 .js .postbox .handlediv {
    2004         display: block;
     2022.postbox .handle-order-higher,
     2023.postbox .handle-order-lower {
     2024        color: #72777c;
    20052025}
    20062026
     2027.postbox .handle-order-higher[aria-disabled="true"],
     2028.postbox .handle-order-lower[aria-disabled="true"] {
     2029        cursor: default;
     2030        color: #a0a5aa;
     2031}
     2032
    20072033.sortable-placeholder {
    20082034        border: 1px dashed #b4b9be;
    20092035        margin-bottom: 20px;
     
    29492975}
    29502976
    29512977/* Metabox collapse arrow indicators */
    2952 .sidebar-name .toggle-indicator:before,
    2953 .js .meta-box-sortables .postbox .toggle-indicator:before,
    2954 .bulk-action-notice .toggle-indicator:before,
    2955 .privacy-text-box .toggle-indicator:before {
     2978.sidebar-name .toggle-indicator::before,
     2979.meta-box-sortables .postbox .toggle-indicator::before,
     2980.meta-box-sortables .postbox .order-higher-indicator::before,
     2981.meta-box-sortables .postbox .order-lower-indicator::before,
     2982.bulk-action-notice .toggle-indicator::before,
     2983.privacy-text-box .toggle-indicator::before {
    29562984        content: "\f142";
    29572985        display: inline-block;
    29582986        font: normal 20px/1 dashicons;
     
    29622990        text-decoration: none;
    29632991}
    29642992
    2965 .js .widgets-holder-wrap.closed .toggle-indicator:before,
    2966 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
    2967 .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before,
    2968 .privacy-text-box.closed .toggle-indicator:before {
     2993.js .widgets-holder-wrap.closed .toggle-indicator::before,
     2994.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
     2995.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
     2996.privacy-text-box.closed .toggle-indicator::before {
    29692997        content: "\f140";
    29702998}
    29712999
    2972 .js .postbox .handlediv .toggle-indicator:before {
    2973         margin-top: 4px;
     3000.postbox .handle-order-higher .order-higher-indicator::before {
     3001        content: "\f343";
     3002        color: inherit;
     3003}
     3004
     3005.postbox .handle-order-lower .order-lower-indicator::before {
     3006        content: "\f347";
     3007        color: inherit;
     3008}
     3009
     3010.postbox .handle-order-higher .order-higher-indicator::before,
     3011.postbox .handle-order-lower .order-lower-indicator::before,
     3012.postbox .handlediv .toggle-indicator::before {
    29743013        width: 20px;
    29753014        border-radius: 50%;
    2976         text-indent: -1px; /* account for the dashicon alignment */
    29773015}
    29783016
    2979 .rtl.js .postbox .handlediv .toggle-indicator:before {
    2980         text-indent: 1px; /* account for the dashicon alignment */
     3017.postbox .handlediv .toggle-indicator::before {
     3018        text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
    29813019}
    29823020
    2983 .bulk-action-notice .toggle-indicator:before {
     3021.rtl .postbox .handlediv .toggle-indicator::before {
     3022        text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
     3023}
     3024
     3025.bulk-action-notice .toggle-indicator::before {
    29843026        line-height: 16px;
    29853027        vertical-align: top;
    29863028        color: #72777c;
    29873029}
    29883030
    2989 .js .postbox .handlediv:focus {
     3031.postbox .handle-order-higher:focus,
     3032.postbox .handle-order-lower:focus,
     3033.postbox .handlediv:focus {
    29903034        box-shadow: none;
    29913035        /* Only visible in Windows High Contrast mode */
    29923036        outline: 1px solid transparent;
    29933037}
    29943038
    2995 .js .postbox .handlediv:focus .toggle-indicator:before {
     3039.postbox .handle-order-higher:focus .order-higher-indicator::before,
     3040.postbox .handle-order-lower:focus .order-lower-indicator::before,
     3041.postbox .handlediv:focus .toggle-indicator::before {
    29963042        box-shadow:
    29973043                0 0 0 1px #5b9dd9,
    29983044                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        /* Required min-height to make the jQuery UI Sortable drop zone work. */
    5253        min-height: 100px;
    5354        margin: 0 8px 20px;
  • 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

     
    12081208
    12091209                $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 );
    12101210
    1211                 $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 );
     1211                $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable', 'wp-a11y' ), false, 1 );
    12121212                $scripts->set_translations( 'postbox' );
    12131213
    12141214                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'tags-suggest' ), false, 1 );