From 123b9738894edec3775b3f89005c92f6718486e7 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sat, 30 Mar 2019 15:37:28 +0000
Subject: [PATCH] Administration: Display a notice in the Site Health pages
 when JavaScript is off.

- displays an error notice when JavaScript is off, consistently with other admin screens that depend on JavaScript
- keeps the main `h1` visible

Minor clean-ups:
- makes code indentation consistent in `site-health.php` and `site-health-info.php`
- removes a couple of `<div class="wp-clearfix"></div>` as that's not the intended usage of `wp-clearfix` (those divs didn't do anything anyways)

Fixes #46717.


git-svn-id: https://develop.svn.wordpress.org/trunk@45076 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/site-health-info.php | 231 +++++++++++++++---------------
 src/wp-admin/site-health.php      |  13 +-
 2 files changed, 123 insertions(+), 121 deletions(-)

diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php
index 3370f72624..713bc255f6 100644
--- a/src/wp-admin/site-health-info.php
+++ b/src/wp-admin/site-health-info.php
@@ -29,141 +29,142 @@ $health_check_site_status = new WP_Site_Health();
 
 require_once( ABSPATH . 'wp-admin/admin-header.php' );
 ?>
+<div class="health-check-header">
+	<div class="health-check-title-section">
+		<h1>
+			<?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
+		</h1>
 
-	<div class="health-check-header">
-		<div class="health-check-title-section">
-			<h1>
-				<?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
-			</h1>
-
-			<div class="site-health-progress loading">
-				<svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
-					<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
-					<circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
-				</svg>
-				<span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
-				<span class="site-health-progress-count"></span>
-			</div>
+		<div class="site-health-progress hide-if-no-js loading">
+			<svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
+				<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
+				<circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
+			</svg>
+			<span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
+			<span class="site-health-progress-count"></span>
 		</div>
-
-		<nav class="health-check-tabs-wrapper" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
-			<a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab">
-				<?php _e( 'Status' ); ?>
-			</a>
-
-			<a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="health-check-tab active" aria-current="true">
-				<?php _e( 'Info' ); ?>
-			</a>
-		</nav>
-
-		<div class="wp-clearfix"></div>
 	</div>
 
-	<div class="health-check-body">
-		<?php
-		WP_Debug_Data::check_for_updates();
+	<nav class="health-check-tabs-wrapper hide-if-no-js" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
+		<a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab">
+			<?php _e( 'Status' ); ?>
+		</a>
 
-		$info         = WP_Debug_Data::debug_data();
-		$english_info = '';
-		if ( 0 !== strpos( get_locale(), 'en' ) ) {
-			$english_info = WP_Debug_Data::debug_data( 'en_US' );
-		}
-		?>
+		<a href="<?php echo esc_url( admin_url( 'site-health.php?tab=debug' ) ); ?>" class="health-check-tab active" aria-current="true">
+			<?php _e( 'Info' ); ?>
+		</a>
+	</nav>
+</div>
 
-		<h2>
-			<?php _e( 'Site Info' ); ?>
-		</h2>
+<div class="notice notice-error hide-if-js">
+	<p><?php _e( 'The Site Health check requires JavaScript.' ); ?></p>
+</div>
 
-		<p>
-			<?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="health-check-body hide-if-no-js">
+	<?php
+	WP_Debug_Data::check_for_updates();
 
-		<div class="site-health-copy-buttons">
+	$info         = WP_Debug_Data::debug_data();
+	$english_info = '';
+	if ( 0 !== strpos( get_locale(), 'en' ) ) {
+		$english_info = WP_Debug_Data::debug_data( 'en_US' );
+	}
+	?>
+
+	<h2>
+		<?php _e( 'Site Info' ); ?>
+	</h2>
+
+	<p>
+		<?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="site-health-copy-buttons">
+		<div class="copy-button-wrapper">
+			<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 ( $english_info ) : ?>
 			<div class="copy-button-wrapper">
