Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-22 21:04:57 +02:00
Code Issues Projects 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.
Built from https://develop.svn.wordpress.org/trunk@46106


git-svn-id: http://core.svn.wordpress.org/trunk@45918 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2019-09-14 14:29:56 +00:00
parent dd3ad3ac51
commit 42079f34a9
9 changed files with 76 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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-right: 0.3rem;
}
@keyframes loadingPulse {
0% {

2
wp-admin/css/site-health-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -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% {

2
wp-admin/css/site-health.min.css vendored
View File

File diff suppressed because one or more lines are too long

35
wp-admin/js/site-health.js
View File

@ -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' );
}
}
}

2
wp-admin/js/site-health.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -34,14 +34,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<h1>
<?php _e( 'Site Health' ); ?>
</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">
<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-label">
<?php _e( 'Results are still loading&hellip;' ); ?>
</div>
</div>

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

@ -39,14 +39,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<h1>
<?php _e( 'Site Health' ); ?>
</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">
<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-label">
<?php _e( 'Results are still loading&hellip;' ); ?>
</div>
</div>

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.3-alpha-46105';
$wp_version = '5.3-alpha-46106';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.