WordPress.org

Make WordPress Core

Ticket #46707: 46707.2.diff

File 46707.2.diff, 20.0 KB (added by xkon, 16 months ago)

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

    diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js
index 1a31be1b5e..d2fbc32f44 100644
    a b  
    99jQuery( document ).ready( function( $ ) {
    1010
    1111        var data;
    12 
    1312        var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
     13        var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length;
    1414
    1515        // Debug information copy section.
    1616        clipboard.on( 'success', function( e ) {
    … … jQuery( document ).ready( function( $ ) { 
    118118
    119119                $progressCount.text( val + '%' );
    120120
    121                 $.post(
    122                         ajaxurl,
    123                         {
    124                                 'action': 'health-check-site-status-result',
    125                                 '_wpnonce': SiteHealth.nonce.site_status_result,
    126                                 'counts': SiteHealth.site_status.issues
    127                         }
    128                 );
     121                if ( ! isDebugTab ) {
     122                        $.post(
     123                                ajaxurl,
     124                                {
     125                                        'action': 'health-check-site-status-result',
     126                                        '_wpnonce': SiteHealth.nonce.site_status_result,
     127                                        'counts': SiteHealth.site_status.issues
     128                                }
     129                        );
    129130
    130                 wp.a11y.speak( SiteHealth.string.site_health_complete_screen_reader.replace( '%s', val + '%' ) );
     131                        wp.a11y.speak( SiteHealth.string.site_health_complete_screen_reader.replace( '%s', val + '%' ) );
     132                }
    131133        }
    132134
    133135        /**
    … … jQuery( document ).ready( function( $ ) { 
    171173                }
    172174        }
    173175
    174         if ( 'undefined' !== typeof SiteHealth ) {
     176        if ( 'undefined' !== typeof SiteHealth && ! isDebugTab ) {
    175177                if ( 0 === SiteHealth.site_status.direct.length && 0 === SiteHealth.site_status.async.length ) {
    176178                        RecalculateProgression();
    177179                } else {
    … … jQuery( document ).ready( function( $ ) { 
    209211                }
    210212        }
    211213
     214        function getDirectorySizes() {
     215                var data = {
     216                        action: 'health-check-get-sizes',
     217                        _wpnonce: SiteHealth.nonce.site_status_result
     218                };
     219
     220                var timestamp = ( new Date().getTime() );
     221
     222                // After 3 seconds announce that we're still waiting for directory sizes.
     223                var timeout = window.setTimeout( function() {
     224                        wp.a11y.speak( SiteHealth.string.please_wait );
     225                }, 3000 );
     226
     227                $.post( {
     228                        type: 'POST',
     229                        url: ajaxurl,
     230                        data: data,
     231                        dataType: 'json'
     232                } ).done( function( response ) {
     233                        updateDirSizes( response.data || {} );
     234                } ).always( function() {
     235                        var delay = ( new Date().getTime() ) - timestamp;
     236
     237                        $( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' );
     238                        RecalculateProgression();
     239
     240                        if ( delay > 3000  ) {
     241                                // We have announced that we're waiting.
     242                                // Announce that we're ready after giving at least 3 seconds for the first announcement
     243                                // to be read out, or the two may collide.
     244                                if ( delay > 6000 ) {
     245                                        delay = 0;
     246                                } else {
     247                                        delay = 6500 - delay;
     248                                }
     249
     250                                window.setTimeout( function() {
     251                                        wp.a11y.speak( SiteHealth.string.site_health_complete );
     252                                }, delay );
     253                        } else {
     254                                // Cancel the announcement.
     255                                window.clearTimeout( timeout );
     256                        }
     257                } );
     258        }
     259
     260        function updateDirSizes( data ) {
     261                var copyButton = $( 'button.button.copy-button' );
     262                var clipdoardText = copyButton.attr( 'data-clipboard-text' );
     263
     264                $.each( data, function( name, value ) {
     265                        var text = value.debug || value.size;
     266
     267                        if ( typeof text !== 'undefined' ) {
     268                                clipdoardText = clipdoardText.replace( name + ': not calculated', name + ': ' + text );
     269                        }
     270                } );
     271
     272                copyButton.attr( 'data-clipboard-text', clipdoardText );
     273
     274                $( '#health-check-accordion-block-wp-paths-sizes' ).find( 'td[class]' ).each( function( i, element ) {
     275                        var td = $( element );
     276                        var name = td.attr( 'class' );
     277
     278                        if ( data.hasOwnProperty( name ) && data[ name ].size ) {
     279                                td.text( data[ name ].size );
     280                        }
     281                } );
     282        }
     283
     284        if ( isDebugTab ) {
     285                getDirectorySizes();
     286        }
    212287} );

  • src/wp-admin/admin-ajax.php 

    diff --git a/src/wp-admin/admin-ajax.php b/src/wp-admin/admin-ajax.php
index e0194ceba8..8d412dd9b8 100644
    a b $core_actions_post = array( 
    136136        'health-check-is-in-debug-mode',
    137137        'health-check-background-updates',
    138138        'health-check-loopback-requests',
     139        'health-check-get-sizes',
    139140);
    140141
    141142// Deprecated

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

    diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index 1a9c8cd667..a00c04f4c0 100644
    a b  
    391391        margin-left: 22px;
    392392}
    393393
     394.health-check-wp-paths-sizes.spinner {
     395        position: absolute;
     396        visibility: visible;
     397        float: none;
     398        margin: 0 4px;
     399}
     400
    394401@media screen and (max-width: 782px) {
    395402        .health-check-body {
    396403                margin: 0 12px;

  • src/wp-admin/includes/ajax-actions.php 

    diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php
index 206fa189a4..89c8474222 100644
    a b function wp_ajax_health_check_site_status_result() { 
    49584958
    49594959        wp_send_json_success();
    49604960}
     4961
     4962/**
     4963 * Ajax handler for site health check to get directories and database sizes.
     4964 *
     4965 * @since 5.2.0
     4966 */
     4967function wp_ajax_health_check_get_sizes() {
     4968        check_ajax_referer( 'health-check-site-status-result' );
     4969
     4970        if ( ! current_user_can( 'install_plugins' ) ) {
     4971                wp_send_json_error();
     4972        }
     4973
     4974        if ( ! class_exists( 'WP_Debug_Data' ) ) {
     4975                require_once( ABSPATH . 'wp-admin/includes/class-wp-debug-data.php' );
     4976        }
     4977
     4978        $sizes_data = WP_Debug_Data::get_sizes();
     4979        $all_sizes  = array();
     4980
     4981        foreach ( $sizes_data as $name => $value ) {
     4982                $name = sanitize_text_field( $name );
     4983                $data = array();
     4984
     4985                if ( isset( $value['size'] ) ) {
     4986                        if ( is_string( $value['size'] ) ) {
     4987                                $data['size'] = sanitize_text_field( $value['size'] );
     4988                        } else {
     4989                                $data['size'] = (int) $value['size'];
     4990                        }
     4991                }
     4992
     4993                if ( isset( $value['debug'] ) ) {
     4994                        if ( is_string( $value['debug'] ) ) {
     4995                                $data['debug'] = sanitize_text_field( $value['debug'] );
     4996                        } else {
     4997                                $data['debug'] = (int) $value['debug'];
     4998                        }
     4999                }
     5000
     5001                $all_sizes[ $name ] = $data;
     5002        }
     5003
     5004        if ( isset( $all_sizes['total_size']['debug'] ) && 'not available' === $all_sizes['total_size']['debug'] ) {
     5005                wp_send_json_error( $all_sizes );
     5006        }
     5007
     5008        wp_send_json_success( $all_sizes );
     5009}

  • src/wp-admin/includes/class-wp-debug-data.php 

    diff --git a/src/wp-admin/includes/class-wp-debug-data.php b/src/wp-admin/includes/class-wp-debug-data.php
index 05545efa85..9a5fbc8e0d 100644
    a b class WP_Debug_Data { 
    385385                        );
    386386                }
    387387
    388                 $size_db = WP_Debug_Data::get_database_size();
    389 
    390                 /*
    391                  * We will be using the PHP max execution time to prevent the size calculations
    392                  * from causing a timeout. The default value is 30 seconds, and some
    393                  * hosts do not allow you to read configuration values.
    394                  */
    395                 if ( function_exists( 'ini_get' ) ) {
    396                         $max_execution_time = ini_get( 'max_execution_time' );
    397                 }
    398 
    399                 // The max_execution_time defaults to 0 when PHP runs from cli.
    400                 // We still want to limit it below.
    401                 if ( empty( $max_execution_time ) ) {
    402                         $max_execution_time = 30;
    403                 }
    404 
    405                 // Here 20 seconds is a "sensible default" for how long to make the user wait for the directory size calculation.
    406                 // When testing 20 seconds seem enough in nearly all cases. The remaining edge cases are likely testing or development sites
    407                 // that have very large number of files, for example `node_modules` in plugins or themes, etc.
    408                 if ( $max_execution_time > 20 ) {
    409                         $max_execution_time = 20;
    410                 } elseif ( $max_execution_time > 10 ) {
    411                         // If the max_execution_time is set to lower than 20 seconds, reduce it a bit to prevent
    412                         // edge-case timeouts that may happen after the size loop has finished running.
    413                         $max_execution_time -= 1;
    414                 }
    415 
    416                 // Go through the various installation directories and calculate their sizes.
    417                 $size_directories = array(
    418                         'wordpress' => array(
    419                                 'path' => ABSPATH,
    420                                 'size' => 0,
    421                         ),
    422                         'themes'    => array(
    423                                 'path' => trailingslashit( get_theme_root() ),
    424                                 'size' => 0,
    425                         ),
    426                         'plugins'   => array(
    427                                 'path' => trailingslashit( WP_PLUGIN_DIR ),
    428                                 'size' => 0,
    429                         ),
    430                         'uploads'   => array(
    431                                 'path' => $upload_dir['basedir'],
    432                                 'size' => 0,
    433                         ),
    434                 );
    435 
    436                 $size_total = 0;
    437 
    438                 // Loop over all the directories we want to gather the sizes for.
    439                 foreach ( $size_directories as $size => $attributes ) {
    440                         $dir_size = null; // Default to timeout.
    441 
    442                         if ( microtime( true ) - WP_START_TIMESTAMP < $max_execution_time ) {
    443                                 $dir_size = get_dirsize( $attributes['path'], $max_execution_time );
    444                         }
    445 
    446                         if ( false === $dir_size ) {
    447                                 // Error reading.
    448                                 $size_directories[ $size ]['size']  = __( 'The size cannot be calculated. The directory is not accessible. Usually caused by invalid permissions.' );
    449                                 $size_directories[ $size ]['debug'] = 'not accessible';
    450 
    451                                 // Stop total size calculation.
    452                                 $size_total = null;
    453                         } elseif ( null === $dir_size ) {
    454                                 // Timeout.
    455                                 $size_directories[ $size ]['size']  = __( 'The directory size calculation has timed out. Usually caused by a very large number of sub-directories and files.' );
    456                                 $size_directories[ $size ]['debug'] = 'timeout while calculating size';
    457 
    458                                 // Stop total size calculation.
    459                                 $size_total = null;
    460                         } else {
    461                                 $is_subdir = ( strpos( $size_directories[ $size ]['path'], ABSPATH ) === 0 );
    462 
    463                                 // phpcs:ignore WordPress.WP.CapitalPDangit.Misspelled
    464                                 if ( null !== $size_total && ( 'wordpress' === $size || ! $is_subdir ) ) {
    465                                         $size_total += $dir_size;
    466                                 }
    467 
    468                                 $size_directories[ $size ]['size']  = size_format( $dir_size, 2 );
    469                                 $size_directories[ $size ]['debug'] = $size_directories[ $size ]['size'];
    470                         }
    471                 }
    472 
    473                 if ( null !== $size_total && $size_db > 0 ) {
    474                         $size_total = size_format( $size_total + $size_db, 2 );
    475                 } else {
    476                         $size_total = 0;
    477                 }
     388                $not_calculated = __( 'Not calculated' );
    478389
    479390                $info['wp-paths-sizes']['fields'] = array(
    480391                        'uploads_path'       => array(
    481392                                'label' => __( 'Uploads Directory Location' ),
    482                                 'value' => $size_directories['uploads']['path'],
     393                                'value' => $upload_dir['basedir'],
    483394                        ),
    484395                        'uploads_size'       => array(
    485396                                'label' => __( 'Uploads Directory Size' ),
    486                                 'value' => $size_directories['uploads']['size'],
    487                                 'debug' => $size_directories['uploads']['debug'],
     397                                'value' => $not_calculated,
     398                                'debug' => 'not calculated',
    488399                        ),
    489400                        'themes_path'        => array(
    490401                                'label' => __( 'Themes Directory Location' ),
    491                                 'value' => $size_directories['themes']['path'],
     402                                'value' => trailingslashit( get_theme_root() ),
    492403                        ),
    493404                        'current_theme_path' => array(
    494405                                'label' => __( 'Current Theme Directory' ),
    … … class WP_Debug_Data { 
    496407                        ),
    497408                        'themes_size'        => array(
    498409                                'label' => __( 'Themes Directory Size' ),
    499                                 'value' => $size_directories['themes']['size'],
    500                                 'debug' => $size_directories['themes']['debug'],
     410                                'value' => $not_calculated,
     411                                'debug' => 'not calculated',
    501412                        ),
    502413                        'plugins_path'       => array(
    503414                                'label' => __( 'Plugins Directory Location' ),
    504                                 'value' => $size_directories['plugins']['path'],
     415                                'value' => trailingslashit( WP_PLUGIN_DIR ),
    505416                        ),
    506417                        'plugins_size'       => array(
    507418                                'label' => __( 'Plugins Directory Size' ),
    508                                 'value' => $size_directories['plugins']['size'],
    509                                 'debug' => $size_directories['plugins']['debug'],
     419                                'value' => $not_calculated,
     420                                'debug' => 'not calculated',
    510421                        ),
    511422                        'wordpress_path'     => array(
    512423                                'label' => __( 'WordPress Directory Location' ),
    513                                 'value' => $size_directories['wordpress']['path'],
     424                                'value' => ABSPATH,
    514425                        ),
    515426                        'wordpress_size'     => array(
    516427                                'label' => __( 'WordPress Directory Size' ),
    517                                 'value' => $size_directories['wordpress']['size'],
    518                                 'debug' => $size_directories['wordpress']['debug'],
     428                                'value' => $not_calculated,
     429                                'debug' => 'not calculated',
    519430                        ),
    520431                        'database_size'      => array(
    521432                                'label' => __( 'Database size' ),
    522                                 'value' => size_format( $size_db, 2 ),
     433                                'value' => $not_calculated,
     434                                'debug' => 'not calculated',
    523435                        ),
    524436                        'total_size'         => array(
    525437                                'label' => __( 'Total installation size' ),
    526                                 'value' => $size_total > 0 ? $size_total : __( 'Total size is not available. Some errors were encountered when determining the size of your installation.' ),
    527                                 'debug' => $size_total > 0 ? $size_total : 'not available',
     438                                'value' => $not_calculated,
     439                                'debug' => 'not calculated',
    528440                        ),
    529441                );
    530442
    … … class WP_Debug_Data { 
    11861098
    11871099                return (int) $size;
    11881100        }
     1101
     1102        /**
     1103         * Fetch the sizes of the WordPress directories: `wordpress` (ABSPATH), `plugins`, `themes`, and `uploads`.
     1104         * Intended to supplement the array returned by `WP_Debug_Data::debug_data()`.
     1105         *
     1106         * @since 5.2.0
     1107         *
     1108         * @return array The sizes of the directories, also the database size and total installation size.
     1109         */
     1110        public static function get_sizes() {
     1111                $size_db    = self::get_database_size();
     1112                $upload_dir = wp_get_upload_dir();
     1113
     1114                /*
     1115                 * We will be using the PHP max execution time to prevent the size calculations
     1116                 * from causing a timeout. The default value is 30 seconds, and some
     1117                 * hosts do not allow you to read configuration values.
     1118                 */
     1119                if ( function_exists( 'ini_get' ) ) {
     1120                        $max_execution_time = ini_get( 'max_execution_time' );
     1121                }
     1122
     1123                // The max_execution_time defaults to 0 when PHP runs from cli.
     1124                // We still want to limit it below.
     1125                if ( empty( $max_execution_time ) ) {
     1126                        $max_execution_time = 30;
     1127                }
     1128
     1129                if ( $max_execution_time > 20 ) {
     1130                        // If the max_execution_time is set to lower than 20 seconds, reduce it a bit to prevent
     1131                        // edge-case timeouts that may happen after the size loop has finished running.
     1132                        $max_execution_time -= 2;
     1133                }
     1134
     1135                // Go through the various installation directories and calculate their sizes.
     1136                $all_sizes = array(
     1137                        'wordpress_size' => array(
     1138                                'path'             => ABSPATH,
     1139                                'unformatted_size' => 0,
     1140                                'size'             => 0,
     1141                        ),
     1142                        'themes_size'    => array(
     1143                                'path'             => trailingslashit( get_theme_root() ),
     1144                                'unformatted_size' => 0,
     1145                                'size'             => 0,
     1146                        ),
     1147                        'plugins_size'   => array(
     1148                                'path'             => trailingslashit( WP_PLUGIN_DIR ),
     1149                                'unformatted_size' => 0,
     1150                                'size'             => 0,
     1151                        ),
     1152                        'uploads_size'   => array(
     1153                                'path'             => $upload_dir['basedir'],
     1154                                'unformatted_size' => 0,
     1155                                'size'             => 0,
     1156                        ),
     1157                );
     1158
     1159                $size_total = 0;
     1160
     1161                // Loop over all the directories we want to gather the sizes for.
     1162                foreach ( $all_sizes as $name => $attributes ) {
     1163                        $dir_size = null; // Default to timeout.
     1164
     1165                        if ( microtime( true ) - WP_START_TIMESTAMP < $max_execution_time ) {
     1166                                $dir_size = recurse_dirsize( $attributes['path'], null, $max_execution_time );
     1167                        }
     1168
     1169                        unset( $all_sizes[ $name ]['path'] );
     1170
     1171                        if ( false === $dir_size ) {
     1172                                // Error reading.
     1173                                $all_sizes[ $name ]['unformatted_size'] = 0;
     1174                                $all_sizes[ $name ]['size']             = __( 'The size cannot be calculated. The directory is not accessible. Usually caused by invalid permissions.' );
     1175                                $all_sizes[ $name ]['debug']            = 'not accessible';
     1176                        } elseif ( null === $dir_size ) {
     1177                                // Timeout.
     1178                                $all_sizes[ $name ]['unformatted_size'] = 0;
     1179                                $all_sizes[ $name ]['size']             = __( 'The directory size calculation has timed out. Usually caused by a very large number of sub-directories and files.' );
     1180                                $all_sizes[ $name ]['debug']            = 'timeout while calculating size';
     1181                        } else {
     1182                                $all_sizes[ $name ]['unformatted_size'] = $dir_size;
     1183                                $all_sizes[ $name ]['size']             = size_format( $all_sizes[ $name ]['unformatted_size'], 2 );
     1184                                $all_sizes[ $name ]['debug']            = $all_sizes[ $name ]['size'];
     1185                        }
     1186                }
     1187
     1188                if ( $size_db > 0 ) {
     1189                        $database_size = size_format( $size_db, 2 );
     1190
     1191                        $all_sizes['database_size'] = array(
     1192                                'size'  => $database_size,
     1193                                'debug' => $database_size,
     1194                        );
     1195                } else {
     1196                        $all_sizes['database_size'] = array(
     1197                                'size'  => __( 'Not available' ),
     1198                                'debug' => 'not available',
     1199                        );
     1200                }
     1201
     1202                if ( null !== $all_sizes['wordpress_size']['unformatted_size'] && $size_db > 0 ) {
     1203                        $total_size = size_format( $all_sizes['wordpress_size']['unformatted_size'] + $size_db, 2 );
     1204
     1205                        $all_sizes['total_size'] = array(
     1206                                'size'  => $total_size,
     1207                                'debug' => $total_size,
     1208                        );
     1209                } else {
     1210                        $all_sizes['total_size'] = array(
     1211                                'size'  => __( 'Total size is not available. Some errors were encountered when determining the size of your installation.' ),
     1212                                'debug' => 'not available',
     1213                        );
     1214                }
     1215
     1216                return $all_sizes;
     1217        }
    11891218}

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

    diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php
index 08bf002fbb..da4f7a4ac7 100644
    a b require_once( ABSPATH . 'wp-admin/admin-header.php' ); 
    6262        <p><?php _e( 'The Site Health check requires JavaScript.' ); ?></p>
    6363</div>
    6464
    65 <div class="health-check-body hide-if-no-js">
     65<div class="health-check-body health-check-debug-tab hide-if-no-js">
    6666        <?php
     67
    6768        WP_Debug_Data::check_for_updates();
    6869
    6970        $info = WP_Debug_Data::debug_data();
    … … require_once( ABSPATH . 'wp-admin/admin-header.php' ); 
    9394        <div id="health-check-debug" class="health-check-accordion">
    9495
    9596                <?php
     97
     98                $sizes_fields = array( 'uploads_size', 'themes_size', 'plugins_size', 'wordpress_size', 'database_size', 'total_size' );
     99
    96100                foreach ( $info as $section => $details ) {
    97101                        if ( ! isset( $details['fields'] ) || empty( $details['fields'] ) ) {
    98102                                continue;
    99103                        }
     104
    100105                        ?>
    101106                        <h3 class="health-check-accordion-heading">
    102107                                <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" type="button">
    103108                                        <span class="title">
    104109                                                <?php echo esc_html( $details['label'] ); ?>
     110                                                <?php
     111
     112                                                if ( isset( $details['show_count'] ) && $details['show_count'] ) {
     113                                                        printf( '(%d)', count( $details['fields'] ) );
     114                                                }
    105115
    106                                                 <?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
    107                                                         <?php printf( '(%d)', count( $details['fields'] ) ); ?>
    108                                                 <?php endif; ?>
     116                                                ?>
    109117                                        </span>
     118                                        <?php
     119
     120                                        if ( 'wp-paths-sizes' === $section ) {
     121                                                ?>
     122                                                <span class="health-check-wp-paths-sizes spinner" title="<?php esc_attr_e( 'Calculating directory sizes. This may take a while&hellip;' ); ?>"></span>
     123                                                <?php
     124                                        }
     125
     126                                        ?>
    110127                                        <span class="icon"></span>
    111128                                </button>
    112129                        </h3>
    113130
    114131                        <div id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
    115132                                <?php
     133
     134                                $kses_settings = array(
     135                                        'a'      => array(
     136                                                'href' => true,
     137                                        ),
     138                                        'strong' => true,
     139                                        'em'     => true,
     140                                );
     141
    116142                                if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) {
    117                                         printf(
    118                                                 '<p>%s</p>',
    119                                                 wp_kses(
    120                                                         $details['description'],
    121                                                         array(
    122                                                                 'a'      => array(
    123                                                                         'href' => true,
    124                                                                 ),
    125                                                                 'strong' => true,
    126                                                                 'em'     => true,
    127                                                         )
    128                                                 )
    129                                         );
     143                                        printf( '<p>%s</p>', wp_kses( $details['description'], $kses_settings ) );
    130144                                }
     145
    131146                                ?>
    132147                                <table class="widefat striped health-check-table" role="presentation">
    133148                                        <tbody>
    134149                                        <?php
    135                                         foreach ( $details['fields'] as $field ) {
     150
     151                                        foreach ( $details['fields'] as $field_name => $field ) {
    136152                                                if ( is_array( $field['value'] ) ) {
    137153                                                        $values = '<ul>';
     154
    138155                                                        foreach ( $field['value'] as $name => $value ) {
    139                                                                 $values .= sprintf(
    140                                                                         '<li>%s: %s</li>',
    141                                                                         esc_html( $name ),
    142                                                                         esc_html( $value )
    143                                                                 );
     156                                                                $values .= sprintf( '<li>%s: %s</li>', esc_html( $name ), esc_html( $value ) );
    144157                                                        }
     158
    145159                                                        $values .= '</ul>';
    146160                                                } else {
    147161                                                        $values = esc_html( $field['value'] );
    148162                                                }
    149163
    150                                                 printf(
    151                                                         '<tr><td>%s</td><td>%s</td></tr>',
    152                                                         esc_html( $field['label'] ),
    153                                                         $values
    154                                                 );
     164                                                if ( in_array( $field_name, $sizes_fields, true ) ) {
     165                                                        printf( '<tr><td>%s</td><td class="%s">%s</td></tr>', esc_html( $field['label'] ), esc_attr( $field_name ), $values );
     166                                                } else {
     167                                                        printf( '<tr><td>%s</td><td>%s</td></tr>', esc_html( $field['label'] ), $values );
     168                                                }
    155169                                        }
     170
    156171                                        ?>
    157172                                        </tbody>
    158173                                </table>