WordPress.org
Get WordPress

Make WordPress Core

Ticket #27555: 27555.7.diff

File 27555.7.diff, 19.5 KB (added by afercia, 7 years ago)

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

     
    759759
    760760/* @todo can we combine these into a class or use an existing dashicon one? */
    761761.welcome-panel .welcome-panel-close:before,
    762 .tagchecklist span a:before,
     762.tagchecklist .ntdelbutton .remove-tag-icon:before,
    763763#bulk-titles div a:before,
    764764.notice-dismiss:before {
    765765        background: none;
    … …  
    779779        margin: 0;
    780780}
    781781
    782 .tagchecklist span a:before,
    783782#bulk-titles div a:before {
    784783        margin: 1px 0;
    785784}
    786785
     786.tagchecklist .ntdelbutton .remove-tag-icon:before {
     787        margin-left: 2px;
     788        -webkit-border-radius: 50%;
     789        border-radius: 50%;
     790        color: #0073aa;
     791        /* vertically center the icon cross browsers */
     792        line-height: 1.28;
     793}
     794
     795.tagchecklist .ntdelbutton:focus {
     796        outline: 0;
     797}
     798
    787799.welcome-panel .welcome-panel-close:hover:before,
    788800.welcome-panel .welcome-panel-close:focus:before,
    789 .tagchecklist span a:hover:before,
    790 #bulk-titles div a:hover:before {
     801.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
     802.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
     803#bulk-titles div a:hover:before,
     804#bulk-titles div a:focus:before {
    791805        color: #c00;
    792806}
    793807
     808.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     809        -webkit-box-shadow:
     810                0 0 0 1px #5b9dd9,
     811                0 0 2px 1px rgba(30, 140, 190, .8);
     812        box-shadow:
     813                0 0 0 1px #5b9dd9,
     814                0 0 2px 1px rgba(30, 140, 190, .8);
     815}
     816
    794817.key-labels label {
    795818        line-height: 24px;
    796819}
    … …  
    35713594        .sidebar-name-arrow,
    35723595        .sidebar-name:hover .sidebar-name-arrow,
    35733596        .meta-box-sortables .postbox:hover .handlediv,
    3574         .tagchecklist span a,
    35753597        #bulk-titles div a,
    3576         .tagchecklist span a:hover,
    35773598        #bulk-titles div a:hover {
    35783599                background: none !important;
    35793600        }

  • src/wp-admin/css/customize-controls.css

     
    276276        box-sizing: border-box;
    277277        -webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
    278278        transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
     279        -webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
    279280        transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
     281        -webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
    280282        transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
    281283}
    282284

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

     
    582582        position: absolute;
    583583}
    584584
    585 .tagchecklist span {
     585.tagchecklist > span {
     586        float: left;
    586587        margin-right: 25px;
    587         display: block;
    588         float: left;
    589588        font-size: 13px;
    590589        line-height: 1.8em;
    591590        cursor: default;
    … …  
    594593        text-overflow: ellipsis;
    595594}
    596595
    597 .tagchecklist span a {
    598         margin: 1px 0 0 -17px;
     596.tagchecklist .ntdelbutton {
     597        position: absolute;
     598        width: 24px;
     599        height: 24px;
     600        border: none;
     601        margin: 0 0 0 -19px;
     602        padding: 0;
     603        background: none;
    599604        cursor: pointer;
    600         width: 20px;
    601         height: 20px;
    602         display: block;
    603         float: left;
    604605        text-indent: 0;
    605         overflow: hidden;
    606         position: absolute;
    607606}
    608607
    609608#poststuff h3.hndle, /* Back-compat for pre-4.4 */
    … …  
    10271026        width: 260px;
    10281027}
    10291028
     1029.tagcloud-link.button-link {
     1030        color: #0073aa;
     1031        text-decoration: underline;
     1032}
     1033
     1034.tagcloud-link.button-link:hover {
     1035        color: #00a0d2;
     1036}
     1037
     1038.tagcloud-link.button-link:focus {
     1039        color: #124964;
     1040        -webkit-box-shadow:
     1041                0 0 0 1px #5b9dd9,
     1042                0 0 2px 1px rgba(30, 140, 190, .8);
     1043        box-shadow:
     1044                0 0 0 1px #5b9dd9,
     1045                0 0 2px 1px rgba(30, 140, 190, .8);
     1046}
     1047
    10301048#post-body-content .tagsdiv .the-tags {
    10311049        margin: 0 5px;
    10321050}
    … …  
    10521070        margin: 2px 0 12px;
    10531071}
    10541072
     1073/* Suggest.js autocomplete, no more used by core. */
    10551074.ac_results {
    10561075        display: none;
    10571076        margin: -1px 0 0;
    … …  
    14381457                margin: 25px 10px;
    14391458        }
    14401459
    1441         .tagchecklist span {
     1460        .tagchecklist > span {
    14421461                font-size: 16px;
    14431462                line-height: 1.4;
    14441463        }

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

     
    594594        padding: 4px 10px;
    595595        white-space: nowrap;
    596596        text-align: left;
     597        cursor: pointer;
    597598}
    598599
    599 .ui-autocomplete li.ui-state-focus {
     600/* Colors for the wplink toolbar autocomplete. */
     601.ui-autocomplete .ui-state-focus {
    600602        background-color: #ddd;
    601         cursor: pointer;
    602603}
    603604
     605/* Colors for the tags autocomplete. */
     606.wp-tags-autocomplete .ui-state-focus {
     607        background-color: #0073aa;
     608        color: #fff;
     609}
     610
    604611/*------------------------------------------------------------------------------
    605612  15.0 - Comments Screen
    606613------------------------------------------------------------------------------*/

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

     
    441441        padding-right: 1px;
    442442}
    443443
    444 .tagchecklist span, .tagchecklist span a {
     444.tagchecklist > span, .tagchecklist .ntdelbutton {
    445445        display: inline-block;
    446446        display: block;
    447447}
    448448
     449.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     450        outline: 1px solid #5b9dd9;
     451}
     452
    449453.tablenav .button,
    450454.nav .button {
    451455        padding-top: 2px;

  • src/wp-admin/css/press-this.css

     
    770770        margin: 10px 0 6px 16px;
    771771}
    772772
    773 
    774 /* Tag hint TODO needed? */
    775 /* Tag suggestions */
    776 .ac_results {
    777         padding: 0;
    778         margin: -1px 0 0 -1px;
    779         list-style: none;
    780         position: absolute;
    781         z-index: 10000;
    782         display: none;
    783         border: 1px solid #d8d8d8;
    784         background-color: #fff;
    785         font-size: 14px;
    786 }
    787 
    788 .ac_results li {
    789         padding: 6px 16px;
    790         white-space: nowrap;
    791         text-align: left;
    792 }
    793 
    794 .ac_results .ac_over {
    795         background-color: #e5e5e5;
    796         background-color: #00a0d2;
    797         color: #fff;
    798         cursor: pointer;
    799 }
    800 
    801 .ac_match {
    802         text-decoration: underline;
    803 }
    804 
    805773/* Tags */
    806774.tagchecklist {
    807775        padding: 16px 28px 5px;
    … …  
    817785        clear: both;
    818786}
    819787
    820 .tagchecklist span {
    821         display: block;
     788.tagchecklist > span {
     789        float: left;
    822790        margin-right: 25px;
    823         float: left;
    824791        font-size: 13px;
    825792        line-height: 1.8;
    826793        white-space: nowrap;
    … …  
    828795}
    829796
    830797@media (max-width: 600px) {
    831         .tagchecklist span {
     798        .tagchecklist > span {
    832799                margin-bottom: 15px;
    833800                font-size: 16px;
    834801                line-height: 1.3;
    … …  
    836803}
    837804
    838805.tagchecklist .ntdelbutton {
    839         margin: 1px 0 0 -17px;
     806        position: absolute;
     807        width: 24px;
     808        height: 24px;
     809        border: none;
     810        margin: 0 0 0 -19px;
     811        padding: 0;
     812        background: none;
    840813        cursor: pointer;
    841         width: 20px;
    842         height: 20px;
    843         display: block;
    844         float: left;
    845         text-indent: 0;
    846         overflow: hidden;
     814        text-indent: 0;;
    847815        position: absolute;
    848         outline: 0;
    849816}
    850817
    851 .tagchecklist .ntdelbutton:before {
     818.tagchecklist .ntdelbutton .remove-tag-icon:before {
    852819        content: "\f153";
    853820        display: block;
    854         margin: 2px 0;
     821        margin-left: 2px;
    855822        height: 20px;
    856823        width: 20px;
    857         background: 0 0;
    858         color: #9ea7af;
    859         font: 400 16px/1 dashicons;
     824        -webkit-border-radius: 50%;
     825        border-radius: 50%;
     826        background: transparent;
     827        color: #0073aa;
     828        /* line-height tweak to vertically center the icon cross browsers */
     829        font: 400 16px/1.28 dashicons;
    860830        text-align: center;
    861         speak: none;
    862831        -webkit-font-smoothing: antialiased;
    863832}
    864833
    865 .tagchecklist .ntdelbutton:focus:before {
    866         color: #00a0d2;
     834.tagchecklist .ntdelbutton:focus {
     835        outline: 0;
    867836}
    868837
     838.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
     839.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     840        color: #c00;
     841}
    869842
     843.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     844        -webkit-box-shadow:
     845                0 0 0 1px #5b9dd9,
     846                0 0 2px 1px rgba(30, 140, 190, .8);
     847        box-shadow:
     848                0 0 0 1px #5b9dd9,
     849                0 0 2px 1px rgba(30, 140, 190, .8);
     850}
     851
    870852/* THE TAG CLOUD. */
    871853.tagsdiv + p {
    872854        margin: 0;
    … …  
    21942176        -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
    21952177        box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
    21962178        background-color: #fff;
     2179        font-size: 14px;
    21972180}
    21982181
    21992182.ui-autocomplete li {
    … …  
    22012184        padding: 4px 10px;
    22022185        white-space: nowrap;
    22032186        text-align: left;
     2187        cursor: pointer;
    22042188}
    22052189
    2206 .ui-autocomplete li.ui-state-focus {
     2190/* Colors for the wplink toolbar autocomplete. */
     2191.ui-autocomplete .ui-state-focus {
    22072192        background-color: #ddd;
    2208         cursor: pointer;
    22092193}
     2194
     2195/* Colors for the tags autocomplete. */
     2196.wp-tags-autocomplete .ui-state-focus {
     2197        background-color: #0073aa;
     2198        color: #fff;
     2199}

  • src/wp-admin/includes/class-wp-press-this.php

     
    940940
    941941                if ( $user_can_assign_terms ) {
    942942                        ?>
    943                         <button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
     943                        <button type="button" class="button-link tagcloud-link" id="link-post_tag" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
    944944                        <?php
    945945                }
    946946        }

  • src/wp-admin/includes/meta-boxes.php

     
    442442        <div class="tagchecklist"></div>
    443443</div>
    444444<?php if ( $user_can_assign_terms ) : ?>
    445 <p class="hide-if-no-js"><a href="#titlediv" class="tagcloud-link" id="link-<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->choose_from_most_used; ?></a></p>
     445<p class="hide-if-no-js"><button type="button" class="button-link tagcloud-link" id="link-<?php echo $tax_name; ?>" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button></p>
    446446<?php endif; ?>
    447447<?php
    448448}

  • src/wp-admin/js/tags-box.js

     
    8686
    8787                                // If tags editing isn't disabled, create the X button.
    8888                                if ( ! disabled ) {
    89                                         xbutton = $( '<a id="' + id + '-check-num-' + key + '" class="ntdelbutton" tabindex="0">X</a>' );
     89                                        /*
     90                                         * Build the X buttons, hide the X icon with aria-hidden and
     91                                         * use visually hidden text for screen readers.
     92                                         */
     93                                        xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
     94                                                '<span class="remove-tag-icon" aria-hidden="true"></span>' +
     95                                                '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + val + '</span>' +
     96                                                '</button>' );
    9097
    9198                                        xbutton.on( 'click keypress', function( e ) {
    92                                                 // Trigger function if pressed Enter - keyboard navigation
    93                                                 if ( e.type === 'click' || e.keyCode === 13 ) {
    94                                                         // When using keyboard, move focus back to the new tag field.
    95                                                         if ( e.keyCode === 13 ) {
    96                                                                 $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
    97                                                         }
     99                                                // On click or when using the Enter/Spacebar keys.
     100                                                if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
     101                                                        /*
     102                                                         * When using the keyboard, move focus back to the
     103                                                         * add new tag field. Note: when releasing the pressed
     104                                                         * key this will fire the `keyup` event on the input.
     105                                                         */
     106                                                        if ( 13 === e.keyCode || 32 === e.keyCode ) {
     107                                                                $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
     108                                                        }
    98109
     110                                                        tagBox.userAction = 'remove';
    99111                                                        tagBox.parseTags( this );
    100112                                                }
    101113                                        });
    … …  
    106118                                // Append the span to the tag list.
    107119                                tagchecklist.append( span );
    108120                        });
     121                        // The buttons list is built now, give feedback to screen reader users.
     122                        tagBox.screenReadersMessage();
    109123                },
    110124
    111125                flushTags : function( el, a, f ) {
    … …  
    117131
    118132                        text = a ? $(a).text() : newtag.val();
    119133
    120                         if ( 'undefined' == typeof( text ) ) {
     134                        /*
     135                         * Return if there's no new tag or if the input field is empty.
     136                         * Note: when using the keyboard to add tags, focus is moved back to
     137                         * the input field and the `keyup` event attached on this field will
     138                         * fire when releasing the pressed key. Checking also for the field
     139                         * emptiness avoids to set the tags and call quickClicks() again.
     140                         */
     141                        if ( 'undefined' == typeof( text ) || '' === text ) {
    121142                                return false;
    122143                        }
    123144
    … …  
    148169                                r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
    149170
    150171                                $( 'a', r ).click( function() {
     172                                        tagBox.userAction = 'add';
    151173                                        tagBox.flushTags( $( '#' + tax ), this );
    152174                                        return false;
    153175                                });
    … …  
    156178                        });
    157179                },
    158180
     181                /**
     182                 * Track the user's last action.
     183                 *
     184                 * @since 4.7.0
     185                 */
     186                userAction: '',
     187
     188                /**
     189                 * Dispatch an audible message to screen readers.
     190                 *
     191                 * @since 4.7.0
     192                 */
     193                screenReadersMessage: function() {
     194                        var message;
     195
     196                        switch ( this.userAction ) {
     197                                case 'remove':
     198                                        message = window.tagsSuggestL10n.termRemoved;
     199                                        break;
     200
     201                                case 'add':
     202                                        message = window.tagsSuggestL10n.termAdded;
     203                                        break;
     204
     205                                default:
     206                                        return;
     207                        }
     208
     209                        window.wp.a11y.speak( message, 'assertive' );
     210                },
     211
    159212                init : function() {
    160213                        var ajaxtag = $('div.ajaxtag');
    161214
    … …  
    164217                        });
    165218
    166219                        $( '.tagadd', ajaxtag ).click( function() {
     220                                tagBox.userAction = 'add';
    167221                                tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
    168222                        });
    169223
    170224                        $( 'input.newtag', ajaxtag ).keyup( function( event ) {
    171225                                if ( 13 == event.which ) {
     226                                        tagBox.userAction = 'add';
    172227                                        tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
    173228                                        event.preventDefault();
    174229                                        event.stopPropagation();
    … …  
    189244                                });
    190245                        });
    191246
    192                         // tag cloud
     247                        // Fetch and toggle the Tag cloud.
    193248                        $('.tagcloud-link').click(function(){
    194                                 tagBox.get( $(this).attr('id') );
    195                                 $(this).unbind().click(function(){
    196                                         $(this).siblings('.the-tagcloud').toggle();
    197                                         return false;
    198                                 });
    199                                 return false;
     249                                // On the first click, fetch the tag cloud and insert it in the DOM.
     250                                tagBox.get( $( this ).attr( 'id' ) );
     251                                // Update button state, remove previous click event and attach a new one to toggle the cloud.
     252                                $( this )
     253                                        .attr( 'aria-expanded', 'true' )
     254                                        .unbind()
     255                                        .click( function() {
     256                                                $( this )
     257                                                        .attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
     258                                                        .siblings( '.the-tagcloud' ).toggle();
     259                                        });
    200260                        });
    201261                }
    202262        };

  • src/wp-admin/js/tags-suggest.js

     
     1/**
     2 * Default settings for jQuery UI Autocomplete for use with non-hierarchical taxonomies.
     3 */
    14( function( $ ) {
     5        if ( typeof window.tagsSuggestL10n === 'undefined' || typeof window.uiAutocompleteL10n === 'undefined' ) {
     6                return;
     7        }
     8
    29        var tempID = 0;
    3         var separator = ( window.tagsSuggestL10n && window.tagsSuggestL10n.tagDelimiter ) || ',';
     10        var separator = window.tagsSuggestL10n.tagDelimiter || ',';
    411
    512        function split( val ) {
    613                return val.split( new RegExp( separator + '\\s*' ) );
    … …  
    1017                return split( term ).pop();
    1118        }
    1219
     20        /**
     21         * Add UI Autocomplete to an input or textarea element with presets for use
     22         * with non-hierarchical taxonomies.
     23         *
     24         * Example: `$( element ).wpTagsSuggest( options )`.
     25         *
     26         * The taxonomy can be passed in a `data-wp-taxonomy` attribute on the element or
     27         * can be in `options.taxonomy`.
     28         *
     29         * @since 4.7
     30         *
     31         * @param {object} options Options that are passed to UI Autocomplete. Can be used to override the default settings.
     32         * @returns {object} jQuery instance.
     33         */
    1334        $.fn.wpTagsSuggest = function( options ) {
    1435                var cache;
    1536                var last;
    … …  
    1637                var $element = $( this );
    1738
    1839                options = options || {};
    19                
     40
    2041                var taxonomy = options.taxonomy || $element.attr( 'data-wp-taxonomy' ) || 'post_tag';
    21                
     42
    2243                delete( options.taxonomy );
    2344
    2445                options = $.extend( {
    25                         source: function( request, response ) {                         
     46                        source: function( request, response ) {
    2647                                var term;
    2748
    2849                                if ( last === request.term ) {
    … …  
    3960                                } ).always( function() {
    4061                                        $element.removeClass( 'ui-autocomplete-loading' ); // UI fails to remove this sometimes?
    4162                                } ).done( function( data ) {
    42                                         var value;
    43                                         var terms = [];
     63                                        var tagName;
     64                                        var tags = [];
    4465
    4566                                        if ( data ) {
    4667                                                data = data.split( '\n' );
    4768
    48                                                 for ( value in data ) {
     69                                                for ( tagName in data ) {
    4970                                                        var id = ++tempID;
    5071
    51                                                         terms.push({
     72                                                        tags.push({
    5273                                                                id: id,
    53                                                                 name: data[value]
     74                                                                name: data[tagName]
    5475                                                        });
    5576                                                }
    5677
    57                                                 cache = terms;
    58                                                 response( terms );
     78                                                cache = tags;
     79                                                response( tags );
    5980                                        } else {
    60                                                 response( terms );
     81                                                response( tags );
    6182                                        }
    6283                                } );
    6384
    … …  
    80101                                $element.val( tags.join( separator + ' ' ) );
    81102
    82103                                if ( $.ui.keyCode.TAB === event.keyCode ) {
    83                                         if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
    84                                                 // Audible confirmation message when a tag has been selected.
    85                                                 window.wp.a11y.speak( window.uiAutocompleteL10n.itemSelected );
    86                                         }
    87 
     104                                        // Audible confirmation message when a tag has been selected.
     105                                        window.wp.a11y.speak( window.tagsSuggestL10n.termSelected, 'assertive' );
    88106                                        event.preventDefault();
    89107                                } else if ( $.ui.keyCode.ENTER === event.keyCode ) {
    90108                                        // Do not close Quick Edit / Bulk Edit
    … …  
    105123                                my: 'left top+2'
    106124                        },
    107125                        messages: {
    108                                 noResults: ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.noResults : '',
     126                                noResults: window.uiAutocompleteL10n.noResults,
    109127                                results: function( number ) {
    110                                         if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
    111                                                 if ( number > 1 ) {
    112                                                         return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
    113                                                 }
     128                                        if ( number > 1 ) {
     129                                                return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
     130                                        }
    114131
    115                                                 return window.uiAutocompleteL10n.oneResult;
    116                                         }
     132                                        return window.uiAutocompleteL10n.oneResult;
    117133                                }
    118134                        }
    119135                }, options );
    … …  
    160176                                // so we need to find the active item with other means.
    161177                                $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
    162178                        });
    163                        
     179
    164180                return this;
    165181        };
    166182

  • src/wp-includes/script-loader.php

     
    538538                $scripts->add( 'tags-suggest', "/wp-admin/js/tags-suggest$suffix.js", array( 'jquery-ui-autocomplete', 'wp-a11y' ), false, 1 );
    539539                did_action( 'init' ) && $scripts->localize( 'tags-suggest', 'tagsSuggestL10n', array(
    540540                        'tagDelimiter' => _x( ',', 'tag delimiter' ),
     541                        'removeTerm'   => __( 'Remove term:' ),
     542                        'termSelected' => __( 'Term selected.' ),
     543                        'termAdded'    => __( 'Term added.' ),
     544                        'termRemoved'  => __( 'Term removed.' ),
    541545                ) );
    542546
    543547                $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );