WordPress.org
Get WordPress

Make WordPress Core

Ticket #50516: 50516.2.diff

File 50516.2.diff, 9.1 KB (added by afercia, 3 years ago)

  • src/js/_enqueues/wp/updates.js

     
    26772677                $( window ).on( 'beforeunload', wp.updates.beforeunload );
    26782678
    26792679                /**
    2680                  * Click handler for enabling and disabling plugin and theme auto-updates.
     2680                 * Prevents the page form scrolling when activating auto-updates with the Spacebar key.
    26812681                 *
    26822682                 * @since 5.5.0
    26832683                 */
    2684                 $document.on( 'click', '.column-auto-updates a.toggle-auto-update, .theme-overlay a.toggle-auto-update', function( event ) {
    2685                         var data, asset, type, $parent;
    2686                         var $anchor = $( this ),
    2687                                 action = $anchor.attr( 'data-wp-action' ),
    2688                                 $label = $anchor.find( '.label' );
     2684                $document.on( 'keydown', '.column-auto-updates .toggle-auto-update, .theme-overlay .toggle-auto-update', function( event ) {
     2685                        if ( 32 === event.which ) {
     2686                                event.preventDefault();
     2687                        }
     2688                } );
    26892689
     2690                /**
     2691                 * Click and keyup handler for enabling and disabling plugin and theme auto-updates.
     2692                 *
     2693                 * These controls can be either links or buttons. When JavaScript is enabled,
     2694                 * we want them to behave like buttons. An ARIA role `button` is added via
     2695                 * the JavaScript that targets elements with the CSS class `aria-button-if-js`.
     2696                 *
     2697                 * @since 5.5.0
     2698                 */
     2699                $document.on( 'click keyup', '.column-auto-updates .toggle-auto-update, .theme-overlay .toggle-auto-update', function( event ) {
     2700                        var data, asset, type, $parent,
     2701                                $toggler = $( this ),
     2702                                action = $toggler.attr( 'data-wp-action' ),
     2703                                $label = $toggler.find( '.label' );
     2704
     2705                        if ( 'keyup' === event.type && 32 !== event.which ) {
     2706                                return;
     2707                        }
     2708
    26902709                        if ( 'themes' !== pagenow ) {
    2691                                 $parent = $anchor.closest( '.column-auto-updates' );
     2710                                $parent = $toggler.closest( '.column-auto-updates' );
    26922711                        } else {
    2693                                 $parent = $anchor.closest( '.theme-autoupdate' );
     2712                                $parent = $toggler.closest( '.theme-autoupdate' );
    26942713                        }
    26952714
    26962715                        event.preventDefault();
    26972716
    26982717                        // Prevent multiple simultaneous requests.
    2699                         if ( $anchor.attr( 'data-doing-ajax' ) === 'yes' ) {
     2718                        if ( $toggler.attr( 'data-doing-ajax' ) === 'yes' ) {
    27002719                                return;
    27012720                        }
    27022721
    2703                         $anchor.attr( 'data-doing-ajax', 'yes' );
     2722                        $toggler.attr( 'data-doing-ajax', 'yes' );
    27042723
    27052724                        switch ( pagenow ) {
    27062725                                case 'plugins':
    27072726                                case 'plugins-network':
    27082727                                        type = 'plugin';
    2709                                         asset = $anchor.closest( 'tr' ).attr( 'data-plugin' );
     2728                                        asset = $toggler.closest( 'tr' ).attr( 'data-plugin' );
    27102729                                        break;
    27112730                                case 'themes-network':
    27122731                                        type = 'theme';
    2713                                         asset = $anchor.closest( 'tr' ).attr( 'data-slug' );
     2732                                        asset = $toggler.closest( 'tr' ).attr( 'data-slug' );
    27142733                                        break;
    27152734                                case 'themes':
    27162735                                        type = 'theme';
    2717                                         asset = $anchor.attr( 'data-slug' );
     2736                                        asset = $toggler.attr( 'data-slug' );
    27182737                                        break;
    27192738                        }
    27202739
    … …  
    27282747                                $label.text( __( 'Disabling...' ) );
    27292748                        }
    27302749
    2731                         $anchor.find( '.dashicons-update' ).removeClass( 'hidden' );
     2750                        $toggler.find( '.dashicons-update' ).removeClass( 'hidden' );
    27322751
    27332752                        data = {
    27342753                                action: 'toggle-auto-updates',
    … …  
    27402759
    27412760                        $.post( window.ajaxurl, data )
    27422761                                .done( function( response ) {
    2743                                         var $enabled, $disabled, enabledNumber, disabledNumber, errorMessage;
    2744                                         var href = $anchor.attr( 'href' );
     2762                                        var $enabled, $disabled, enabledNumber, disabledNumber, errorMessage,
     2763                                                href = $toggler.attr( 'href' );
    27452764
    27462765                                        if ( ! response.success ) {
    27472766                                                // if WP returns 0 for response (which can happen in a few cases),
    … …  
    27842803                                        }
    27852804
    27862805                                        if ( 'enable' === action ) {
    2787                                                 href = href.replace( 'action=enable-auto-update', 'action=disable-auto-update' );
    2788                                                 $anchor.attr( {
    2789                                                         'data-wp-action': 'disable',
    2790                                                         href: href
    2791                                                 } );
     2806                                                // The toggler control can be either a link or a button.
     2807                                                if ( $toggler[ 0 ].hasAttribute( 'href' ) ) {
     2808                                                        href = href.replace( 'action=enable-auto-update', 'action=disable-auto-update' );
     2809                                                        $toggler.attr( 'href', href );
     2810                                                }
     2811                                                $toggler.attr( 'data-wp-action', 'disable' );
    27922812
    27932813                                                $label.text( __( 'Disable auto-updates' ) );
    27942814                                                $parent.find( '.auto-update-time' ).removeClass( 'hidden' );
    2795                                                 wp.a11y.speak( __( 'Enable auto-updates' ), 'polite' );
     2815                                                wp.a11y.speak( __( 'Auto-updates enabled' ) );
    27962816                                        } else {
    2797                                                 href = href.replace( 'action=disable-auto-update', 'action=enable-auto-update' );
    2798                                                 $anchor.attr( {
    2799                                                         'data-wp-action': 'enable',
    2800                                                         href: href
    2801                                                 } );
     2817                                                // The toggler control can be either a link or a button.
     2818                                                if ( $toggler[ 0 ].hasAttribute( 'href' ) ) {
     2819                                                        href = href.replace( 'action=disable-auto-update', 'action=enable-auto-update' );
     2820                                                        $toggler.attr( 'href', href );
     2821                                                }
     2822                                                $toggler.attr( 'data-wp-action', 'enable' );
    28022823
    28032824                                                $label.text( __( 'Enable auto-updates' ) );
    28042825                                                $parent.find( '.auto-update-time' ).addClass( 'hidden' );
    2805                                                 wp.a11y.speak( __( 'Auto-updates disabled' ), 'polite' );
     2826                                                wp.a11y.speak( __( 'Auto-updates disabled' ) );
    28062827                                        }
    28072828
    28082829                                        $document.trigger( 'wp-auto-update-setting-changed', { state: action, type: type, asset: asset } );
    … …  
    28162837                                        wp.a11y.speak( __( 'The request could not be completed.' ), 'polite' );
    28172838                                } )
    28182839                                .always( function() {
    2819                                         $anchor.removeAttr( 'data-doing-ajax' ).find( '.dashicons-update' ).addClass( 'hidden' );
     2840                                        $toggler.removeAttr( 'data-doing-ajax' ).find( '.dashicons-update' ).addClass( 'hidden' );
    28202841                                } );
    28212842                        }
    28222843                );

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

     
    14991499        animation: rotation 2s infinite linear;
    15001500}
    15011501
     1502.theme-overlay .theme-autoupdate .dashicons-update.spin {
     1503        margin-right: 3px;
     1504}
     1505
    15021506/* Updated icon (check mark). */
    15031507.updated-message p:before,
    15041508.installed p:before,

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

     
    684684        text-decoration: none;
    685685}
    686686
     687.theme-overlay .toggle-auto-update {
     688        /* Better align spin icon and text. */
     689        display: inline-flex;
     690        align-items: center;
     691        /* Prevents content after the auto-update toggler from jumping down and up. */
     692        min-height: 20px; /* Same height as the spinning dashicon. */
     693        vertical-align: top;
     694}
     695
    687696.theme-overlay .theme-description {
    688697        color: #555;
    689698        font-size: 15px;

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

     
    744744                $url = add_query_arg( $query_args, 'themes.php' );
    745745
    746746                $html[] = sprintf(
    747                         '<a href="%s" class="toggle-auto-update" data-wp-action="%s">',
     747                        '<a href="%s" class="toggle-auto-update aria-button-if-js" data-wp-action="%s">',
    748748                        wp_nonce_url( $url, 'updates' ),
    749749                        $action
    750750                );

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

     
    10761076                                        $url = add_query_arg( $query_args, 'plugins.php' );
    10771077
    10781078                                        $html[] = sprintf(
    1079                                                 '<a href="%s" class="toggle-auto-update" data-wp-action="%s">',
     1079                                                '<a href="%s" class="toggle-auto-update aria-button-if-js" data-wp-action="%s">',
    10801080                                                wp_nonce_url( $url, 'updates' ),
    10811081                                                $action
    10821082                                        );

  • src/wp-admin/themes.php

     
    562562        $template = '
    563563                <div class="theme-autoupdate">
    564564                        <# if ( data.autoupdate ) { #>
    565                                 <a href="{{{ data.actions.autoupdate }}}" class="toggle-auto-update" data-slug="{{ data.id }}" data-wp-action="disable">
    566                                         <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span>
    567                                         <span class="label">' . __( 'Disable auto-updates' ) . '</span>
    568                                 </a>
     565                                <button type="button" class="toggle-auto-update button-link" data-slug="{{ data.id }}" data-wp-action="disable">
     566                                        <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span><span class="label">' . __( 'Disable auto-updates' ) . '</span>
     567                                </button>
    569568                        <# } else { #>
    570                                 <a href="{{{ data.actions.autoupdate }}}" class="toggle-auto-update" data-slug="{{ data.id }}" data-wp-action="enable">
    571                                         <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span>
    572                                         <span class="label">' . __( 'Enable auto-updates' ) . '</span>
     569                                <button type="button" class="toggle-auto-update button-link" data-slug="{{ data.id }}" data-wp-action="enable">
     570                                        <span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span><span class="label">' . __( 'Enable auto-updates' ) . '</span>
    573571                                </a>
    574572                        <# } #>
    575573                        <# if ( data.hasUpdate ) { #>