WordPress.org

Make WordPress Core

Ticket #39074: 39074.6.diff

File 39074.6.diff, 10.9 KB (added by xkon, 23 months 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..52c7d24312 100644
    a b  
    4141                 */
    4242                handle_click : function () {
    4343                        var $el = $( this ),
    44                                 p = $el.parent( '.postbox' ),
     44                                p = $el.closest( '.postbox' ),
    4545                                id = p.attr( 'id' ),
    4646                                ariaExpandedValue;
    4747
     
    8888                        $document.trigger( 'postbox-toggled', p );
    8989                },
    9090
     91                /**
     92                 * Handles clicks on the order up/down icons inside the postbox heading.
     93                 *
     94                 * @since 5.4.0
     95                 * @memberof postboxes
     96                 *
     97                 * @return {void}
     98                 */
     99                handle_order: function() {
     100                        var el = $( this ),
     101                                closestPostbox = el.closest( '.postbox' ),
     102                                closestPostboxId = closestPostbox.attr( 'id' );
     103
     104                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     105                                return;
     106                        }
     107
     108                        if ( el.hasClass( 'handle-order-higher' ) ) {
     109                                closestPostbox.prev().before( closestPostbox );
     110                        }
     111
     112                        if ( el.hasClass( 'handle-order-lower' ) ) {
     113                                closestPostbox.next().after( closestPostbox );
     114                        }
     115
     116                        el.focus();
     117
     118                        postboxes.enable_disable_order_buttons();
     119
     120                        postboxes.save_order( postboxes.page );
     121                },
     122
     123                /**
     124                 * Adjusts the aria-disabled attribute for the up/down sorting arrows within the page.
     125                 *
     126                 * @return {void}
     127                 */
     128                enable_disable_order_buttons: function() {
     129
     130                        $( 'body' ).find( '.meta-box-sortables' ).each( function() {
     131                                // we need to count -1 since indexing starts from 0.
     132                                var postBoxesCount = $( this ).children( '.postbox' ).length - 1;
     133
     134                                $( this ).children( '.postbox' ).each( function() {
     135                                        var postboxIndex = $( this ).index();
     136
     137                                        if ( 0 === postboxIndex ) {
     138                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     139                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     140                                        } else if ( postBoxesCount === postboxIndex ) {
     141                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     142                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' );
     143                                        } else {
     144                                                $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     145                                                $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     146                                        }
     147                                });
     148                        });
     149                },
     150
     151                /**
     152                 * Handles clicks on the move between sortables icon inside the postbox heading.
     153                 *
     154                 * @since 5.4.0
     155                 * @memberof postboxes
     156                 *
     157                 * @return {void}
     158                 */
     159                handle_move: function() {
     160                        var el = $( this ),
     161                                closestPostbox = el.closest( '.postbox' ),
     162                                closestPostboxId = closestPostbox.attr( 'id' ),
     163                                closestSortables = el.closest( '.meta-box-sortables' ).attr( 'id' ),
     164                                sortablesArray = [],
     165                                goToSortables;
     166
     167                        if ( 'dashboard_browser_nag' === closestPostboxId ) {
     168                                return;
     169                        }
     170
     171                        // Get the list of sortables within page.
     172                        $( '.meta-box-sortables').each( function() {
     173                                sortablesArray.push( $( this ).attr( 'id' ) );
     174                        });
     175
     176                        // We need to count -1 since indexing starts from 0.
     177                        var sortablesArrayCount = sortablesArray.length - 1;
     178
     179                        // Find the index of the current sortables within the sortablesArray.
     180                        var sortablesIndex = $.inArray( closestSortables, sortablesArray );
     181
     182                        // If we're inside the last sortable we have to reset for a loop effect.
     183                        if ( sortablesIndex === sortablesArrayCount ) {
     184                                goToSortables = 0;
     185                        } else {
     186                                goToSortables = sortablesIndex + 1;
     187                        }
     188
     189                        // Find the ID of the next Sortables.
     190                        var goToSortablesId = sortablesArray[ goToSortables ];
     191
     192                        // Move the Postbox to the first position of the next Sortables.
     193                        var detachedPostbox = closestPostbox.detach();
     194
     195                        $( detachedPostbox ).prependTo( '#' + goToSortablesId );
     196
     197                        // Refresh marked areas.
     198                        postboxes._mark_area();
     199
     200                        el.focus();
     201
     202                        postboxes.enable_disable_order_buttons();
     203
     204                        postboxes.save_order( postboxes.page );
     205                },
     206
    91207                /**
    92208                 * Adds event handlers to all postboxes and screen option on the current page.
    93209                 *
     
    102218                 * @return {void}
    103219                 */
    104220                add_postbox_toggles : function (page, args) {
    105                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     221                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     222                                $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' ),
     223                                $move_buttons = $( '.postbox .handle-move-between-sortables' );
    106224
    107225                        this.page = page;
    108226                        this.init( page, args );
    109227
    110228                        $handles.on( 'click.postboxes', this.handle_click );
    111229
     230                        $order_buttons.on( 'click.postboxes', this.handle_order );
     231
     232                        $move_buttons.on( 'click.postboxes', this.handle_move );
     233
    112234                        /**
    113235                         * @since 2.7.0
    114236                         */
     
    244366                                                return;
    245367                                        }
    246368
     369                                        postboxes.enable_disable_order_buttons();
    247370                                        postboxes.save_order(page);
    248371                                },
    249372                                receive: function(e,ui) {
  • src/wp-admin/css/common.css

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
    index a8b8112b00..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/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'] ) {