WordPress.org

Make WordPress Core

Ticket #47046: 47046.patch

File 47046.patch, 6.9 KB (added by Clorith, 11 months ago)
  • src/js/_enqueues/admin/site-health.js

     
    8787        function RecalculateProgression() {
    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
    9697                if ( 0 === totalTests ) {
     
    9899                        return;
    99100                }
    100101
    101                 $progress.removeClass( 'loading' );
     102                $wrapper.removeClass( 'loading' );
    102103
    103104                r = $circle.attr( 'r' );
    104105                c = Math.PI * ( r * 2 );
     
    122123                        $( '#health-check-issues-recommended' ).addClass( 'hidden' );
    123124                }
    124125
    125                 if ( 50 <= val ) {
    126                         $circle.addClass( 'orange' ).removeClass( 'red' );
    127                 }
     126                if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
     127                        $wrapper.addClass( 'green' ).removeClass( 'orange' );
    128128
    129                 if ( 90 <= val ) {
    130                         $circle.addClass( 'green' ).removeClass( 'orange' );
    131                 }
     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' );
    132133
    133                 if ( 100 === val ) {
    134                         $( '.site-status-all-clear' ).removeClass( 'hide' );
    135                         $( '.site-status-has-issues' ).addClass( 'hide' );
     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.' ) );
    136136                }
    137 
    138                 $progressCount.text( val + '%' );
    139137
    140138                if ( ! isDebugTab ) {
    141139                        $.post(
     
    147145                                }
    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        }
    157154
  • src/wp-admin/site-health.php

     
    3939                <h1>
    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>
    5255
  • src/wp-admin/site-health-info.php

     
    3434                <h1>
    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>
    4750
  • src/wp-admin/css/site-health.css

     
    77.health-check-header h1 {
    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;
    1313        line-height: 1.3;
     
    3737        clear: both;
    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%;
    4650        position: relative;
     
    6266        font-size: 2em;
    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;
    7672        animation: loadingPulse 3s infinite ease-in-out;
     
    8884        stroke: #dc3232;
    8985}
    9086
    91 .site-health-progress svg #bar.green {
     87.green .site-health-progress #bar {
    9288        stroke: #46b450;
    9389}
     90.green .site-health-progress .site-health-progress-label {
     91        color: #46b450;
     92}
    9493
    95 .site-health-progress svg #bar.orange {
     94.orange .site-health-progress #bar {
    9695        stroke: #ffb900;
    9796}
     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;
     105}
    98106
    99107@keyframes loadingPulse {
    100108        0% {