Index: src/js/_enqueues/admin/inline-edit-post.js =================================================================== --- src/js/_enqueues/admin/inline-edit-post.js (revision 53024) +++ src/js/_enqueues/admin/inline-edit-post.js (working copy) @@ -131,7 +131,7 @@ $('#bulk-edit').find('fieldset:first').after( $('#inline-edit fieldset.inline-edit-categories').clone() ).siblings( 'fieldset:last' ).prepend( - $('#inline-edit label.inline-edit-tags').clone() + $( '#inline-edit .inline-edit-tags-wrap' ).clone() ); $('select[name="_status"] option[value="future"]', bulkRow).remove(); @@ -197,9 +197,15 @@ // If the checkbox for a post is selected, add the post to the edit list. if ( $(this).prop('checked') ) { c = false; - var id = $(this).val(), theTitle; - theTitle = $('#inline_'+id+' .post_title').html() || wp.i18n.__( '(no title)' ); - te += '
X'+theTitle+'
'; + var id = $( this ).val(), + theTitle = $( '#inline_' + id + ' .post_title' ).html() || wp.i18n.__( '(no title)' ), + buttonVisuallyHiddenText = wp.i18n.sprintf( + /* translators: %s: Post title. */ + wp.i18n.__( 'Remove “%s” from Bulk Edit' ), + theTitle + ); + + te += '
    • '; } }); @@ -208,18 +214,34 @@ return this.revert(); } - // Add onclick events to the delete-icons in the bulk editors the post title list. - $('#bulk-titles').html(te); + // Populate the list of items to bulk edit. + $( '#bulk-titles' ).html( '' ); + /** - * Binds on click events to the checkboxes before the posts in the table. + * Binds on click events to handle the list of items to bulk edit. * * @listens click */ - $('#bulk-titles a').on( 'click', function(){ - var id = $(this).attr('id').substr(1); + $( '#bulk-titles .ntdelbutton' ).click( function() { + var $this = $( this ), + id = $this.attr( 'id' ).substr( 1 ), + $prev = $this.parent().prev().children( '.ntdelbutton' ), + $next = $this.parent().next().children( '.ntdelbutton' ); - $('table.widefat input[value="' + id + '"]').prop('checked', false); - $('#ttle'+id).remove(); + $( 'table.widefat input[value="' + id + '"]' ).prop( 'checked', false ); + $( '#_' + id ).parent().remove(); + wp.a11y.speak( wp.i18n.__( 'Item removed.' ), 'assertive' ); + + // Move focus to a proper place when items are removed. + if ( $next.length ) { + $next.focus(); + } else if ( $prev.length ) { + $prev.focus(); + } else { + $( '#bulk-titles-list' ).remove(); + inlineEditPost.revert(); + wp.a11y.speak( wp.i18n.__( 'All selected items have been removed. Select new items to use Bulk Actions.' ) ); + } }); // Enable auto-complete for tags when editing posts. @@ -238,6 +260,8 @@ } ); } + // Set initial focus on the Bulk Edit region. + $( '#bulk-edit .inline-edit-wrapper' ).attr( 'tabindex', '-1' ).focus(); // Scrolls to the top of the table where the editor is rendered. $('html, body').animate( { scrollTop: 0 }, 'fast' ); }, Index: src/wp-admin/css/common.css =================================================================== --- src/wp-admin/css/common.css (revision 53024) +++ src/wp-admin/css/common.css (working copy) @@ -789,7 +789,7 @@ /* @todo can we combine these into a class or use an existing dashicon one? */ .welcome-panel .welcome-panel-close:before, .tagchecklist .ntdelbutton .remove-tag-icon:before, -#bulk-titles div a:before, +#bulk-titles .ntdelbutton:before, .notice-dismiss:before { background: none; color: #787c82; @@ -808,10 +808,6 @@ margin: 0; } -#bulk-titles div a:before { - margin: 1px 0; -} - .tagchecklist .ntdelbutton .remove-tag-icon:before { margin-left: 2px; border-radius: 50%; @@ -826,8 +822,8 @@ .tagchecklist .ntdelbutton:hover .remove-tag-icon:before, .tagchecklist .ntdelbutton:focus .remove-tag-icon:before, -#bulk-titles div a:hover:before, -#bulk-titles div a:focus:before { +#bulk-titles .ntdelbutton:hover:before, +#bulk-titles .ntdelbutton:focus:before { color: #d63638; } Index: src/wp-admin/css/list-tables.css =================================================================== --- src/wp-admin/css/list-tables.css (revision 53024) +++ src/wp-admin/css/list-tables.css (working copy) @@ -858,18 +858,37 @@ /* Layout */ #wpbody-content .inline-edit-row fieldset { - font-size: 12px; float: left; margin: 0; - padding: 0; + padding: 0 12px 0 0; width: 100%; + box-sizing: border-box; } -tr.inline-edit-row td, -#wpbody-content .inline-edit-row fieldset .inline-edit-col { - padding: 0 0.5em; +#wpbody-content .inline-edit-row td fieldset:last-of-type { + padding-right: 0; } +tr.inline-edit-row td { + padding: 0; + /* Prevents the focus style on .inline-edit-wrapper from being cutted-off */ + position: relative; +} + +.inline-edit-wrapper { + display: flow-root; + padding: 0 12px; + border: 1px solid transparent; + border-radius: 4px; +} + +.inline-edit-wrapper:focus { + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + #wpbody-content .quick-edit-row-post .inline-edit-col-left { width: 40%; } @@ -888,7 +907,7 @@ #wpbody-content .quick-edit-row-page .inline-edit-col-right, #wpbody-content .bulk-edit-row-post .inline-edit-col-right { - width: 49%; + width: 50%; } #wpbody-content .bulk-edit-row .inline-edit-col-left { @@ -918,8 +937,8 @@ flex-wrap: wrap; align-items: center; clear: both; - padding: 0.5em; - margin: 0.5em 0 0; + margin: 0; + padding: 0.5em 0 1em; } .inline-edit-save.submit .button { @@ -947,15 +966,11 @@ /* Needs higher specificity for the padding */ #the-list .inline-edit-row .inline-edit-legend { margin: 0; - padding: 0.2em 0.5em 0; + padding: 0.2em 0; line-height: 2.5; font-weight: 600; } -#the-list #bulk-edit.inline-edit-row .inline-edit-legend { - padding: 0.2em 0.5em; -} - .inline-edit-row fieldset span.title, .inline-edit-row fieldset span.checkbox-title { margin: 0; @@ -1062,24 +1077,8 @@ width: 8em; } -ul.cat-checklist { - height: 12em; - border: solid 1px #dcdcde; - overflow-y: scroll; - padding: 0 5px; - margin: 0; - background-color: #fff; -} - -#bulk-titles { - display: block; - height: 12em; - border: 1px solid #dcdcde; - overflow-y: scroll; - padding: 0 5px; - margin: 0 0 5px; -} - +#bulk-titles-list, +#bulk-titles-list li, .inline-edit-row fieldset ul.cat-checklist li, .inline-edit-row fieldset ul.cat-checklist input { margin: 0; @@ -1086,10 +1085,9 @@ position: relative; /* RTL fix, #WP27629 */ } -.inline-edit-row fieldset ul.cat-checklist label, -.inline-edit-row #bulk-titles div { - font-style: normal; - font-size: 11px; +.inline-edit-row fieldset ul.cat-checklist input { + margin-top: -1px; + margin-left: 3px; } .inline-edit-row fieldset label input.inline-edit-menu-order-input { @@ -1109,29 +1107,50 @@ float: left; } -#bulk-titles { - line-height: 140%; +#bulk-titles, +ul.cat-checklist { + height: 14em; + border: 1px solid #ddd; + margin: 0 0 5px; + padding: 0.2em 5px; + overflow-y: scroll; } -#bulk-titles div { - margin: 0.2em 0.3em; + +#bulk-titles .ntdelbutton, +#bulk-titles .ntdeltitle, +.inline-edit-row fieldset ul.cat-checklist label { + display: inline-block; + margin: 0; + padding: 3px 0; + line-height: 20px; + vertical-align: top; } -#bulk-titles div a { - cursor: pointer; - display: block; - float: left; - height: 18px; - margin: 0 3px 0 -2px; - overflow: hidden; - position: relative; - width: 20px; +#bulk-titles .ntdelitem { + padding-left: 23px; } -#bulk-titles div a:before { - position: relative; - top: -3px; +#bulk-titles .ntdelbutton { + width: 26px; + height: 26px; + margin: 0 0 0 -26px; + text-align: center; + border-radius: 3px; } +#bulk-titles .ntdelbutton:before { + display: inline-block; + vertical-align: top; +} + +#bulk-titles .ntdelbutton:focus { + box-shadow: 0 0 0 2px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + /* Reset inherited offset from Gutenberg */ + outline-offset: 0; +} + /*------------------------------------------------------------------------------ 17.0 - Plugins ------------------------------------------------------------------------------*/ @@ -1945,8 +1964,22 @@ #wpbody-content .bulk-edit-row .inline-edit-col-bottom { float: none; width: 100%; + padding: 0; } + #the-list .inline-edit-row .inline-edit-legend, + .inline-edit-row span.title { + font-size: 16px; + } + + .inline-edit-row p.howto { + font-size: 14px; + } + + #wpbody-content .inline-edit-row-page .inline-edit-col-right { + margin-top: 0; + } + #wpbody-content .quick-edit-row fieldset .inline-edit-col label, #wpbody-content .quick-edit-row fieldset .inline-edit-group label, #wpbody-content .bulk-edit-row fieldset .inline-edit-col label, @@ -1972,20 +2005,35 @@ padding: 3px 4px; } - .inline-edit-row fieldset ul.cat-checklist label, - .inline-edit-row #bulk-titles div { + #bulk-titles .ntdelbutton, + #bulk-titles .ntdeltitle, + .inline-edit-row fieldset ul.cat-checklist label { + padding: 6px 0; font-size: 16px; + line-height: 28px; } + #bulk-titles .ntdelitem { + padding-left: 37px; + } + + #bulk-titles .ntdelbutton { + width: 40px; + height: 40px; + margin: 0 0 0 -40px; + overflow: hidden; + } + + #bulk-titles .ntdelbutton:before { + font-size: 20px; + line-height: 28px; + } + .inline-edit-row fieldset label span.title, .inline-edit-row fieldset.inline-edit-date legend { float: none; } - .inline-edit-row fieldset label.inline-edit-tags { - padding: 0 0.5em; - } - .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { padding: 0; } @@ -2015,14 +2063,6 @@ display: block; } - #bulk-titles div { - margin: 0.8em 0.3em; - } - - #bulk-titles div a { - height: 22px; - } - /* Updates */ #wpbody-content .updates-table .plugin-title { width: auto; Index: src/wp-admin/includes/class-wp-posts-list-table.php =================================================================== --- src/wp-admin/includes/class-wp-posts-list-table.php (revision 53024) +++ src/wp-admin/includes/class-wp-posts-list-table.php (working copy) @@ -1611,9 +1611,9 @@ ?> - +
    - +
    post_type, 'title' ) ) : ?> @@ -1828,12 +1828,13 @@ cap->assign_terms ) ) : ?> name ); ?> - +
    - +

    labels->separate_items_with_commas ); ?>

    +
    @@ -2030,6 +2031,7 @@

    +