mirror of
git://develop.git.wordpress.org/
synced 2025-01-16 20:38:35 +01:00
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. git-svn-id: https://develop.svn.wordpress.org/trunk@45044 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Gary Pendergast
parent
43c28f913c
commit
1ab6f67ef5
@ -166,6 +166,7 @@ module.exports = function(grunt) {
|
||||
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' ],
|
||||
|
||||
@ -94,6 +94,7 @@
|
||||
"@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",
|
||||
|
||||
@ -10,21 +10,14 @@ jQuery( document ).ready( function( $ ) {
|
||||
|
||||
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' );
|
||||
clipboard.on( 'success', function( e ) {
|
||||
var $wrapper = $( e.trigger ).closest( 'div' );
|
||||
$( '.success', $wrapper ).addClass( 'visible' );
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
$textarea.select();
|
||||
|
||||
if ( document.execCommand( 'copy' ) ) {
|
||||
$( '.copy-field-success', $wrapper ).addClass( 'visible' );
|
||||
$( this ).focus();
|
||||
|
||||
wp.a11y.speak( SiteHealth.string.site_info_copied );
|
||||
}
|
||||
wp.a11y.speak( SiteHealth.string.site_info_copied );
|
||||
} );
|
||||
|
||||
// Accordion handling in various areas.
|
||||
|
||||
@ -209,36 +209,23 @@ body.site-health .spinner {
|
||||
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;
|
||||
|
||||
@ -881,15 +881,16 @@ class WP_Debug_Data {
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,7 +898,7 @@ class WP_Debug_Data {
|
||||
continue;
|
||||
}
|
||||
|
||||
printf(
|
||||
$return .= sprintf(
|
||||
"### %s%s ###\n\n",
|
||||
$details['label'],
|
||||
( isset( $details['show_count'] ) && $details['show_count'] ? sprintf( ' (%d)', count( $details['fields'] ) ) : '' )
|
||||
@ -921,15 +922,16 @@ class WP_Debug_Data {
|
||||
}
|
||||
}
|
||||
|
||||
printf(
|
||||
$return .= sprintf(
|
||||
"%s: %s\n",
|
||||
$field['label'],
|
||||
$values
|
||||
);
|
||||
}
|
||||
echo "\n";
|
||||
$return .= "\n";
|
||||
}
|
||||
echo '`';
|
||||
|
||||
return $return;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -61,7 +61,11 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
|
||||
<?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>
|
||||
@ -69,29 +73,21 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
|
||||
</h2>
|
||||
|
||||
<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; ?>
|
||||
</div>
|
||||
|
||||
@ -924,6 +924,8 @@ function wp_default_scripts( &$scripts ) {
|
||||
|
||||
$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,7 +1690,7 @@ function wp_default_scripts( &$scripts ) {
|
||||
)
|
||||
);
|
||||
|
||||
$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(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user