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?

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?

• block-editor

1 Answer 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.