Make WordPress Core

Changeset 48460


Ignore:
Timestamp:
07/13/2020 06:01:31 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Improve reordering of the post boxes in the block editor meta boxes area.

Follow-up to [48373].

  • ignores hidden "sortables" areas
  • hides the reorder buttons when there's only one post box
  • makes the reorder buttons slightly bigger to match the side of the toggle button

Fixes #39074.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/postbox.js

    r48373 r48460  
    204204         */
    205205        updateOrderButtonsProperties: function() {
    206             var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ),
    207                 lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ),
     206            var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
     207                lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
    208208                firstPostbox = $( '.postbox:visible:first' ),
    209209                lastPostbox = $( '.postbox:visible:last' ),
     210                firstPostboxId = firstPostbox.attr( 'id' ),
     211                lastPostboxId = lastPostbox.attr( 'id' ),
    210212                firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
    211                 lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' );
     213                lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
     214                moveUpButtons = $( '.handle-order-higher' ),
     215                moveDownButtons = $( '.handle-order-lower' );
    212216
    213217            // Enable all buttons as a reset first.
    214             $( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
    215             $( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     218            moveUpButtons
     219                .attr( 'aria-disabled', 'false' )
     220                .removeClass( 'hidden' );
     221            moveDownButtons
     222                .attr( 'aria-disabled', 'false' )
     223                .removeClass( 'hidden' );
     224
     225            // When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
     226            if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
     227                moveUpButtons.addClass( 'hidden' );
     228                moveDownButtons.addClass( 'hidden' );
     229            }
    216230
    217231            // Set an aria-disabled=true attribute on the first visible "move" buttons.
  • trunk/src/wp-admin/css/common.css

    r48418 r48460  
    20122012}
    20132013
     2014/* Post box order and toggle buttons. */
    20142015.postbox .handle-order-higher,
    20152016.postbox .handle-order-lower,
     
    20272028.postbox .handle-order-lower {
    20282029    color: #72777c;
     2030}
     2031
     2032/* Post box order buttons in the block editor meta boxes area. */
     2033.edit-post-meta-boxes-area .postbox .handle-order-higher,
     2034.edit-post-meta-boxes-area .postbox .handle-order-lower {
     2035    width: 44px;
     2036    height: 44px;
     2037    color: #191e23
    20292038}
    20302039
Note: See TracChangeset for help on using the changeset viewer.