Replacing Gutenberg Featured Image control?

Here is an example of adding a new component to the Featured Image area. This was taken from the official docs and updated to use JSX. I am using the @wordpress/scripts package to build this out.

// Import from the hooks package
import { addFilter } from '@wordpress/hooks';

// Some custom component to add.
const CustomComponent = ({ id }) => {
    return id ? (
        <h4>You selected an image, yay!</h4>
    ) : (
        <div>You have not selected anything</div>
    );
};

// Function to be called by the hook that returns a function containing the new UI
function replacePostFeaturedImage(OriginalComponent) {
    return (props) => {
        const { featuredImageId } = props;
        return (
            <div>
                <CustomComponent id={featuredImageId} />
                <OriginalComponent {...props} />
            </div>
        );
    };
}

// Register the hook.
addFilter(
    'editor.PostFeaturedImage',
    'my-plugin/replace-post-featured-image',
    replacePostFeaturedImage
);

To replace the entire component, just remove <OriginalComponent /> from the replacePostFeaturedImage function.

Hope it helps and happy to add any further context as needed!

Leave a Comment