WordPress.org
Get WordPress

Make WordPress Core

Changeset 46106


Ignore:
Timestamp:
09/14/2019 02:28:47 PM (4 years ago)
Author:
SergeyBiryukov
Message:

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

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.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/site-health.js

    r45241 r46106  
    8888        var r, c, pct;
    8989        var $progress = $( '.site-health-progress' );
    90         var $progressCount = $progress.find( '.site-health-progress-count' );
     90        var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
     91        var $progressLabel = $( '.site-health-progress-label', $wrapper );
    9192        var $circle = $( '.site-health-progress svg #bar' );
    9293        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 );
    93         var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
     94        var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
    9495        var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
    9596
    … …  
    99100        }
    100101
    101         $progress.removeClass( 'loading' );
     102        $wrapper.removeClass( 'loading' );
    102103
    103104        r = $circle.attr( 'r' );
    … …  
    123124        }
    124125
    125         if ( 50 <= val ) {
    126             $circle.addClass( 'orange' ).removeClass( 'red' );
    127         }
    128 
    129         if ( 90 <= val ) {
    130             $circle.addClass( 'green' ).removeClass( 'orange' );
    131         }
    132 
    133         if ( 100 === val ) {
    134             $( '.site-status-all-clear' ).removeClass( 'hide' );
    135             $( '.site-status-has-issues' ).addClass( 'hide' );
    136         }
    137 
    138         $progressCount.text( val + '%' );
     126        if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
     127            $wrapper.addClass( 'green' ).removeClass( 'orange' );
     128
     129            $progressLabel.text( __( 'Good' ) );
     130            wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
     131        } else {
     132            $wrapper.addClass( 'orange' ).removeClass( 'green' );
     133
     134            $progressLabel.text( __( 'Should be improved' ) );
     135            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.' ) );
     136        }
    139137
    140138        if ( ! isDebugTab ) {
    … …  
    148146            );
    149147
    150             wp.a11y.speak( sprintf(
    151                 // translators: %s: The percentage score for the tests.
    152                 __( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ),
    153                 val + '%'
    154             ) );
     148            if ( 100 === val ) {
     149                $( '.site-status-all-clear' ).removeClass( 'hide' );
     150                $( '.site-status-has-issues' ).addClass( 'hide' );
     151            }
    155152        }
    156153    }

  • trunk/src/wp-admin/css/site-health.css

    r45522 r46106  
    88    display: inline-block;
    99    font-weight: 600;
    10     margin: 1rem 0.8rem;
     10    margin: 0 0.8rem 1rem;
    1111    font-size: 23px;
    1212    padding: 9px 0 4px 0;
    … …  
    3838}
    3939
     40.site-health-progress-wrapper {
     41    margin-bottom: 1rem;
     42}
     43
    4044.site-health-progress {
    4145    display: inline-block;
    42     height: 40px;
    43     width: 40px;
     46    height: 20px;
     47    width: 20px;
    4448    margin: 0;
    4549    border-radius: 100%;
    … …  
    6367}
    6468
    65 .site-health-progress-count::after {
    66     content: "";
    67 }
    68 
    69 .site-health-progress.loading .site-health-progress-count::after {
    70     content: "···";
    71 }
    72 
    73 .site-health-progress.loading svg #bar {
     69.loading .site-health-progress svg #bar {
    7470    stroke-dashoffset: 0;
    7571    stroke: #adc5d2;
    … …  
    8985}
    9086
    91 .site-health-progress svg #bar.green {
     87.green .site-health-progress #bar {
    9288    stroke: #46b450;
    9389}
    94 
    95 .site-health-progress svg #bar.orange {
     90.green .site-health-progress .site-health-progress-label {
     91    color: #46b450;
     92}
     93
     94.orange .site-health-progress #bar {
    9695    stroke: #ffb900;
     96}
     97.orange .site-health-progress .site-health-progress-label {
     98    color: #ffb900;
     99}
     100
     101.site-health-progress-label {
     102    font-weight: 600;
     103    line-height: 20px;
     104    margin-left: 0.3rem;
    97105}
    98106

  • trunk/src/wp-admin/site-health-info.php

    r45932 r46106  
    3535            <?php _e( 'Site Health' ); ?>
    3636        </h1>
     37    </div>
    3738
    38         <div class="site-health-progress hide-if-no-js loading">
     39    <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
     40        <div class="site-health-progress">
    3941            <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">
    4042                <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4143                <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4244            </svg>
    43             <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
    44             <span class="site-health-progress-count"></span>
     45        </div>
     46        <div class="site-health-progress-label">
     47            <?php _e( 'Results are still loading&hellip;' ); ?>
    4548        </div>
    4649    </div>

  • trunk/src/wp-admin/site-health.php

    r45932 r46106  
    4040            <?php _e( 'Site Health' ); ?>
    4141        </h1>
     42    </div>
    4243
    43         <div class="site-health-progress hide-if-no-js loading">
     44    <div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js">
     45        <div class="site-health-progress">
    4446            <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">
    4547                <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4648                <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4749            </svg>
    48             <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
    49             <span class="site-health-progress-count"></span>
     50        </div>
     51        <div class="site-health-progress-label">
     52            <?php _e( 'Results are still loading&hellip;' ); ?>
    5053        </div>
    5154    </div>
Note: See TracChangeset for help on using the changeset viewer.