WordPress.org
Get WordPress

Make WordPress Core

Ticket #35483: 35483.2.diff

File 35483.2.diff, 12.4 KB (added by afercia, 4 years ago)

  • src/js/_enqueues/admin/inline-edit-post.js

     
    131131                $('#bulk-edit').find('fieldset:first').after(
    132132                        $('#inline-edit fieldset.inline-edit-categories').clone()
    133133                ).siblings( 'fieldset:last' ).prepend(
    134                         $('#inline-edit label.inline-edit-tags').clone()
     134                        $( '#inline-edit .inline-edit-tags-wrap' ).clone()
    135135                );
    136136
    137137                $('select[name="_status"] option[value="future"]', bulkRow).remove();
    … …  
    197197                        // If the checkbox for a post is selected, add the post to the edit list.
    198198                        if ( $(this).prop('checked') ) {
    199199                                c = false;
    200                                 var id = $(this).val(), theTitle;
    201                                 theTitle = $('#inline_'+id+' .post_title').html() || wp.i18n.__( '(no title)' );
    202                                 te += '<div id="ttle'+id+'"><a id="_'+id+'" class="ntdelbutton" title="'+ wp.i18n.__( 'Remove From Bulk Edit' ) +'">X</a>'+theTitle+'</div>';
     200                                var id = $( this ).val(),
     201                                        theTitle = $( '#inline_' + id + ' .post_title' ).html() || wp.i18n.__( '(no title)' ),
     202                                        buttonVisuallyHiddenText = wp.i18n.sprintf(
     203                                                /* translators: %s: Post title. */
     204                                                wp.i18n.__( 'Remove &#8220;%s&#8221; from Bulk Edit' ),
     205                                                theTitle.replace( /<.[^<>]*?>/g, '' )
     206                                        );
     207
     208                                te += '<li class="ntdelitem"><button type="button" id="_' + id + '" class="button-link ntdelbutton"><span class="screen-reader-text">' + buttonVisuallyHiddenText + '</span></button><span class="ntdeltitle" aria-hidden="true">' + theTitle + '</span></li>';
    203209                        }
    204210                });
    205211
    … …  
    208214                        return this.revert();
    209215                }
    210216
    211                 // Add onclick events to the delete-icons in the bulk editors the post title list.
    212                 $('#bulk-titles').html(te);
     217                // Populate the list of items to bulk edit.
     218                $( '#bulk-titles' ).html( '<ul id="bulk-titles-list" role="list">' + te + '</ul>' );
     219
    213220                /**
    214                  * Binds on click events to the checkboxes before the posts in the table.
     221                 * Binds on click events to handle the list of items to bulk edit.
    215222                 *
    216223                 * @listens click
    217224                 */
    218                 $('#bulk-titles a').on( 'click', function(){
    219                         var id = $(this).attr('id').substr(1);
     225                $( '#bulk-titles .ntdelbutton' ).click( function() {
     226                        var $this = $( this ),
     227                                id = $this.attr( 'id' ).substr( 1 ),
     228                                $prev = $this.parent().prev().children( '.ntdelbutton' ),
     229                                $next = $this.parent().next().children( '.ntdelbutton' );
    220230
    221                         $('table.widefat input[value="' + id + '"]').prop('checked', false);
    222                         $('#ttle'+id).remove();
     231                        $( 'table.widefat input[value="' + id + '"]' ).prop( 'checked', false );
     232                        $( '#_' + id ).parent().remove();
     233                        wp.a11y.speak( wp.i18n.__( 'Item removed.' ), 'assertive' );
     234
     235                        // Move focus to a proper place when items are removed.
     236                        if ( $next.length ) {
     237                                $next.focus();
     238                        } else if ( $prev.length ) {
     239                                $prev.focus();
     240                        } else {
     241                                $( '#bulk-titles-list' ).remove();
     242                                inlineEditPost.revert();
     243                                wp.a11y.speak( wp.i18n.__( 'All selected items have been removed. Select new items to use Bulk Actions.' ) );
     244                        }
    223245                });
    224246
    225247                // Enable auto-complete for tags when editing posts.
    … …  
    238260                        } );
    239261                }
    240262
     263                // Set initial focus on the Bulk Edit region.
     264                $( '#bulk-edit .inline-edit-wrapper' ).attr( 'tabindex', '-1' ).focus();
    241265                // Scrolls to the top of the table where the editor is rendered.
    242266                $('html, body').animate( { scrollTop: 0 }, 'fast' );
    243267        },

  • src/wp-admin/css/common.css

     
    789789/* @todo can we combine these into a class or use an existing dashicon one? */
    790790.welcome-panel .welcome-panel-close:before,
    791791.tagchecklist .ntdelbutton .remove-tag-icon:before,
    792 #bulk-titles div a:before,
     792#bulk-titles .ntdelbutton:before,
    793793.notice-dismiss:before {
    794794        background: none;
    795795        color: #787c82;
    … …  
    808808        margin: 0;
    809809}
    810810
    811 #bulk-titles div a:before {
    812         margin: 1px 0;
    813 }
    814 
    815811.tagchecklist .ntdelbutton .remove-tag-icon:before {
    816812        margin-left: 2px;
    817813        border-radius: 50%;
    … …  
    826822
    827823.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
    828824.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
    829 #bulk-titles div a:hover:before,
    830 #bulk-titles div a:focus:before {
     825#bulk-titles .ntdelbutton:hover:before,
     826#bulk-titles .ntdelbutton:focus:before {
    831827        color: #d63638;
    832828}
    833829

  • src/wp-admin/css/list-tables.css

     
    841841/*      Layout */
    842842
    843843#wpbody-content .inline-edit-row fieldset {
    844         font-size: 12px;
    845844        float: left;
    846845        margin: 0;
    847         padding: 0;
     846        padding: 0 12px 0 0;
    848847        width: 100%;
     848        box-sizing: border-box;
    849849}
    850850
    851 tr.inline-edit-row td,
    852 #wpbody-content .inline-edit-row fieldset .inline-edit-col {
    853         padding: 0 0.5em;
     851#wpbody-content .inline-edit-row td fieldset:last-of-type {
     852        padding-right: 0;
    854853}
    855854
     855tr.inline-edit-row td {
     856        padding: 0;
     857        /* Prevents the focus style on .inline-edit-wrapper from being cutted-off */
     858        position: relative;
     859}
     860
     861.inline-edit-wrapper {
     862        display: flow-root;
     863        padding: 0 12px;
     864        border: 1px solid transparent;
     865        border-radius: 4px;
     866}
     867
     868.inline-edit-wrapper:focus {
     869        border-color: #2271b1;
     870        box-shadow: 0 0 0 1px #2271b1;
     871        /* Only visible in Windows High Contrast mode */
     872        outline: 2px solid transparent;
     873}
     874
    856875#wpbody-content .quick-edit-row-post .inline-edit-col-left {
    857876        width: 40%;
    858877}
    … …  
    871890
    872891#wpbody-content .quick-edit-row-page .inline-edit-col-right,
    873892#wpbody-content .bulk-edit-row-post .inline-edit-col-right {
    874         width: 49%;
     893        width: 50%;
    875894}
    876895
    877896#wpbody-content .bulk-edit-row .inline-edit-col-left {
    … …  
    898917
    899918.inline-edit-row .submit {
    900919        clear: both;
    901         padding: 0.5em;
    902         margin: 0.5em 0 0;
     920        margin: 0;
     921        padding: 0.5em 0 1em;
    903922}
    904923
    905924.inline-edit-row .notice-error {
    … …  
    916935/* Needs higher specificity for the padding */
    917936#the-list .inline-edit-row .inline-edit-legend {
    918937        margin: 0;
    919         padding: 0.2em 0.5em 0;
     938        padding: 0.2em 0;
    920939        line-height: 2.5;
    921940        font-weight: 600;
    922941}
    923942
    924 #the-list #bulk-edit.inline-edit-row .inline-edit-legend {
    925         padding: 0.2em 0.5em;
    926 }
    927 
    928943.inline-edit-row fieldset span.title,
    929944.inline-edit-row fieldset span.checkbox-title {
    930945        margin: 0;
    … …  
    10311046        width: 8em;
    10321047}
    10331048
    1034 ul.cat-checklist {
    1035         height: 12em;
    1036         border: solid 1px #dcdcde;
    1037         overflow-y: scroll;
    1038         padding: 0 5px;
    1039         margin: 0;
    1040         background-color: #fff;
    1041 }
    1042 
    1043 #bulk-titles {
    1044         display: block;
    1045         height: 12em;
    1046         border: 1px solid #dcdcde;
    1047         overflow-y: scroll;
    1048         padding: 0 5px;
    1049         margin: 0 0 5px;
    1050 }
    1051 
     1049#bulk-titles-list,
     1050#bulk-titles-list li,
    10521051.inline-edit-row fieldset ul.cat-checklist li,
    10531052.inline-edit-row fieldset ul.cat-checklist input {
    10541053        margin: 0;
    … …  
    10551054        position: relative; /* RTL fix, #WP27629 */
    10561055}
    10571056
    1058 .inline-edit-row fieldset ul.cat-checklist label,
    1059 .inline-edit-row #bulk-titles div {
    1060         font-style: normal;
    1061         font-size: 11px;
     1057.inline-edit-row fieldset ul.cat-checklist input {
     1058        margin-top: -1px;
     1059        margin-left: 3px;
    10621060}
    10631061
    10641062.inline-edit-row fieldset label input.inline-edit-menu-order-input {
    … …  
    10781076        float: left;
    10791077}
    10801078
    1081 #bulk-titles {
    1082         line-height: 140%;
     1079#bulk-titles,
     1080ul.cat-checklist {
     1081        height: 14em;
     1082        border: 1px solid #ddd;
     1083        margin: 0 0 5px;
     1084        padding: 0.2em 5px;
     1085        overflow-y: scroll;
    10831086}
    1084 #bulk-titles div {
    1085         margin: 0.2em 0.3em;
     1087
     1088#bulk-titles .ntdelbutton,
     1089#bulk-titles .ntdeltitle,
     1090.inline-edit-row fieldset ul.cat-checklist label {
     1091        display: inline-block;
     1092        margin: 0;
     1093        padding: 3px 0;
     1094        line-height: 20px;
     1095        vertical-align: top;
    10861096}
    10871097
    1088 #bulk-titles div a {
    1089         cursor: pointer;
    1090         display: block;
    1091         float: left;
    1092         height: 18px;
    1093         margin: 0 3px 0 -2px;
    1094         overflow: hidden;
    1095         position: relative;
    1096         width: 20px;
     1098#bulk-titles .ntdelitem {
     1099        padding-left: 23px;
    10971100}
    10981101
    1099 #bulk-titles div a:before {
    1100         position: relative;
    1101         top: -3px;
     1102#bulk-titles .ntdelbutton {
     1103        width: 26px;
     1104        height: 26px;
     1105        margin: 0 0 0 -26px;
     1106        text-align: center;
     1107        border-radius: 3px;
    11021108}
    11031109
     1110#bulk-titles .ntdelbutton:before {
     1111        display: inline-block;
     1112        vertical-align: top;
     1113}
     1114
     1115#bulk-titles .ntdelbutton:focus {
     1116        box-shadow: 0 0 0 2px #3582c4;
     1117        /* Only visible in Windows High Contrast mode */
     1118        outline: 2px solid transparent;
     1119        /* Reset inherited offset from Gutenberg */
     1120        outline-offset: 0;
     1121}
     1122
    11041123/*------------------------------------------------------------------------------
    11051124  17.0 - Plugins
    11061125------------------------------------------------------------------------------*/
    … …  
    19141933        #wpbody-content .bulk-edit-row .inline-edit-col-bottom {
    19151934                float: none;
    19161935                width: 100%;
     1936                padding: 0;
    19171937        }
    19181938
     1939        #the-list .inline-edit-row .inline-edit-legend,
     1940        .inline-edit-row span.title {
     1941                font-size: 16px;
     1942        }
     1943
     1944        .inline-edit-row p.howto {
     1945                font-size: 14px;
     1946        }
     1947
     1948        #wpbody-content .inline-edit-row-page .inline-edit-col-right {
     1949                margin-top: 0;
     1950        }
     1951
    19191952        #wpbody-content .quick-edit-row fieldset .inline-edit-col label,
    19201953        #wpbody-content .quick-edit-row fieldset .inline-edit-group label,
    19211954        #wpbody-content .bulk-edit-row fieldset .inline-edit-col label,
    … …  
    19411974                padding: 3px 4px;
    19421975        }
    19431976
    1944         .inline-edit-row fieldset ul.cat-checklist label,
    1945         .inline-edit-row #bulk-titles div {
     1977        #bulk-titles .ntdelbutton,
     1978        #bulk-titles .ntdeltitle,
     1979        .inline-edit-row fieldset ul.cat-checklist label {
     1980                padding: 6px 0;
    19461981                font-size: 16px;
     1982                line-height: 28px;
    19471983        }
    19481984
     1985        #bulk-titles .ntdelitem {
     1986                padding-left: 37px;
     1987        }
     1988
     1989        #bulk-titles .ntdelbutton {
     1990                width: 40px;
     1991                height: 40px;
     1992                margin: 0 0 0 -40px;
     1993                overflow: hidden;
     1994        }
     1995
     1996        #bulk-titles .ntdelbutton:before {
     1997                font-size: 20px;
     1998                line-height: 28px;
     1999        }
     2000
    19492001        .inline-edit-row fieldset label span.title,
    19502002        .inline-edit-row fieldset.inline-edit-date legend {
    19512003                float: none;
    19522004        }
    19532005
    1954         .inline-edit-row fieldset label.inline-edit-tags {
    1955                 padding: 0 0.5em;
    1956         }
    1957 
    19582006        .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags {
    19592007                padding: 0;
    19602008        }
    … …  
    19842032                display: block;
    19852033        }
    19862034
    1987         #bulk-titles div {
    1988                 margin: 0.8em 0.3em;
    1989         }
    1990 
    1991         #bulk-titles div a {
    1992                 height: 22px;
    1993         }
    1994 
    19952035        /* Updates */
    19962036        #wpbody-content .updates-table .plugin-title {
    19972037                width: auto;

  • src/wp-admin/includes/class-wp-posts-list-table.php

     
    16121612                        ?>
    16131613                        <tr id="<?php echo $bulk ? 'bulk-edit' : 'inline-edit'; ?>" class="<?php echo $classes; ?>" style="display: none">
    16141614                        <td colspan="<?php echo $this->get_column_count(); ?>" class="colspanchange">
    1615 
     1615                        <div class="inline-edit-wrapper" role="region" aria-labelledby="inline-edit-legend">
    16161616                        <fieldset class="inline-edit-col-left">
    1617                                 <legend class="inline-edit-legend"><?php echo $bulk ? __( 'Bulk Edit' ) : __( 'Quick Edit' ); ?></legend>
     1617                                <legend class="inline-edit-legend" id="inline-edit-legend"><?php echo $bulk ? __( 'Bulk Edit' ) : __( 'Quick Edit' ); ?></legend>
    16181618                                <div class="inline-edit-col">
    16191619
    16201620                                <?php if ( post_type_supports( $screen->post_type, 'title' ) ) : ?>
    … …  
    18291829
    18301830                                                <?php if ( current_user_can( $taxonomy->cap->assign_terms ) ) : ?>
    18311831                                                        <?php $taxonomy_name = esc_attr( $taxonomy->name ); ?>
    1832 
     1832                                                        <div class="inline-edit-tags-wrap">
    18331833                                                        <label class="inline-edit-tags">
    18341834                                                                <span class="title"><?php echo esc_html( $taxonomy->labels->name ); ?></span>
    1835                                                                 <textarea data-wp-taxonomy="<?php echo $taxonomy_name; ?>" cols="22" rows="1" name="tax_input[<?php echo $taxonomy_name; ?>]" class="tax_input_<?php echo $taxonomy_name; ?>"></textarea>
     1835                                                                <textarea data-wp-taxonomy="<?php echo $taxonomy_name; ?>" cols="22" rows="1" name="tax_input[<?php echo esc_attr( $taxonomy->name )?>]" class="tax_input_<?php echo esc_attr( $taxonomy->name )?>" aria-describedby="inline-edit-<?php echo esc_attr( $taxonomy->name )?>-desc"></textarea>
    18361836                                                        </label>
    1837 
     1837                                                        <p class="howto" id="inline-edit-<?php echo esc_attr( $taxonomy->name ); ?>-desc"><?php echo esc_html( $taxonomy->labels->separate_items_with_commas ); ?></p>
     1838                                                        </div>
    18381839                                                <?php endif; // current_user_can( 'assign_terms' ) ?>
    18391840
    18401841                                        <?php endforeach; // $flat_taxonomies as $taxonomy ?>
    … …  
    20292030                                        <p class="error"></p>
    20302031                                </div>
    20312032                        </div>
     2033                </div> <!-- end of .inline-edit-wrapper -->
    20322034
    20332035                        </td></tr>
    20342036