Ticket #46647: 46647.diff

Gruntfile.js

@@ -166 +166 @@
                                 files: [
                                         {
                                                 [ 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' ],
                                                 [ WORKING_DIR + 'wp-includes/js/jquery/jquery-migrate.js' ]: [ './node_modules/jquery-migrate/dist/jquery-migrate.js' ],

package.json

@@ -94 +94 @@
                 "@wordpress/viewport": "2.3.0",
                 "@wordpress/wordcount": "2.2.0",
                 "backbone": "1.3.3",
+                "clipboard": "2.0.4",
                 "element-closest": "^2.0.2",
                 "formdata-polyfill": "3.0.13",
                 "imagesloaded": "3.2.0",

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

@@ -10 +10 @@
 
         var data;
 
-        // 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();
+        var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
 
-                if ( document.execCommand( 'copy' ) ) {
-                        $( '.copy-field-success', $wrapper ).addClass( 'visible' );
-                        $( this ).focus();
+        // Debug information copy section.
+        clipboard.on( 'success', function( e ) {
+                var $wrapper = $( e.trigger ).closest( 'div' );
+                $( '.success', $wrapper ).addClass( 'visible' );
 
-                        wp.a11y.speak( SiteHealth.string.site_info_copied );
-                }
+                wp.a11y.speak( SiteHealth.string.site_info_copied );
         } );
 
         // Accordion handling in various areas.

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

@@ -206 +206 @@
         float: none;
 }
 
-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;
         line-height: 1.8;
         margin-left: 0.5rem;
 }
 
-body.site-health .copy-field-success.visible {
+.site-health-copy-buttons .success.visible {
         display: inline-block;
         height: 28px;
     line-height: 28px;

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

@@ -881 +881 @@
         }
 
         /**
-         * 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 ) {
                         // Skip this section if there are no fields, or the section has been declared as private.
@@ -897 +898 @@
                                 continue;
                         }
 
-                        printf(
+                        $return .= sprintf(
                                 "### %s%s ###\n\n",
                                 $details['label'],
                                 ( isset( $details['show_count'] ) && $details['show_count'] ? sprintf( ' (%d)', count( $details['fields'] ) ) : '' )
@@ -921 +922 @@
                                         }
                                 }
 
-                                printf(
+                                $return .= sprintf(
                                         "%s: %s\n",
                                         $field['label'],
                                         $values
                                 );
                         }
-                        echo "\n";
+                        $return .= "\n";
                 }
-                echo '`';
+
+                return $return;
         }
 
         /**

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

@@ -59 +59 @@
                 <?php
                 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' );
+                }
                 ?>
 
                 <h2>
@@ -70 +74 @@
                         <?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.' ); ?>
                 </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 report 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 report to clipboard (English)' ); ?></button>
+                                        <span class="success" aria-hidden="true">Copied!</span>
                                 </div>
                         <?php endif; ?>
                 </div>

src/wp-includes/script-loader.php

@@ -924 +924 @@
 
         $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 );
 
@@ -1688 +1690 @@
                         )
                 );
 
-                $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 );
                 did_action( 'init' ) && $scripts->localize(