diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js index 9789518b65..7bfd0852fb 100644 --- a/src/js/_enqueues/admin/postbox.js +++ b/src/js/_enqueues/admin/postbox.js @@ -39,7 +39,7 @@ */ handle_click : function () { var $el = $( this ), - p = $el.parent( '.postbox' ), + p = $el.closest( '.postbox' ), id = p.attr( 'id' ), ariaExpandedValue; @@ -86,6 +86,66 @@ $document.trigger( 'postbox-toggled', p ); }, + /** + * Handles clicks on the order up/down icons inside the postbox heading. + * + * @since 5.4.0 + * @memberof postboxes + * + * @return {void} + */ + handle_order: function() { + var el = $( this ), + closestPostbox = el.closest( '.postbox' ), + closestPostboxId = closestPostbox.attr( 'id' ); + + if ( 'dashboard_browser_nag' === closestPostboxId ) { + return; + } + + if ( el.hasClass( 'handle-order-higher' ) ) { + closestPostbox.prev().before( closestPostbox ); + } + + if ( el.hasClass( 'handle-order-lower' ) ) { + closestPostbox.next().after( closestPostbox ); + } + + el.focus(); + + postboxes.enable_disable_order_buttons(); + + postboxes.save_order( postboxes.page ); + }, + + /** + * Adjusts the aria-disabled attribute for the up/down sorting arrows within the page. + * + * @return {void} + */ + enable_disable_order_buttons: function() { + + $( 'body' ).find( '.meta-box-sortables' ).each( function() { + // we need to count -1 since indexing starts from 0. + var postBoxesCount = $( this ).children( '.postbox' ).length - 1; + + $( this ).children( '.postbox' ).each( function() { + var postboxIndex = $( this ).index(); + + if ( 0 === postboxIndex ) { + $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' ); + $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' ); + } else if ( postBoxesCount === postboxIndex ) { + $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' ); + $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'true' ); + } else { + $( this ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'false' ); + $( this ).find( '.handle-order-lower' ).attr( 'aria-disabled', 'false' ); + } + }); + }); + }, + /** * Adds event handlers to all postboxes and screen option on the current page. * @@ -99,13 +159,16 @@ * @return {void} */ add_postbox_toggles : function (page, args) { - var $handles = $( '.postbox .hndle, .postbox .handlediv' ); + var $handles = $( '.postbox .hndle, .postbox .handlediv' ), + $order_buttons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' ); this.page = page; this.init( page, args ); $handles.on( 'click.postboxes', this.handle_click ); + $order_buttons.on( 'click.postboxes', this.handle_order ); + /** * @since 2.7.0 */ @@ -240,6 +303,7 @@ return; } + postboxes.enable_disable_order_buttons(); postboxes.save_order(page); }, receive: function(e,ui) { diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a8b8112b00..34ff1079c4 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2057,9 +2057,16 @@ html.wp-toolbar { font-weight: 400; } +.postbox .handle-actions { + float: right; + display: inline-block; + height: 36px; +} + +.postbox .handle-order-higher, +.postbox .handle-order-lower, .postbox .handlediv { display: none; - float: right; width: 36px; height: 36px; margin: 0; @@ -2069,8 +2076,10 @@ html.wp-toolbar { cursor: pointer; } +.js .postbox .handle-order-higher, +.js .postbox .handle-order-lower, .js .postbox .handlediv { - display: block; + display: inline-block; } .sortable-placeholder { @@ -3030,6 +3039,8 @@ img { /* Metabox collapse arrow indicators */ .sidebar-name .toggle-indicator:before, .js .meta-box-sortables .postbox .toggle-indicator:before, +.js .meta-box-sortables .postbox .order-higher-indicator:before, +.js .meta-box-sortables .postbox .order-lower-indicator:before, .bulk-action-notice .toggle-indicator:before, .privacy-text-box .toggle-indicator:before { content: "\f142"; @@ -3048,6 +3059,23 @@ img { content: "\f140"; } +.js .postbox .handle-order-higher .order-higher-indicator:before { + content: "\f343"; +} + +.js .postbox .handle-order-lower .order-lower-indicator:before { + content: "\f347"; +} + +.js .postbox .handle-order-higher[aria-disabled=true] .order-higher-indicator:before, +.js .postbox .handle-order-lower[aria-disabled=true] .order-lower-indicator:before { + cursor: default; + pointer-events: none; + opacity: .5; +} + +.js .postbox .handle-order-higher .order-higher-indicator:before, +.js .postbox .handle-order-lower .order-lower-indicator:before, .js .postbox .handlediv .toggle-indicator:before { margin-top: 4px; width: 20px; @@ -3055,6 +3083,8 @@ img { text-indent: -1px; /* account for the dashicon alignment */ } +.rtl.js .postbox .handle-order-higher .order-higher-indicator:before, +.rtl.js .postbox .handle-order-lower .order-lower-indicator:before, .rtl.js .postbox .handlediv .toggle-indicator:before { text-indent: 1px; /* account for the dashicon alignment */ } @@ -3065,11 +3095,15 @@ img { color: #72777c; } +.js .postbox .handle-order-higher:focus, +.js .postbox .handle-order-lower:focus, .js .postbox .handlediv:focus { box-shadow: none; outline: none; } +.js .postbox .handle-order-higher:focus .order-higher-indicator:before, +.js .postbox .handle-order-lower:focus .order-lower-indicator:before, .js .postbox .handlediv:focus .toggle-indicator:before { box-shadow: 0 0 0 1px #5b9dd9, @@ -3375,6 +3409,8 @@ img { .postbox .handlediv.button-link, .item-edit, .toggle-indicator, +.order-higher-indicator, +.order-lower-indicator, .accordion-section-title:after { color: #72777c; } diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php index 3ed611d0c4..209344d4ff 100644 --- a/src/wp-admin/includes/template.php +++ b/src/wp-admin/includes/template.php @@ -1264,6 +1264,8 @@ function do_meta_boxes( $screen, $context, $object ) { if ( isset( $wp_meta_boxes[ $page ][ $context ] ) ) { foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) { if ( isset( $wp_meta_boxes[ $page ][ $context ][ $priority ] ) ) { + $total_postboxes = count( $wp_meta_boxes[ $page ][ $context ][ $priority ] ); + foreach ( (array) $wp_meta_boxes[ $page ][ $context ][ $priority ] as $box ) { if ( false == $box || ! $box['title'] ) { continue; @@ -1306,6 +1308,36 @@ function do_meta_boxes( $screen, $context, $object ) { unset( $box['args']['__widget_basename'] ); } + $disable_order_higher = 'false'; + $disable_order_lower = 'false'; + + if ( 1 === $i ) { + $disable_order_higher = 'true'; + } + + if ( $total_postboxes === $i ) { + $disable_order_lower = 'true'; + } + + echo '
'; + echo ''; + + echo ''; + echo ''; + + echo '
'; } echo '

'; if ( 'dashboard_php_nag' === $box['id'] ) {