diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js index ff144777f9..a90974c047 100644 --- a/src/js/_enqueues/admin/postbox.js +++ b/src/js/_enqueues/admin/postbox.js @@ -10,7 +10,8 @@ /* global ajaxurl, postBoxL10n, postboxes */ (function($) { - var $document = $( document ); + var $document = $( document ), + __ = wp.i18n.__; /** * This object contains all function to handle the behaviour of the post boxes. The post boxes are the boxes you see @@ -41,7 +42,7 @@ */ handle_click : function () { var $el = $( this ), - p = $el.parent( '.postbox' ), + p = $el.closest( '.postbox' ), id = p.attr( 'id' ), ariaExpandedValue; @@ -88,6 +89,132 @@ $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' ) && 'true' === el.attr( 'aria-disabled' ) ) { + wp.a11y.speak( __( 'The postbox is already on the first position.' ) ); + return; + } + + if ( el.hasClass( 'handle-order-lower' ) && 'true' === el.attr( 'aria-disabled' ) ) { + wp.a11y.speak( __( 'The postbox is already on the last position.' ) ); + 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' ); + } + }); + }); + }, + + /** + * Handles clicks on the move between sortables icon inside the postbox heading. + * + * @since 5.4.0 + * @memberof postboxes + * + * @return {void} + */ + handle_move: function() { + var el = $( this ), + closestPostbox = el.closest( '.postbox' ), + closestPostboxId = closestPostbox.attr( 'id' ), + closestSortables = el.closest( '.meta-box-sortables' ).attr( 'id' ), + sortablesArray = [], + goToSortables; + + if ( 'dashboard_browser_nag' === closestPostboxId ) { + return; + } + + // Get the list of sortables within page. + $( '.meta-box-sortables').each( function() { + sortablesArray.push( $( this ).attr( 'id' ) ); + }); + + // We need to count -1 since indexing starts from 0. + var sortablesArrayCount = sortablesArray.length - 1; + + // Find the index of the current sortables within the sortablesArray. + var sortablesIndex = $.inArray( closestSortables, sortablesArray ); + + // If we're inside the last sortable we have to reset for a loop effect. + if ( sortablesIndex === sortablesArrayCount ) { + goToSortables = 0; + } else { + goToSortables = sortablesIndex + 1; + } + + // Find the ID of the next Sortables. + var goToSortablesId = sortablesArray[ goToSortables ]; + + // Move the Postbox to the first position of the next Sortables. + var detachedPostbox = closestPostbox.detach(); + + $( detachedPostbox ).prependTo( '#' + goToSortablesId ); + + // Refresh marked areas. + postboxes._mark_area(); + + el.focus(); + + postboxes.enable_disable_order_buttons(); + + postboxes.save_order( postboxes.page ); + }, + /** * Adds event handlers to all postboxes and screen option on the current page. * @@ -102,13 +229,19 @@ * @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' ), + $move_buttons = $( '.postbox .handle-move-between-sortables' ); this.page = page; this.init( page, args ); $handles.on( 'click.postboxes', this.handle_click ); + $order_buttons.on( 'click.postboxes', this.handle_order ); + + $move_buttons.on( 'click.postboxes', this.handle_move ); + /** * @since 2.7.0 */ @@ -244,6 +377,7 @@ return; } + postboxes.enable_disable_order_buttons(); postboxes.save_order(page); }, receive: function(e,ui) { @@ -328,7 +462,15 @@ postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' ); } ); - $.post( ajaxurl, postVars ); + $.post( + ajaxurl, + postVars, + function( response ) { + if ( response.success ) { + wp.a11y.speak( __( 'The postboxes order has been saved.' ) ); + } + } + ); }, /** diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a8b8112b00..c041e25ae9 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2057,9 +2057,17 @@ html.wp-toolbar { font-weight: 400; } +.postbox .handle-actions { + float: right; + display: inline-block; + height: 36px; +} + +.postbox .handle-move-between-sortables, +.postbox .handle-order-higher, +.postbox .handle-order-lower, .postbox .handlediv { display: none; - float: right; width: 36px; height: 36px; margin: 0; @@ -2069,8 +2077,11 @@ html.wp-toolbar { cursor: pointer; } +.js .postbox .handle-move-between-sortables, +.js .postbox .handle-order-higher, +.js .postbox .handle-order-lower, .js .postbox .handlediv { - display: block; + display: inline-block; } .sortable-placeholder { @@ -3030,6 +3041,9 @@ img { /* Metabox collapse arrow indicators */ .sidebar-name .toggle-indicator:before, .js .meta-box-sortables .postbox .toggle-indicator:before, +.js .meta-box-sortables .postbox .move-between-sortables-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 +3062,28 @@ img { content: "\f140"; } +.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before { + content: "\f503"; +} + +.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-move-between-sortables .move-between-sortables-indicator:before, +.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 +3091,9 @@ img { text-indent: -1px; /* account for the dashicon alignment */ } +.rtl.js .postbox .handle-move-between-sortables .move-between-sortables-indicator:before, +.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 +3104,17 @@ img { color: #72777c; } +.js .postbox .handle-move-between-sortables:focus, +.js .postbox .handle-order-higher:focus, +.js .postbox .handle-order-lower:focus, .js .postbox .handlediv:focus { box-shadow: none; outline: none; } +.js .postbox .handle-move-between-sortables:focus .move-between-sortables-indicator:before, +.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 +3420,9 @@ img { .postbox .handlediv.button-link, .item-edit, .toggle-indicator, +.move-between-sortables-indicator, +.order-higher-indicator, +.order-lower-indicator, .accordion-section-title:after { color: #72777c; } diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php index 6f38d2221c..9b03941035 100644 --- a/src/wp-admin/includes/ajax-actions.php +++ b/src/wp-admin/includes/ajax-actions.php @@ -1907,12 +1907,12 @@ function wp_ajax_meta_box_order() { $page = isset( $_POST['page'] ) ? $_POST['page'] : ''; if ( $page != sanitize_key( $page ) ) { - wp_die( 0 ); + wp_send_json_error(); } $user = wp_get_current_user(); if ( ! $user ) { - wp_die( -1 ); + wp_send_json_error(); } if ( $order ) { @@ -1923,7 +1923,7 @@ function wp_ajax_meta_box_order() { update_user_option( $user->ID, "screen_layout_$page", $page_columns, true ); } - wp_die( 1 ); + wp_send_json_success(); } /** diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php index 81e3d7d462..ffb5069f22 100644 --- a/src/wp-admin/includes/template.php +++ b/src/wp-admin/includes/template.php @@ -1266,6 +1266,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; @@ -1308,6 +1310,45 @@ 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 '
'; } echo '

'; if ( 'dashboard_php_nag' === $box['id'] ) { diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index f45471d7e1..7250bcf6fb 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1593,7 +1593,7 @@ function wp_default_scripts( &$scripts ) { ) ); - $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y' ), false, 1 ); + $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y', 'wp-i18n' ), false, 1 ); $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );