WordPress.org

Make WordPress Core

Changeset 45044


Ignore:
Timestamp:
03/27/2019 10:30:26 PM (11 months ago)
Author:
pento
Message:

Site Health: Improve the "Copy to clipboard" button.

The previous method for copying the debug report to the clipboard involved having a hidden <textarea>, but this shows up in screen readers and can't be reliably hidden.

To work around this, the button now uses the clipboard.js library, which automatically handles browser differences in the Clipboard API, and can load the text to copy from a data- attribute on the button.

Props pento, hedgefield, afercia.
Fixes #46647.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/Gruntfile.js

    r44986 r45044  
    167167                    {
    168168                        [ WORKING_DIR + 'wp-includes/js/backbone.js' ]: [ './node_modules/backbone/backbone.js' ],
     169                        [ WORKING_DIR + 'wp-includes/js/clipboard.js' ]: [ './node_modules/clipboard/dist/clipboard.js' ],
    169170                        [ WORKING_DIR + 'wp-includes/js/hoverIntent.js' ]: [ './node_modules/jquery-hoverintent/jquery.hoverIntent.js' ],
    170171                        [ WORKING_DIR + 'wp-includes/js/imagesloaded.min.js' ]: [ './node_modules/imagesloaded/imagesloaded.pkgd.min.js' ],
  • trunk/package.json

    r44960 r45044  
    9595        "@wordpress/wordcount": "2.2.0",
    9696        "backbone": "1.3.3",
     97        "clipboard": "2.0.4",
    9798        "element-closest": "^2.0.2",
    9899        "formdata-polyfill": "3.0.13",
  • trunk/src/js/_enqueues/admin/site-health.js

    r45041 r45044  
    1111    var data;
    1212
     13    var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
     14
    1315    // Debug information copy section.
    14     $( '.health-check-copy-field' ).click( function( e ) {
    15         var $textarea = $( '#system-information-' + $( this ).data( 'copy-field' ) + '-copy-field' ),
    16             $wrapper = $( this ).closest( 'div' );
    17 
    18         e.preventDefault();
    19 
    20         $textarea.select();
    21 
    22         if ( document.execCommand( 'copy' ) ) {
    23             $( '.copy-field-success', $wrapper ).addClass( 'visible' );
    24             $( this ).focus();
    25 
    26             wp.a11y.speak( SiteHealth.string.site_info_copied );
    27         }
     16    clipboard.on( 'success', function( e ) {
     17        var $wrapper = $( e.trigger ).closest( 'div' );
     18        $( '.success', $wrapper ).addClass( 'visible' );
     19
     20        wp.a11y.speak( SiteHealth.string.site_info_copied );
    2821    } );
    2922
  • trunk/src/wp-admin/css/site-health.css

    r45041 r45044  
    210210}
    211211
    212 body.site-health .system-information-copy-wrapper {
     212.site-health-copy-buttons {
    213213    display: block;
    214214    margin: 1rem 0;
    215215}
    216216
    217 body.site-health .system-information-copy-wrapper textarea {
    218     border: 0;
    219     padding: 0;
    220     margin: 0;
    221     position: absolute;
    222     left: -9999px;
    223     top: -9999px;
    224 }
    225 
    226 body.site-health .health-check-toggle-copy-section:hover {
    227     background: none;
    228 }
    229 
    230 body.site-health .system-information-copy-wrapper .copy-button-wrapper {
     217.site-health-copy-buttons .copy-button-wrapper {
    231218    margin: 0.5rem 0 1rem;
    232219}
    233220
    234 body.site-health .copy-field-success {
     221.site-health-copy-buttons .success {
    235222    display: none;
    236223    color: #40860a;
     
    239226}
    240227
    241 body.site-health .copy-field-success.visible {
     228.site-health-copy-buttons .success.visible {
    242229    display: inline-block;
    243230    height: 28px;
  • trunk/src/wp-admin/includes/class-wp-debug-data.php

    r44986 r45044  
    882882
    883883    /**
    884      * Print the formatted variation of the information gathered for debugging, in a manner
    885      * suitable for a text area that can be instantly copied to a forum or support ticket.
     884     * Format the information gathered for debugging, in a manner suitable for copying to a forum or support ticket.
    886885     *
    887886     * @since 5.2.0
    888887     *
    889888     * @param array $info_array Information gathered from the `WP_Debug_Data::debug_data` function.
     889     * @param string $type      Optional. The data type to format the information as. Default 'text'.
     890     * @return string The formatted data.
    890891     */
    891     public static function textarea_format( $info_array ) {
    892         echo "`\n";
     892    public static function format( $info_array, $type = 'text' ) {
     893        $return = '';
    893894
    894895        foreach ( $info_array as $section => $details ) {
     
    898899            }
    899900
    900             printf(
     901            $return .= sprintf(
    901902                "### %s%s ###\n\n",
    902903                $details['label'],
     
    922923                }
    923924
    924                 printf(
     925                $return .= sprintf(
    925926                    "%s: %s\n",
    926927                    $field['label'],
     
    928929                );
    929930            }
    930             echo "\n";
    931         }
    932         echo '`';
     931            $return .= "\n";
     932        }
     933
     934        return $return;
    933935    }
    934936
  • trunk/src/wp-admin/site-health-info.php

    r45041 r45044  
    6262        WP_Debug_Data::check_for_updates();
    6363
    64         $info = WP_Debug_Data::debug_data();
     64        $info         = WP_Debug_Data::debug_data();
     65        $english_info = '';
     66        if ( 0 !== strpos( get_locale(), 'en' ) ) {
     67            $english_info = WP_Debug_Data::debug_data( 'en_US' );
     68        }
    6569        ?>
    6670
     
    7074
    7175        <p>
    72             <?php _e( 'You can export the information on this page so it can be easily copied and pasted in support requests such as on the WordPress.org forums, or shared with your website / theme / plugin developers.' ); ?>
     76            <?php _e( 'This page can show you every detail about the configuration of your WordPress website. If we see anything here that could be improved, we will let you know on the Site Status page.' ); ?>
     77        </p>
     78        <p>
     79            <?php _e( 'If you want to export a handy list of all the information on this page, you can use the button below to copy it to the clipboard. You can then paste it in a text file and save it to your harddrive, or paste it in an email exchange with a support engineer or theme/plugin developer for example.' ); ?>
    7380        </p>
    7481
    75         <div class="system-information-copy-wrapper">
    76             <textarea id="system-information-default-copy-field" readonly><?php WP_Debug_Data::textarea_format( $info ); ?></textarea>
    77 
    78             <?php
    79             if ( 0 !== strpos( get_locale(), 'en' ) ) :
    80 
    81                 $english_info = WP_Debug_Data::debug_data( 'en_US' );
    82                 ?>
    83                 <textarea id="system-information-english-copy-field" readonly><?php WP_Debug_Data::textarea_format( $english_info ); ?></textarea>
    84 
    85             <?php endif; ?>
    86 
     82        <div class="site-health-copy-buttons">
    8783            <div class="copy-button-wrapper">
    88                 <button type="button" class="button button-primary health-check-copy-field" data-copy-field="default"><?php _e( 'Copy to clipboard' ); ?></button>
    89                 <span class="copy-field-success" aria-hidden="true">Copied!</span>
     84                <button type="button" class="button button-primary copy-button" data-clipboard-text="<?php echo esc_attr( WP_Debug_Data::format( $info, 'text' ) ); ?>"><?php _e( 'Copy site info to clipboard' ); ?></button>
     85                <span class="success" aria-hidden="true">Copied!</span>
    9086            </div>
    91             <?php if ( 0 !== strpos( get_locale(), 'en' ) ) : ?>
     87            <?php if ( $english_info ) : ?>
    9288                <div class="copy-button-wrapper">
    93                     <button type="button" class="button health-check-copy-field" data-copy-field="english"><?php _e( 'Copy to clipboard (English)' ); ?></button>
    94                     <span class="copy-field-success" aria-hidden="true">Copied!</span>
     89                    <button type="button" class="button copy-button" data-clipboard-text="<?php echo esc_attr( WP_Debug_Data::format( $english_info, 'text' ) ); ?>"><?php _e( 'Copy site info to clipboard (English)' ); ?></button>
     90                    <span class="success" aria-hidden="true">Copied!</span>
    9591                </div>
    9692            <?php endif; ?>
  • trunk/src/wp-includes/script-loader.php

    r44986 r45044  
    925925    $scripts->add( 'editor', "/wp-admin/js/editor$suffix.js", array( 'utils', 'jquery' ), false, 1 );
    926926
     927    $scripts->add( 'clipboard', "/wp-includes/js/clipboard$suffix.js", array(), false, 1 );
     928
    927929    // Back-compat for old DFW. To-do: remove at the end of 2016.
    928930    $scripts->add( 'wp-fullscreen-stub', "/wp-admin/js/wp-fullscreen-stub$suffix.js", array(), false, 1 );
     
    16891691        );
    16901692
    1691         $scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
     1693        $scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'clipboard', 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
    16921694
    16931695        $scripts->add( 'updates', "/wp-admin/js/updates$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
Note: See TracChangeset for help on using the changeset viewer.