: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
export const UpsellManger = ( () => {
maybeShowCDNActivationNotice() {
if ( ! wp_smush_msgs.smush_cdn_activation_notice ) {
WP_Smush.helpers.renderActivationCDNNotice( wp_smush_msgs.smush_cdn_activation_notice );
maybeShowCDNUpsellForPreSiteOnStart() {
const upsellCdn = document.querySelector( '.wp-smush-upsell-cdn' );
upsellCdn.querySelector( 'p' ).innerHTML = wp_smush_msgs.processing_cdn_for_free;
upsellCdn.classList.remove( 'sui-hidden' );
maybeShowCDNUpsellForPreSiteOnCompleted() {
const upsellCdn = document.querySelector( '.wp-smush-upsell-cdn' );
upsellCdn.querySelector( 'p' ).innerHTML = wp_smush_msgs.processed_cdn_for_free;
upsellCdn.classList.remove( 'sui-hidden' );
export const GlobalStats = ( () => {
const $ = document.querySelector.bind( document );
const summarySmush = $( '.sui-summary-smush-metabox' );
let boStats = window.wp_smushit_data.bo_stats;
percent_grade: 'sui-grade-dismissed',
savings_conversion_human: '',
const imageScore = $( '#smush-image-score' );
const logBulk = $( '.smush-final-log .smush-bulk-errors' );
const bulkSmushCountContent = $( '#wp-smush-bulk-content' );
const generateGlobalStatsFromSmushData = ( smushScriptData ) => {
window.wp_smushit_data = Object.assign( window.wp_smushit_data, smushScriptData || {} );
globalStats = Object.keys( globalStats ).reduce( function( newStats, key ) {
if ( key in window.wp_smushit_data ) {
newStats[ key ] = window.wp_smushit_data[ key ];
generateGlobalStatsFromSmushData( window.wp_smushit_data );
isChangedStats( newBoStats ) {
const primaryKeys = [ 'total_items', 'processed_items', 'failed_items', 'is_cancelled', 'is_completed', 'is_dead' ];
return primaryKeys.some( ( key ) => {
return newBoStats[ key ] !== boStats[ key ];
setBoStats( newBoStats ) {
boStats = Object.assign( boStats, newBoStats || {} );
setGlobalStats( newGlobalStats ) {
globalStats = Object.assign( globalStats, newGlobalStats || {} );
imageScore.className = imageScore.className.replace( /(^|\s)sui-grade-\S+/g, '' );
imageScore.classList.add( globalStats.percent_grade );
imageScore.dataset.score = globalStats.percent_optimized;
imageScore.querySelector( '.sui-circle-score-label' ).innerHTML = globalStats.percent_optimized;
.querySelector( 'circle:last-child' )
.setAttribute( 'style', '--metric-array:' + ( 2.63893782902 * globalStats.percent_metric ) + ' ' + ( 263.893782902 - globalStats.percent_metric ) );
* Summary detail - center meta box.
this.renderResizedStats();
this.renderConversionSavings();
summarySmush.querySelector( '.sui-summary-large.wp-smush-stats-human' ).innerHTML = globalStats.human_bytes;
// Update the savings percent.
summarySmush.querySelector( '.wp-smush-savings .wp-smush-stats-percent' ).innerHTML = globalStats.savings_percent;
// To total smushed images files.
summarySmush.querySelector( '.wp-smush-count-total .wp-smush-total-optimised' ).innerHTML = globalStats.count_images;
const resizeCountElement = summarySmush.querySelector( '.wp-smush-count-resize-total' );
if ( ! resizeCountElement ) {
if ( globalStats.count_resize > 0 ) {
resizeCountElement.classList.remove( 'sui-hidden' );
resizeCountElement.classList.add( 'sui-hidden' );
resizeCountElement.querySelector( '.wp-smush-total-optimised' ).innerHTML = globalStats.count_resize;
renderConversionSavings() {
const conversionSavingsElement = summarySmush.querySelector( '.smush-conversion-savings .wp-smush-stats' );
if ( ! conversionSavingsElement ) {
conversionSavingsElement.innerHTML = globalStats.savings_conversion_human;
if ( globalStats.savings_conversion > 0 ) {
conversionSavingsElement.parentElement.classList.remove( 'sui-hidden' );
conversionSavingsElement.parentElement.classList.add( 'sui-hidden' );
this.renderScoreProgress();
this.renderSummaryDetail();
allErrors = newErrors || {};
if ( ! Object.keys( allErrors ).length || ! boStats.is_completed ) {
const errorKeys = Object.keys( allErrors );
// Cache error code to avoid double upsell notice.
let showAnimatedUpsell = false;
errorKeys.map( ( image_id, index ) => {
const upsellErrorCode = allErrors[ image_id ].error_code;
if ( index < 5 && 'animated' === upsellErrorCode ) {
showAnimatedUpsell = true;
errors.push( WP_Smush.helpers.prepareBulkSmushErrorRow(
allErrors[ image_id ].error_message,
allErrors[ image_id ].file_name,
allErrors[ image_id ].thumbnail,
allErrors[ image_id ].error_code,
logBulk.innerHTML = errors.join( '' );
logBulk.parentElement.classList.remove( 'sui-hidden' );
logBulk.parentElement.style.display = null;
if ( errorKeys.length > 1 ) {
$( '.smush-bulk-errors-actions' ).classList.remove( 'sui-hidden' );
// Show animated upsell CDN if user disabled CDN and found an animated error in first 5 errors.
if ( showAnimatedUpsell ) {
UpsellManger.maybeShowCDNActivationNotice();
resetAndHideBulkErrors() {
logBulk.parentElement.classList.add( 'sui-hidden' );
// Render Smush box summary.
maybeUpdateBulkSmushCountContent( newContent ) {
if ( newContent && bulkSmushCountContent ) {
bulkSmushCountContent.innerHTML = newContent;
updateGlobalStatsFromSmushScriptData( smushScriptData ) {
this.maybeUpdateBulkSmushCountContent( smushScriptData?.content );
generateGlobalStatsFromSmushData( smushScriptData );