WordPress.org
Get WordPress

Make WordPress Core

Changeset 46106


Ignore:
Timestamp:
09/14/2019 02:28:47 PM (7 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.