: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* Adds a Smush Now button and displays stats in Media Attachment Details Screen
// Local reference to the WordPress media namespace.
const smushMedia = wp.media,
"<span class='setting smush-stats' data-setting='smush'>" +
"<span class='name'><%= label %></span>" +
"<span class='value'><%= value %></span>" +
template = _.template(sharedTemplate);
* @param {string} smushHTML
* @return {Object} Template object
const prepareTemplate = function (smushHTML) {
* @param {Array} smush_vars.strings Localization strings.
* @param {Object} smush_vars Object from wp_localize_script()
label: smush_vars.strings.stats_label,
'undefined' !== typeof smushMedia.view &&
'undefined' !== typeof smushMedia.view.Attachment.Details.TwoColumn
// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
const smushMediaTwoColumn =
smushMedia.view.Attachment.Details.TwoColumn;
* Add Smush details to attachment.
* A similar view to media.view.Attachment.Details
* for use in the Edit Attachment modal.
* @see wp-includes/js/media-grid.js
smushMedia.view.Attachment.Details.TwoColumn = smushMediaTwoColumn.extend(
smushMediaTwoColumn.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:smush', this.render);
// Ensure that the main attachment fields are rendered.
smushMedia.view.Attachment.prototype.render.apply(
const smushHTML = this.model.get('smush');
if (typeof smushHTML === 'undefined') {
* Detach the views, append our custom fields, make sure that our data is fully updated
* and re-render the updated view.
.append(prepareTemplate(smushHTML));
// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
const smushAttachmentDetails = smushMedia.view.Attachment.Details;
* Add Smush details to attachment.
smushMedia.view.Attachment.Details = smushAttachmentDetails.extend({
smushAttachmentDetails.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:smush', this.render);
// Ensure that the main attachment fields are rendered.
smushMedia.view.Attachment.prototype.render.apply(this, arguments);
const smushHTML = this.model.get('smush');
if (typeof smushHTML === 'undefined') {
* Detach the views, append our custom fields, make sure that our data is fully updated
* and re-render the updated view.
this.$el.append(prepareTemplate(smushHTML));
* Create a new MediaLibraryTaxonomyFilter we later will instantiate
const MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
id: 'media-attachment-smush-filter',
text: smush_vars.strings.filter_all,
text: smush_vars.strings.filter_not_processed,
props: { stats: 'unsmushed' },
text: smush_vars.strings.filter_excl,
props: { stats: 'excluded' },
text: smush_vars.strings.filter_failed,
props: { stats: 'failed_processing' },
* Extend and override wp.media.view.AttachmentsBrowser to include our new filter.
const AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
// Make sure to load the original toolbar
AttachmentsBrowser.prototype.createToolbar.call(this);
'MediaLibraryTaxonomyFilter',
new MediaLibraryTaxonomyFilter({
controller: this.controller,
model: this.collection.props,