From 52d8c0ea3d1e236b8504e9dd6d1b21680cea2ba9 Mon Sep 17 00:00:00 2001
From: "Marius L. J" <clorith@git.wordpress.org>
Date: Sun, 28 Aug 2022 19:15:37 +0000
Subject: [PATCH] Site Health: Don't show issue groups unless there are items
 in them.

The Site Health Status screen groups issues into the categories `good`, `recommended`, and `critical` when displaying them to the end user.

Initially, this screen would show `0 critical issues` while the checks were being performed, and then hide the group if no issues were discovered after all checks had completed, this not being an ideal user experience, as it is a better experience to show areas that have content, instead of hiding them after the fact.

This change makes the groups hidden by default, and also changes the logic to see if a group should be displayed when an item is added to the list (as opposed to the previous approach which only did this check once every single test had completed).

Props DavidAnderson, palmiak.
Fixes #47222.

git-svn-id: https://develop.svn.wordpress.org/trunk@53950 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/site-health.js | 15 +++++++--------
 src/wp-admin/site-health.php          | 10 +++++++---
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js
index e9e5c06bdb..4c6ae5ffa4 100644
--- a/src/js/_enqueues/admin/site-health.js
+++ b/src/js/_enqueues/admin/site-health.js
@@ -168,6 +168,13 @@ jQuery( function( $ ) {
 			$( '.site-health-issue-count-title', issueWrapper ).html( heading );
 		}
 
+		if ( 0 < parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
+			$( '#health-check-issues-critical' ).removeClass( 'hidden' );
+		}
+		if ( 0 < parseInt( SiteHealth.site_status.issues.recommended, 0 ) ) {
+			$( '#health-check-issues-recommended' ).removeClass( 'hidden' );
+		}
+
 		$( '.issues', '#health-check-issues-' + issue.status ).append( template( issue ) );
 	}
 
@@ -210,14 +217,6 @@ jQuery( function( $ ) {
 
 		$circle.css( { strokeDashoffset: pct } );
 
-		if ( 1 > parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
-			$( '#health-check-issues-critical' ).addClass( 'hidden' );
-		}
-
-		if ( 1 > parseInt( SiteHealth.site_status.issues.recommended, 0 ) ) {
-			$( '#health-check-issues-recommended' ).addClass( 'hidden' );
-		}
-
 		if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
 			$wrapper.addClass( 'green' ).removeClass( 'orange' );
 
diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php
index 1b2d22aa30..dfdf2b27c9 100644
--- a/src/wp-admin/site-health.php
+++ b/src/wp-admin/site-health.php
@@ -233,9 +233,9 @@ if ( isset( $_GET['tab'] ) && ! empty( $_GET['tab'] ) ) {
 			<?php _e( 'Site Health Status' ); ?>
 		</h2>
 
-		<p><?php _e( 'The site health check shows critical information about your WordPress configuration and items that require your attention.' ); ?></p>
+		<p><?php _e( 'The site health check shows information about your WordPress configuration and items that may need your attention.' ); ?></p>
 
-		<div class="site-health-issues-wrapper" id="health-check-issues-critical">
+		<div class="site-health-issues-wrapper hidden" id="health-check-issues-critical">
 			<h3 class="site-health-issue-count-title">
 				<?php
 					/* translators: %s: Number of critical issues found. */
@@ -243,10 +243,12 @@ if ( isset( $_GET['tab'] ) && ! empty( $_GET['tab'] ) ) {
 				?>
 			</h3>
 
+			<p><?php _e( 'Critical issues are items that may have a high impact on your sites performance or security, and resolving these issues should be prioritized.' ); ?></p>
+
 			<div id="health-check-site-status-critical" class="health-check-accordion issues"></div>
 		</div>
 
-		<div class="site-health-issues-wrapper" id="health-check-issues-recommended">
+		<div class="site-health-issues-wrapper hidden" id="health-check-issues-recommended">
 			<h3 class="site-health-issue-count-title">
 				<?php
 					/* translators: %s: Number of recommended improvements. */
@@ -254,6 +256,8 @@ if ( isset( $_GET['tab'] ) && ! empty( $_GET['tab'] ) ) {
 				?>
 			</h3>
 
+			<p><?php _e( 'Recommended items are considered beneficial to your site, although not as important to prioritize as a critical issue, they may include improvements to things such as; Performance, user experience, and more.' ); ?></p>
+
 			<div id="health-check-site-status-recommended" class="health-check-accordion issues"></div>
 		</div>
 	</div>