sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Site Health: Modify the grading indicator to remove percentage score in favor of a "Good" or "Should be improved" status.

Browse Source 
This removes arbitrary confusion about what the numbers mean.

Props Clorith, hedgefield, Cybr, arena, DavidAnderson, earnjam, daveshine, Otto42, azaozz, asadkn, KARTHOST, tigertech, maximejobin, johnbillion, raboodesign, ramiy, afragen.
Fixes #47046.

git-svn-id: https://develop.svn.wordpress.org/trunk@46106 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2019-09-14 14:28:47 +00:00
parent 08df15ab58
commit 4f2fc80f65
4 changed files with 50 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/js/_enqueues/admin/site-health.js
View File

@ -87,10 +87,11 @@ jQuery( document ).ready( function( $ ) {
function RecalculateProgression() { function RecalculateProgression() {
var r, c, pct; var r, c, pct;
var $progress = $( '.site-health-progress' ); 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 $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 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 ); var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
if ( 0 === totalTests ) { if ( 0 === totalTests ) {
@ -98,7 +99,7 @@ jQuery( document ).ready( function( $ ) {
return; return;
} }
$progress.removeClass( 'loading' ); $wrapper.removeClass( 'loading' );
r = $circle.attr( 'r' ); r = $circle.attr( 'r' );
c = Math.PI * ( r * 2 ); c = Math.PI * ( r * 2 );
@ -122,21 +123,18 @@ jQuery( document ).ready( function( $ ) {
$( '#health-check-issues-recommended' ).addClass( 'hidden' ); $( '#health-check-issues-recommended' ).addClass( 'hidden' );
} }
if ( 50 <= val ) { if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
$circle.addClass( 'orange' ).removeClass( 'red' ); $wrapper.addClass( 'green' ).removeClass( 'orange' );
}
if ( 90 <= val ) { $progressLabel.text( __( 'Good' ) );
$circle.addClass( 'green' ).removeClass( 'orange' ); 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 ) { $progressLabel.text( __( 'Should be improved' ) );
$( '.site-status-all-clear' ).removeClass( 'hide' ); 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.' ) );
$( '.site-status-has-issues' ).addClass( 'hide' );
} }
$progressCount.text( val + '%' );
if ( ! isDebugTab ) { if ( ! isDebugTab ) {
$.post( $.post(
ajaxurl, ajaxurl,
@ -147,11 +145,10 @@ jQuery( document ).ready( function( $ ) {
} }
); );
wp.a11y.speak( sprintf( if ( 100 === val ) {
// translators: %s: The percentage score for the tests. $( '.site-status-all-clear' ).removeClass( 'hide' );
__( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ), $( '.site-status-has-issues' ).addClass( 'hide' );
val + '%' }
) );
} }
} }

36
src/wp-admin/css/site-health.css
View File

@ -7,7 +7,7 @@
.health-check-header h1 { .health-check-header h1 {
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
margin: 1rem 0.8rem; margin: 0 0.8rem 1rem;
font-size: 23px; font-size: 23px;
padding: 9px 0 4px 0; padding: 9px 0 4px 0;
line-height: 1.3; line-height: 1.3;
@ -37,10 +37,14 @@
clear: both; clear: both;
} }
.site-health-progress-wrapper {
margin-bottom: 1rem;
}
.site-health-progress { .site-health-progress {
display: inline-block; display: inline-block;
height: 40px; height: 20px;
width: 40px; width: 20px;
margin: 0; margin: 0;
border-radius: 100%; border-radius: 100%;
position: relative; position: relative;
@ -62,15 +66,7 @@
font-size: 2em; font-size: 2em;
} }
.site-health-progress-count::after { .loading .site-health-progress svg #bar {
content: "";
}
.site-health-progress.loading .site-health-progress-count::after {
content: "···";
}
.site-health-progress.loading svg #bar {
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke: #adc5d2; stroke: #adc5d2;
animation: loadingPulse 3s infinite ease-in-out; animation: loadingPulse 3s infinite ease-in-out;
@ -88,13 +84,25 @@
stroke: #dc3232; stroke: #dc3232;
} }
.site-health-progress svg #bar.green { .green .site-health-progress #bar {
stroke: #46b450; 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; 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 { @keyframes loadingPulse {
0% { 0% {

9
src/wp-admin/site-health-info.php
View File

@ -34,14 +34,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<h1> <h1>
<?php _e( 'Site Health' ); ?> <?php _e( 'Site Health' ); ?>
</h1> </h1>
</div>
<div class="site-health-progress hide-if-no-js loading"> <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
<div class="site-health-progress">
<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"> <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 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> <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg> </svg>
<span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span> </div>
<span class="site-health-progress-count"></span> <div class="site-health-progress-label">
<?php _e( 'Results are still loading&hellip;' ); ?>
</div> </div>
</div> </div>

9
src/wp-admin/site-health.php
View File

@ -39,14 +39,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<h1> <h1>
<?php _e( 'Site Health' ); ?> <?php _e( 'Site Health' ); ?>
</h1> </h1>
</div>
<div class="site-health-progress hide-if-no-js loading"> <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
<div class="site-health-progress">
<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"> <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 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> <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg> </svg>
<span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span> </div>
<span class="site-health-progress-count"></span> <div class="site-health-progress-label">
<?php _e( 'Results are still loading&hellip;' ); ?>
</div> </div>
</div> </div>