diff --git a/src/js/_enqueues/admin/inline-edit-post.js b/src/js/_enqueues/admin/inline-edit-post.js index 4d297e0c1a..46fba439fb 100644 --- a/src/js/_enqueues/admin/inline-edit-post.js +++ b/src/js/_enqueues/admin/inline-edit-post.js @@ -131,7 +131,7 @@ window.wp = window.wp || {}; $('#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 @@ window.wp = window.wp || {}; // 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 @@ window.wp = window.wp || {}; 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 @@ window.wp = window.wp || {}; } ); } + // 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' ); }, diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e138edaae4..95235666bd 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -789,7 +789,7 @@ img.emoji { /* @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 @@ img.emoji { 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 @@ img.emoji { .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; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index e9a97680b9..84e390d83e 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -858,16 +858,35 @@ tr:hover .row-actions, /* 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 { @@ -888,7 +907,7 @@ tr.inline-edit-row td, #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 @@ tr.inline-edit-row td, 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 @@ tr.inline-edit-row td, /* 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,34 +1077,17 @@ tr.inline-edit-row td, 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; 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,27 +1107,48 @@ ul.cat-checklist { float: left; } -#bulk-titles { - line-height: 140%; -} -#bulk-titles div { - margin: 0.2em 0.3em; +#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 a { - cursor: pointer; - display: block; - float: left; - height: 18px; - margin: 0 3px 0 -2px; - overflow: hidden; - position: relative; - width: 20px; +#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:before { - position: relative; - top: -3px; +#bulk-titles .ntdelitem { + padding-left: 23px; +} + +#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; } /*------------------------------------------------------------------------------ @@ -1945,6 +1964,20 @@ div.action-links, #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, @@ -1972,9 +2005,28 @@ div.action-links, 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, @@ -1982,10 +2034,6 @@ div.action-links, 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 @@ div.action-links, 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; diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php index 99a84da59b..b6858a1e10 100644 --- a/src/wp-admin/includes/class-wp-posts-list-table.php +++ b/src/wp-admin/includes/class-wp-posts-list-table.php @@ -1611,9 +1611,9 @@ class WP_Posts_List_Table extends WP_List_Table { ?> - +
    - +
    post_type, 'title' ) ) : ?> @@ -1828,12 +1828,13 @@ class WP_Posts_List_Table extends WP_List_Table { cap->assign_terms ) ) : ?> name ); ?> - +
    - +

    labels->separate_items_with_commas ); ?>

    +
    @@ -2030,6 +2031,7 @@ class WP_Posts_List_Table extends WP_List_Table {

    +