Edit File by line

/**

[0] Fix | Delete

* BLOCK: extend image block

[1] Fix | Delete

[2] Fix | Delete

const { createHigherOrderComponent } = wp.compose,

[3] Fix | Delete

{ Fragment } = wp.element,

[4] Fix | Delete

{ InspectorControls } = wp.blockEditor,

[5] Fix | Delete

{ PanelBody } = wp.components;

[6] Fix | Delete

[7] Fix | Delete

/**

[8] Fix | Delete

* Transform bytes to human readable format.

[9] Fix | Delete

[10] Fix | Delete

* @param {number} bytes

[11] Fix | Delete

* @return {string} Readable size string.

[12] Fix | Delete

[13] Fix | Delete

function humanFileSize( bytes ) {

[14] Fix | Delete

const thresh = 1024,

[15] Fix | Delete

units = [ 'kB', 'MB', 'GB', 'TB' ];

[16] Fix | Delete

[17] Fix | Delete

if ( Math.abs( bytes ) < thresh ) {

[18] Fix | Delete

return bytes + ' B';

[19] Fix | Delete

}

[20] Fix | Delete

[21] Fix | Delete

let u = -1;

[22] Fix | Delete

do {

[23] Fix | Delete

bytes /= thresh;

[24] Fix | Delete

++u;

[25] Fix | Delete

} while ( Math.abs( bytes ) >= thresh && u < units.length - 1 );

[26] Fix | Delete

[27] Fix | Delete

return bytes.toFixed( 1 ) + ' ' + units[ u ];

[28] Fix | Delete

}

[29] Fix | Delete

[30] Fix | Delete

/**

[31] Fix | Delete

* Generate Smush stats table.

[32] Fix | Delete

[33] Fix | Delete

* @param {number} id

[34] Fix | Delete

* @param {Object} stats

[35] Fix | Delete

* @return {*} Smush stats.

[36] Fix | Delete

[37] Fix | Delete

export function smushStats( id, stats ) {

[38] Fix | Delete

if ( 'undefined' === typeof stats ) {

[39] Fix | Delete

return window.smush_vars.strings.gb.select_image;

[40] Fix | Delete

} else if ( 'string' === typeof stats ) {

[41] Fix | Delete

return stats;

[42] Fix | Delete

}

[43] Fix | Delete

[44] Fix | Delete

return (

[45] Fix | Delete

<div

[46] Fix | Delete

id="smush-stats"

[47] Fix | Delete

className="sui-smush-media smush-stats-wrapper hidden"

[48] Fix | Delete

style={ { display: 'block' } }

[49] Fix | Delete

[50] Fix | Delete

[51] Fix | Delete

<thead>

[52] Fix | Delete

<tr>

[53] Fix | Delete

[54] Fix | Delete

{ window.smush_vars.strings.gb.size }

[55] Fix | Delete

</th>

[56] Fix | Delete

[57] Fix | Delete

{ window.smush_vars.strings.gb.savings }

[58] Fix | Delete

</th>

[59] Fix | Delete

</tr>

[60] Fix | Delete

</thead>

[61] Fix | Delete

<tbody>

[62] Fix | Delete

{ Object.keys( stats.sizes )

[63] Fix | Delete

.filter( ( item ) => 0 < stats.sizes[ item ].percent )

[64] Fix | Delete

.map( ( item, i ) => (

[65] Fix | Delete

[66] Fix | Delete

<td>{ item.toUpperCase() }</td>

[67] Fix | Delete

<td>

[68] Fix | Delete

{ humanFileSize(

[69] Fix | Delete

stats.sizes[ item ].bytes

[70] Fix | Delete

) }{ ' ' }

[71] Fix | Delete

( { stats.sizes[ item ].percent }% )

[72] Fix | Delete

</td>

[73] Fix | Delete

</tr>

[74] Fix | Delete

) ) }

[75] Fix | Delete

</tbody>

[76] Fix | Delete

</table>

[77] Fix | Delete

</div>

[78] Fix | Delete

);

[79] Fix | Delete

}

[80] Fix | Delete

[81] Fix | Delete

/**

[82] Fix | Delete

* Fetch image data. If image is Smushing, update in 3 seconds.

[83] Fix | Delete

[84] Fix | Delete

* TODO: this could be optimized not to query so much.

[85] Fix | Delete

[86] Fix | Delete

* @param {Object} props

[87] Fix | Delete

[88] Fix | Delete

export function fetchProps( props ) {

[89] Fix | Delete

const image = new wp.api.models.Media( { id: props.attributes.id } ),

[90] Fix | Delete

smushData = props.attributes.smush;

[91] Fix | Delete

[92] Fix | Delete

image.fetch( { attribute: 'smush' } ).done( function( img ) {

[93] Fix | Delete

if ( 'string' === typeof img.smush ) {

[94] Fix | Delete

props.setAttributes( { smush: img.smush } );

[95] Fix | Delete

//setTimeout( () => fetch( props ), 3000 );

[96] Fix | Delete

} else if (

[97] Fix | Delete

'undefined' !== typeof img.smush &&

[98] Fix | Delete

( 'undefined' === typeof smushData ||

[99] Fix | Delete

JSON.stringify( smushData ) !== JSON.stringify( img.smush ) )

[100] Fix | Delete

) {

[101] Fix | Delete

props.setAttributes( { smush: img.smush } );

[102] Fix | Delete

}

[103] Fix | Delete

} );

[104] Fix | Delete

}

[105] Fix | Delete

[106] Fix | Delete

/**

[107] Fix | Delete

* Modify the block’s edit component.

[108] Fix | Delete

* Receives the original block BlockEdit component and returns a new wrapped component.

[109] Fix | Delete

[110] Fix | Delete

const smushStatsControl = createHigherOrderComponent( ( BlockEdit ) => {

[111] Fix | Delete

return ( props ) => {

[112] Fix | Delete

// If not image block or not selected, return unmodified block.

[113] Fix | Delete

if (

[114] Fix | Delete

'core/image' !== props.name ||

[115] Fix | Delete

! props.isSelected ||

[116] Fix | Delete

'undefined' === typeof props.attributes.id

[117] Fix | Delete

) {

[118] Fix | Delete

return (

[119] Fix | Delete

[120] Fix | Delete

[121] Fix | Delete

</Fragment>

[122] Fix | Delete

);

[123] Fix | Delete

}

[124] Fix | Delete

[125] Fix | Delete

const smushData = props.attributes.smush;

[126] Fix | Delete

fetchProps( props );

[127] Fix | Delete

[128] Fix | Delete

return (

[129] Fix | Delete

[130] Fix | Delete

[131] Fix | Delete

[132] Fix | Delete

[133] Fix | Delete

{ smushStats( props.attributes.id, smushData ) }

[134] Fix | Delete

</PanelBody>

[135] Fix | Delete

</InspectorControls>

[136] Fix | Delete

</Fragment>

[137] Fix | Delete

);

[138] Fix | Delete

};

[139] Fix | Delete

}, 'withInspectorControl' );

[140] Fix | Delete

[141] Fix | Delete

wp.hooks.addFilter(

[142] Fix | Delete

'editor.BlockEdit',

[143] Fix | Delete

'wp-smush/smush-data-control',

[144] Fix | Delete

smushStatsControl

[145] Fix | Delete

);

[146] Fix | Delete

[147] Fix | Delete