1

I'm trying to override the MediaPlaceholder component from wp.blockEditor.MediaPlaceholder using the available filter editor.MediaPlaceholder. Below is my code snippet:

// plugin.js
import MyMediaPlaceholder from './media-placeholder';

wp.hooks.addFilter(
    'editor.MediaPlaceholder',
    'my/plugin/replace-media-placeholder',
    () => MyMediaPlaceholder
);
// media-placeholder.js

const {
    blockEditor: { MediaPlaceholder },
    element: { Fragment }
} = wp;

class MyMediaPlaceholder extends MediaPlaceholder {
    // Basically, I want to disable the Drag'n'Drop feature of MediaPlaceholder component.
    renderDropZone() {
        return ( <Fragment /> );
    }
}

export default MyMediaPlaceholder;

But above code goes into infinite loading of block editor page in the browser. The page never stops loading. The loading spinner in the tab keeps spinning and spinning.

My hunch is, it's going into some kind of infinite loop here. But I'm not able to figure out what's wrong with it. Can someone help here?

1

wp.blockEditor.MediaPlaceholder is not the class, it's the following code in the Gutenberg/Block Editor's media-placeholder file:

export default compose(
    applyWithSelect,
    withFilters( 'editor.MediaPlaceholder' ),
)( MediaPlaceholder );

Thus an infinite loop as the filter is applied constantly.

New contributor
Peter Wilson is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.