How do I run an action after a featured image has been selected in the Gutenberg editor?

Question

I have found a few tutorials such as a DigitalApps.co and That Dev Girl explaining how to use "wp.hooks.addFilter( 'editor.PostFeaturedImage'"... in order to create/replace the content of the featured image button.

However, this doesn't help me very much in what I'm trying to do. I would like to hook into the save image feature, so that when the featured image is selected, I can open a popup allowing the user to edit the background positioning of this image.

I already finished the code allowing the user to edit the background positioning and save to the post's meta, just need to know when and which image has been selected. Am I on the right path with the above filter? Can someone please point me in the right direction?

Thanks!

Answer 1

All current data from the Block Editor is stored in a data store. If you click on the save button, this data is send via the REST API to the database. You can select data from the store and subscribe to changes.

// Create a higher-order component that updates automatically when featured image changes.
const applyWithSelect = withSelect( ( select ) => {
    const { getMedia } = select( 'core' );
    const { getEditedPostAttribute } = select( 'core/editor' );
    const featuredImageId = getEditedPostAttribute( 'featured_media' );

    return {
        media: featuredImageId ? getMedia( featuredImageId ) : null,
        featuredImageId,
    };
} );

export default compose( [
    applyWithSelect,
] )( MyCustomBlockEdit );

source