Invalidate getMedia resolution on success

[swissspidy]

The image block fetches the current attachment here:

https://github.com/WordPress/gutenberg/blob/e0a413d213a2a829ece52c6728515b10b0154d8d/packages/block-library/src/image/image.js#L113-L116

Which is used to render this component (<ImageSizeControl>)

With client-side thumbnail generation, the sub-sizes aren't available yet the first time the attachment is fetched, so the component won't be rendered until the resolution is invalidated (or the page reloaded).

Something like this in should suffice:

dispatch( coreStore ).invalidateResolution( 'getMedia', [ id ] );

The right place is probably the onFileChange within editorUploadMedia

[swissspidy]

Actually, blockEditorUploadMedia would be better as editorUploadMedia just uploads a file, it doesn't have an onSuccess callback. Maybe need a wrapper around that in editor? 🤔 Just so it can access the coreStore

[swissspidy]

This might be better solved in the image component itself in an effect, so that it re-fetches the attachment when uploading is finished. Or maybe both (invalidate in onSuccess, re-fetch in effect)