Replace image URI attribute with state

[jaymcp]

Description

This PR removes the url attribute, which is only used in the editor.
It then adds a stateful approach to loading the correct image URI in the editor.

This will allow for easier production of sample content for usage via such things as the WP Playground.

Change Log

• Replace image URI attribute with state

Steps to test

1. before checking out this PR, insert an Image Comparison block, and add two images. Save
2. checkout this PR
3. run npm i
4. run npm run build:prod
5. reload the post containing the Image Comparison block you added in step 1
6. the block should load correctly, and should still display the two images you inserted
7. Save and reload the post again
8. the block should still load correctly, and should still display the two images you inserted
9. select an image within the block, and change the media size
10. the selected size should load in correctly
11. Save and reload the post again
12. the block should still load correctly, and should still display the two images you inserted, at the sizes you chose
13. replace one of the images
14. the replacement image should load in correctly
15. Save and reload the post again
16. the block should still load with the correct media

Screenshots/Videos

~

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[g-elwell]

Thanks for this @jaymcp - unfortunately this change appears to prevent the sidebar image preview from pulling through.

main:

this branch:

[jaymcp]

Thanks for this @jaymcp - unfortunately this change appears to prevent the sidebar image preview from pulling through.

main:

this branch:

I can't repro the issue you're experiencing 😕

[g-elwell]

Thanks for this @jaymcp - unfortunately this change appears to prevent the sidebar image preview from pulling through.
main:
this branch:

I can't repro the issue you're experiencing 😕

I'm no longer seeing this, so not sure what happened...

The change to blockProps I proposed seems to have had an unintended side-effect, I assume some of the CSS classes may be reliant on the previous markup:

[jaymcp]

The change to blockProps I proposed seems to have had an unintended side-effect, I assume some of the CSS classes may be reliant on the previous markup: [image]

Thanks G, I've adjusted the styles to match the new DOM hierarchy.

[g-elwell]

The change to blockProps I proposed seems to have had an unintended side-effect, I assume some of the CSS classes may be reliant on the previous markup: [image]

Thanks G, I've adjusted the styles to match the new DOM hierarchy.

Thanks, the overflow issue is resolved.

I'm sorry to be drip-feeding this information, but I noticed another couple of issues when re-testing:

• The image resolution selection doesn't appear to persist if you click away then back onto the block. This seems to be due to this effect in the ResolutionTool:

// reset image resolution when image changes
useEffect(() => {
  setAttributes({
    sizeSlug: 'full',
  });
}, [id]);

It's not happening on main, I haven't delved into why, but this looks like inappropriate use of useEffect. We could simply remove this functionality, or alternatively set the sizeSlug in an event handler when the image selection is changed (within onSelect in the MediaUpload component).

• The image thumbnail in the sidebar does not reflect the resolution selection. We just need to pass attributes?.sizeSlug to the Image component in Settings.js

[jaymcp]

The change to blockProps I proposed seems to have had an unintended side-effect, I assume some of the CSS classes may be reliant on the previous markup: [image]

Thanks G, I've adjusted the styles to match the new DOM hierarchy.

Thanks, the overflow issue is resolved.

I'm sorry to be drip-feeding this information, but I noticed another couple of issues when re-testing:

• The image resolution selection doesn't appear to persist if you click away then back onto the block. This seems to be due to this effect in the ResolutionTool:

// reset image resolution when image changes
useEffect(() => {
  setAttributes({
    sizeSlug: 'full',
  });
}, [id]);

It's not happening on main, I haven't delved into why, but this looks like inappropriate use of useEffect. We could simply remove this functionality, or alternatively set the sizeSlug in an event handler when the image selection is changed (within onSelect in the MediaUpload component).

• The image thumbnail in the sidebar does not reflect the resolution selection. We just need to pass attributes?.sizeSlug to the Image component in Settings.js

Thanks G, I've implemented those suggestions. I've also fixed up the image URI retrieval, so that the persisted image resolution doesn't impact loading of replaced media if the media doesn't have the specified resolution.

[g-elwell]

Thanks for making those changes @jaymcp - works great for me now!