What problem does this address?
I found it impossible to teach Image block first to use a URL for the thumbnail and switch to a URL for the final image when the time came. Here is a basic code to provide the concept. Once the createBlock part starts, we lose control of everything in ImageBlock because the replacement from core/image eventually unmounts the ImageBlock.
const ImageBlock = () => {
const blockProps = useBlockProps();
const {blob, thumbnailBlob, isDone} = useTheImage();
useEffect(() => {
if (isDone) {
replaceBlock(blockClientId, createBlock(core/image, { // ...attributes });
}
}, [blob, isDone, thumbnailBlob]);
// this part won't work correctly
// because when replaceBlock happens, this whole compoennt unmount
// so it won't get the file and set the src in the end ...
useEffect(() => {
if (blob) {
setAttributes({ src })
} else if (thumbnailBlob) {
setAttributes({ src })
}
}, [blob, thumbnailBlob]);
return <div {...blockProps} />
}As for the loading state, the Image block has its spinner built in, but it seems like it was designed for internal only, it can’t be used for external images.
From the perspective of displaying externally hosted images, maybe this is something we can improve in the core block, thoughts?
What problem does this address?
I found it impossible to teach Image block first to use a URL for the thumbnail and switch to a URL for the final image when the time came. Here is a basic code to provide the concept. Once the createBlock part starts, we lose control of everything in ImageBlock because the replacement from core/image eventually unmounts the ImageBlock.
As for the loading state, the Image block has its spinner built in, but it seems like it was designed for internal only, it can’t be used for external images.
From the perspective of displaying externally hosted images, maybe this is something we can improve in the core block, thoughts?