-				<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>
+				<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 if ( $english_info ) : ?>
-				<div class="copy-button-wrapper">
-					<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>
+
+	<dl id="health-check-debug" role="presentation" class="health-check-accordion">
+
+		<?php
+		foreach ( $info as $section => $details ) {
+			if ( ! isset( $details['fields'] ) || empty( $details['fields'] ) ) {
+				continue;
+			}
+			?>
+			<dt role="heading" aria-level="3">
+				<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" id="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" type="button">
+		<span class="title">
+			<?php echo esc_html( $details['label'] ); ?>
+
+			<?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
+				<?php printf( '(%d)', count( $details['fields'] ) ); ?>
 			<?php endif; ?>
-		</div>
+		</span>
+					<span class="icon"></span>
+				</button>
+			</dt>
 
-		<dl id="health-check-debug" role="presentation" class="health-check-accordion">
-
-			<?php
-			foreach ( $info as $section => $details ) {
-				if ( ! isset( $details['fields'] ) || empty( $details['fields'] ) ) {
-					continue;
+			<dd id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" role="region" aria-labelledby="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
+				<?php
+				if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) {
+					printf(
+						'<p>%s</p>',
+						wp_kses(
+							$details['description'],
+							array(
+								'a'      => array(
+									'href' => true,
+								),
+								'strong' => true,
+								'em'     => true,
+							)
+						)
+					);
 				}
 				?>
-				<dt role="heading" aria-level="3">
-					<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" id="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" type="button">
-			<span class="title">
-				<?php echo esc_html( $details['label'] ); ?>
-
-				<?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
-					<?php printf( '(%d)', count( $details['fields'] ) ); ?>
-				<?php endif; ?>
-			</span>
-						<span class="icon"></span>
-					</button>
-				</dt>
-
-				<dd id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" role="region" aria-labelledby="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
+				<table class="widefat striped health-check-table" role="presentation">
+					<tbody>
 					<?php
-					if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) {
+					foreach ( $details['fields'] as $field ) {
+						if ( is_array( $field['value'] ) ) {
+							$values = '<ul>';
+							foreach ( $field['value'] as $name => $value ) {
+								$values .= sprintf(
+									'<li>%s: %s</li>',
+									esc_html( $name ),
+									esc_html( $value )
+								);
+							}
+							$values .= '</ul>';
+						} else {
+							$values = esc_html( $field['value'] );
+						}
+
 						printf(
-							'<p>%s</p>',
-							wp_kses(
-								$details['description'],
-								array(
-									'a'      => array(
-										'href' => true,
-									),
-									'strong' => true,
-									'em'     => true,
-								)
-							)
+							'<tr><td>%s</td><td>%s</td></tr>',
+							esc_html( $field['label'] ),
+							$values
 						);
 					}
 					?>
-					<table class="widefat striped health-check-table" role="presentation">
-						<tbody>
-						<?php
-						foreach ( $details['fields'] as $field ) {
-							if ( is_array( $field['value'] ) ) {
-								$values = '<ul>';
-								foreach ( $field['value'] as $name => $value ) {
-									$values .= sprintf(
-										'<li>%s: %s</li>',
-										esc_html( $name ),
-										esc_html( $value )
-									);
-								}
-								$values .= '</ul>';
-							} else {
-								$values = esc_html( $field['value'] );
-							}
-
-							printf(
-								'<tr><td>%s</td><td>%s</td></tr>',
-								esc_html( $field['label'] ),
-								$values
-							);
-						}
-						?>
-						</tbody>
-					</table>
-				</dd>
-			<?php } ?>
-		</dl>
-	</div>
+					</tbody>
+				</table>
+			</dd>
+		<?php } ?>
+	</dl>
+</div>
 
 <?php
 include( ABSPATH . 'wp-admin/admin-footer.php' );
diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php
index 63bb4bb3be..d41c752491 100644
--- a/src/wp-admin/site-health.php
+++ b/src/wp-admin/site-health.php
@@ -34,14 +34,13 @@ $health_check_site_status->check_wp_version_check_exists();
 
 require_once( ABSPATH . 'wp-admin/admin-header.php' );
 ?>
-
 <div class="health-check-header">
 	<div class="health-check-title-section">
 		<h1>
 			<?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
 		</h1>
 
-		<div class="site-health-progress loading">
+		<div class="site-health-progress hide-if-no-js loading">
 			<svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
 				<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
 				<circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
@@ -51,7 +50,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 		</div>
 	</div>
 
-	<nav class="health-check-tabs-wrapper" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
+	<nav class="health-check-tabs-wrapper hide-if-no-js" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 		<a href="<?php echo esc_url( admin_url( 'site-health.php' ) ); ?>" class="health-check-tab active" aria-current="true">
 			<?php _e( 'Status' ); ?>
 		</a>
@@ -60,11 +59,13 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 			<?php _e( 'Info' ); ?>
 		</a>
 	</nav>
-
-	<div class="wp-clearfix"></div>
 </div>
 
-<div class="health-check-body">
+<div class="notice notice-error hide-if-js">
+	<p><?php _e( 'The Site Health check requires JavaScript.' ); ?></p>
+</div>
+
+<div class="health-check-body hide-if-no-js">
 	<div class="site-status-all-clear hide">
 		<p class="icon">
 			<span class="dashicons dashicons-yes"></span>