Make WordPress Core

Changeset 38185


Ignore:
Timestamp:
08/03/2016 10:23:50 PM (8 years ago)
Author:
jorbin
Message:

Updates: Improve bulk update failure notice

When doing a bulk update, if there are failures the user needs to know about that. This makes it clearer that you can click on the notification to see more details, especially for screen reader users.

Fixes #37510.
Props juhise, Ankit K Gupta, afercia, jorbin, ocean90. 

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r38152 r38185  
    30253025/* Metabox collapse arrow indicators */
    30263026.js .sidebar-name .sidebar-name-arrow:before,
    3027 .js .meta-box-sortables .postbox .toggle-indicator:before {
     3027.js .meta-box-sortables .postbox .toggle-indicator:before,
     3028.bulk-action-notice .toggle-indicator:before {
    30283029    content: "\f142";
    30293030    display: inline-block;
     
    30363037
    30373038.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
    3038 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
     3039.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
     3040.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
    30393041    content: "\f140";
    30403042}
     
    30643066.rtl.js .postbox .handlediv .toggle-indicator:before {
    30653067    text-indent: 1px; /* account for the dashicon alignment */
     3068}
     3069
     3070.bulk-action-notice .toggle-indicator:before {
     3071    line-height: 16px;
     3072    vertical-align: top;
     3073    color: #72777c;
    30663074}
    30673075
  • trunk/src/wp-admin/includes/update.php

    r38082 r38185  
    635635    </script>
    636636    <script id="tmpl-wp-bulk-updates-admin-notice" type="text/html">
    637         <div id="{{ data.id }}" class="notice <# if ( data.errors ) { #>notice-error<# } else { #>notice-success<# } #>">
     637        <div id="{{ data.id }}" class="{{ data.className }} notice <# if ( data.errors ) { #>notice-error<# } else { #>notice-success<# } #>">
    638638            <p>
    639639                <# if ( data.successes ) { #>
     
    665665                <# } #>
    666666                <# if ( data.errors ) { #>
    667                     <# if ( 1 === data.errors ) { #>
    668                         <button class="button-link">
     667                    <button class="button-link bulk-action-errors-collapsed" aria-expanded="false">
     668                        <# if ( 1 === data.errors ) { #>
    669669                            <?php
    670                             /* translators: %s: Number of failures */
    671                             printf( __( '%s failure.' ), '{{ data.errors }}' );
     670                            /* translators: %s: Number of failed updates */
     671                            printf( __( '%s update failed.' ), '{{ data.errors }}' );
    672672                            ?>
    673                         </button>
    674                     <# } else { #>
    675                         <button class="button-link">
     673                        <# } else { #>
    676674                            <?php
    677                             /* translators: %s: Number of failures */
    678                             printf( __( '%s failures.' ), '{{ data.errors }}' );
     675                            /* translators: %s: Number of failed updates */
     676                            printf( __( '%s updates failed.' ), '{{ data.errors }}' );
    679677                            ?>
    680                         </button>
    681                     <# } #>
     678                        <# } #>
     679                        <span class="screen-reader-text"><?php _e( 'Show more details' ); ?></span>
     680                        <span class="toggle-indicator" aria-hidden="true"></span>
     681                    </button>
    682682                <# } #>
    683683            </p>
    684684            <# if ( data.errors ) { #>
    685                 <ul class="hidden">
     685                <ul class="bulk-action-errors hidden">
    686686                    <# _.each( data.errorMessages, function( errorMessage ) { #>
    687687                        <li>{{ errorMessage }}</li>
  • trunk/src/wp-admin/js/updates.js

    r38175 r38185  
    527527
    528528        $document.trigger( 'wp-plugin-installing', args );
    529        
     529
    530530        return wp.updates.ajax( 'install-plugin', args );
    531531    };
     
    719719
    720720        $document.trigger( 'wp-plugin-deleting', args );
    721        
     721
    722722        return wp.updates.ajax( 'delete-plugin', args );
    723723    };
     
    10441044
    10451045        $document.trigger( 'wp-theme-installing', args );
    1046        
     1046
    10471047        return wp.updates.ajax( 'install-theme', args );
    10481048    };
     
    11751175
    11761176        $document.trigger( 'wp-theme-deleting', args );
    1177        
     1177
    11781178        return wp.updates.ajax( 'delete-theme', args );
    11791179    };
     
    19831983
    19841984            $document.trigger( 'wp-' + type + '-bulk-' + bulkAction, itemsSelected );
    1985            
     1985
    19861986            // Find all the checkboxes which have been checked.
    19871987            itemsSelected.each( function( index, element ) {
     
    20242024                wp.updates.addAdminNotice( {
    20252025                    id:            'bulk-action-notice',
     2026                    className:     'bulk-action-notice',
    20262027                    successes:     success,
    20272028                    errors:        error,
     
    20312032
    20322033                $bulkActionNotice = $( '#bulk-action-notice' ).on( 'click', 'button', function() {
    2033                     $bulkActionNotice.find( 'ul' ).toggleClass( 'hidden' );
     2034                    // $( this ) is the clicked button, no need to get it again.
     2035                    $( this )
     2036                        .toggleClass( 'bulk-action-errors-collapsed' )
     2037                        .attr( 'aria-expanded', ! $( this ).hasClass( 'bulk-action-errors-collapsed' ) );
     2038                    // Show the errors list.
     2039                    $bulkActionNotice.find( '.bulk-action-errors' ).toggleClass( 'hidden' );
    20342040                } );
    20352041
Note: See TracChangeset for help on using the changeset viewer.