diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js index a8aa67b74b..df8cc62f6c 100644 --- a/src/js/_enqueues/admin/site-health.js +++ b/src/js/_enqueues/admin/site-health.js @@ -87,10 +87,11 @@ jQuery( document ).ready( function( $ ) { function RecalculateProgression() { var r, c, pct; var $progress = $( '.site-health-progress' ); - var $progressCount = $progress.find( '.site-health-progress-count' ); + var $wrapper = $progress.closest( '.site-health-progress-wrapper' ); + var $progressLabel = $( '.site-health-progress-label', $wrapper ); var $circle = $( '.site-health-progress svg #bar' ); var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) + parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); - var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); + var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 ); if ( 0 === totalTests ) { @@ -98,7 +99,7 @@ jQuery( document ).ready( function( $ ) { return; } - $progress.removeClass( 'loading' ); + $wrapper.removeClass( 'loading' ); r = $circle.attr( 'r' ); c = Math.PI * ( r * 2 ); @@ -122,21 +123,18 @@ jQuery( document ).ready( function( $ ) { $( '#health-check-issues-recommended' ).addClass( 'hidden' ); } - if ( 50 <= val ) { - $circle.addClass( 'orange' ).removeClass( 'red' ); - } + if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) { + $wrapper.addClass( 'green' ).removeClass( 'orange' ); - if ( 90 <= val ) { - $circle.addClass( 'green' ).removeClass( 'orange' ); - } + $progressLabel.text( __( 'Good' ) ); + wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) ); + } else { + $wrapper.addClass( 'orange' ).removeClass( 'green' ); - if ( 100 === val ) { - $( '.site-status-all-clear' ).removeClass( 'hide' ); - $( '.site-status-has-issues' ).addClass( 'hide' ); + $progressLabel.text( __( 'Should be improved' ) ); + wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) ); } - $progressCount.text( val + '%' ); - if ( ! isDebugTab ) { $.post( ajaxurl, @@ -147,11 +145,10 @@ jQuery( document ).ready( function( $ ) { } ); - wp.a11y.speak( sprintf( - // translators: %s: The percentage score for the tests. - __( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ), - val + '%' - ) ); + if ( 100 === val ) { + $( '.site-status-all-clear' ).removeClass( 'hide' ); + $( '.site-status-has-issues' ).addClass( 'hide' ); + } } } diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css index f320d4f4c9..07807eba1d 100644 --- a/src/wp-admin/css/site-health.css +++ b/src/wp-admin/css/site-health.css @@ -7,7 +7,7 @@ .health-check-header h1 { display: inline-block; font-weight: 600; - margin: 1rem 0.8rem; + margin: 0 0.8rem 1rem; font-size: 23px; padding: 9px 0 4px 0; line-height: 1.3; @@ -37,10 +37,14 @@ clear: both; } +.site-health-progress-wrapper { + margin-bottom: 1rem; +} + .site-health-progress { display: inline-block; - height: 40px; - width: 40px; + height: 20px; + width: 20px; margin: 0; border-radius: 100%; position: relative; @@ -62,15 +66,7 @@ font-size: 2em; } -.site-health-progress-count::after { - content: ""; -} - -.site-health-progress.loading .site-health-progress-count::after { - content: "ยทยทยท"; -} - -.site-health-progress.loading svg #bar { +.loading .site-health-progress svg #bar { stroke-dashoffset: 0; stroke: #adc5d2; animation: loadingPulse 3s infinite ease-in-out; @@ -88,13 +84,25 @@ stroke: #dc3232; } -.site-health-progress svg #bar.green { +.green .site-health-progress #bar { stroke: #46b450; } +.green .site-health-progress .site-health-progress-label { + color: #46b450; +} -.site-health-progress svg #bar.orange { +.orange .site-health-progress #bar { stroke: #ffb900; } +.orange .site-health-progress .site-health-progress-label { + color: #ffb900; +} + +.site-health-progress-label { + font-weight: 600; + line-height: 20px; + margin-left: 0.3rem; +} @keyframes loadingPulse { 0% { diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php index e63ff24ef3..34471a0968 100644 --- a/src/wp-admin/site-health-info.php +++ b/src/wp-admin/site-health-info.php @@ -34,14 +34,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );

+ -
+
+
- - +
+
+
diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php index c5396f30cb..9e3a847f6a 100644 --- a/src/wp-admin/site-health.php +++ b/src/wp-admin/site-health.php @@ -39,14 +39,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );

+
-
+
+
- - +
+
+