Changeset 45044

Timestamp:

03/27/2019 10:30:26 PM (5 years 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:

• Gruntfile.js (modified) (1 diff)
• package.json (modified) (1 diff)
• src/js/_enqueues/admin/site-health.js (modified) (1 diff)
• src/wp-admin/css/site-health.css (modified) (2 diffs)
• src/wp-admin/includes/class-wp-debug-data.php (modified) (4 diffs)
• src/wp-admin/site-health-info.php (modified) (2 diffs)
• src/wp-includes/script-loader.php (modified) (2 diffs)

trunk/Gruntfile.js

@@ -167 +167 @@
                     {
                         [ WORKING_DIR + 'wp-includes/js/backbone.js' ]: [ './node_modules/backbone/backbone.js' ],
+                        [ WORKING_DIR + 'wp-includes/js/clipboard.js' ]: [ './node_modules/clipboard/dist/clipboard.js' ],
                         [ WORKING_DIR + 'wp-includes/js/hoverIntent.js' ]: [ './node_modules/jquery-hoverintent/jquery.hoverIntent.js' ],
                         [ WORKING_DIR + 'wp-includes/js/imagesloaded.min.js' ]: [ './node_modules/imagesloaded/imagesloaded.pkgd.min.js' ],

trunk/package.json

@@ -95 +95 @@
         "@wordpress/wordcount": "2.2.0",
         "backbone": "1.3.3",
+        "clipboard": "2.0.4",
         "element-closest": "^2.0.2",
         "formdata-polyfill": "3.0.13",

trunk/src/js/_enqueues/admin/site-health.js

@@ -11 +11 @@
     var data;
 
+    var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
+
     // Debug information copy section.
-    $( '.health-check-copy-field' ).click( function( e ) {
-        var $textarea = $( '#system-information-' + $( this ).data( 'copy-field' ) + '-copy-field' ),
-            $wrapper = $( this ).closest( 'div' );
-
-        e.preventDefault();
-
-        $textarea.select();
-
-        if ( document.execCommand( 'copy' ) ) {
-            $( '.copy-field-success', $wrapper ).addClass( 'visible' );
-            $( this ).focus();
-
-            wp.a11y.speak( SiteHealth.string.site_info_copied );
-        }
+    clipboard.on( 'success', function( e ) {
+        var $wrapper = $( e.trigger ).closest( 'div' );
+        $( '.success', $wrapper ).addClass( 'visible' );
+
+        wp.a11y.speak( SiteHealth.string.site_info_copied );
     } );
 

trunk/src/wp-admin/css/site-health.css

@@ -210 +210 @@
 }
 
-body.site-health .system-information-copy-wrapper {
+.site-health-copy-buttons {
     display: block;
     margin: 1rem 0;
 }
 
-body.site-health .system-information-copy-wrapper textarea {
-    border: 0;
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    left: -9999px;
-    top: -9999px;
-}
-
-body.site-health .health-check-toggle-copy-section:hover {
-    background: none;
-}
-
-body.site-health .system-information-copy-wrapper .copy-button-wrapper {
+.site-health-copy-buttons .copy-button-wrapper {
     margin: 0.5rem 0 1rem;
 }
 
-body.site-health .copy-field-success {
+.site-health-copy-buttons .success {
     display: none;
     color: #40860a;
@@ -239 +226 @@
 }
 
-body.site-health .copy-field-success.visible {
+.site-health-copy-buttons .success.visible {
     display: inline-block;
     height: 28px;

trunk/src/wp-admin/includes/class-wp-debug-data.php

@@ -882 +882 @@
 
     /**
-     * Print the formatted variation of the information gathered for debugging, in a manner
-     * suitable for a text area that can be instantly copied to a forum or support ticket.
+     * Format the information gathered for debugging, in a manner suitable for copying to a forum or support ticket.
      *
      * @since 5.2.0
      *
      * @param array $info_array Information gathered from the `WP_Debug_Data::debug_data` function.
+     * @param string $type      Optional. The data type to format the information as. Default 'text'.
+     * @return string The formatted data.
      */
-    public static function textarea_format( $info_array ) {
-        echo "`\n";
+    public static function format( $info_array, $type = 'text' ) {
+        $return = '';
 
         foreach ( $info_array as $section => $details ) {
@@ -898 +899 @@
             }
 
-            printf(
+            $return .= sprintf(
                 "### %s%s ###\n\n",
                 $details['label'],
@@ -922 +923 @@
                 }
 
-                printf(
+                $return .= sprintf(
                     "%s: %s\n",
                     $field['label'],
@@ -928 +929 @@
                 );
             }
-            echo "\n";
-        }
-        echo '`';
+            $return .= "\n";
+        }
+
+        return $return;
     }
 

trunk/src/wp-admin/site-health-info.php

@@ -62 +62 @@
         WP_Debug_Data::check_for_updates();
 
-        $info = WP_Debug_Data::debug_data();
+        $info         = WP_Debug_Data::debug_data();
+        $english_info = '';
+        if ( 0 !== strpos( get_locale(), 'en' ) ) {
+            $english_info = WP_Debug_Data::debug_data( 'en_US' );
+        }
         ?>
 
@@ -70 +74 @@
 
         <p>
-            <?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.' ); ?>
+            <?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.' ); ?>
+        </p>
+        <p>
+            <?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.' ); ?>
         </p>
 
-        <div class="system-information-copy-wrapper">
-            <textarea id="system-information-default-copy-field" readonly><?php WP_Debug_Data::textarea_format( $info ); ?></textarea>
-
-            <?php
-            if ( 0 !== strpos( get_locale(), 'en' ) ) :
-
-                $english_info = WP_Debug_Data::debug_data( 'en_US' );
-                ?>
-                <textarea id="system-information-english-copy-field" readonly><?php WP_Debug_Data::textarea_format( $english_info ); ?></textarea>
-
-            <?php endif; ?>
-
+        <div class="site-health-copy-buttons">
             <div class="copy-button-wrapper">
-                <button type="button" class="button button-primary health-check-copy-field" data-copy-field="default"><?php _e( 'Copy to clipboard' ); ?></button>
-                <span class="copy-field-success" aria-hidden="true">Copied!</span>
+                <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>
+                <span class="success" aria-hidden="true">Copied!</span>
             </div>
-            <?php if ( 0 !== strpos( get_locale(), 'en' ) ) : ?>
+            <?php if ( $english_info ) : ?>
                 <div class="copy-button-wrapper">
-                    <button type="button" class="button health-check-copy-field" data-copy-field="english"><?php _e( 'Copy to clipboard (English)' ); ?></button>
-                    <span class="copy-field-success" aria-hidden="true">Copied!</span>
+                    <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>
+                    <span class="success" aria-hidden="true">Copied!</span>
                 </div>
             <?php endif; ?>

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

@@ -925 +925 @@
     $scripts->add( 'editor', "/wp-admin/js/editor$suffix.js", array( 'utils', 'jquery' ), false, 1 );
 
+    $scripts->add( 'clipboard', "/wp-includes/js/clipboard$suffix.js", array(), false, 1 );
+
     // Back-compat for old DFW. To-do: remove at the end of 2016.
     $scripts->add( 'wp-fullscreen-stub', "/wp-admin/js/wp-fullscreen-stub$suffix.js", array(), false, 1 );
@@ -1689 +1691 @@
         );
 
-        $scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
+        $scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'clipboard', 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
 
         $scripts->add( 'updates', "/wp-admin/js/updates$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );