Related PRs:

• Gutenberg Mobile PR -> Gallery block improvements wordpress-mobile/gutenberg-mobile#5007
• WordPress iOS PR -> Media - Add large and medium image sizes wordpress-mobile/WordPress-iOS#18997
• WordPress Android PR -> Media - Add large and medium image sizes wordpress-mobile/WordPress-Android#16875

What?

This PR improves the performance of the Gallery and Image block.

Why?

Currently, the experience with the Gallery block is not great when uploading images on mobile. One of the issues is that the parent apps are sending the full size of the image to the editor, which affects how the block itself performs due to memory usage.

Apart from that, the Gallery block is making a lot of network requests with useGetMedia and this causes the following issues:

• It uses the mediaId when making the request, on mobile we use a mediaId for local uploads which are different from the final mediaId, so it might occur that your image would change to a different one that matches the local mediaId with one of your uploaded images from your media library. Then it would be updated back again to the original one once the image finished uploading. This is confusing for the users and it is an unexpected behavior we don't want, there are reports of this happening too.
• It makes repeatedly network requests while images are being uploaded, making the device really slow (even more on lower-end devices)

The Image block also makes a network request to get the media data so it would get even worse as the Gallery block uses Image blocks as inner blocks.

How?

First, we introduced React Native FastImage to improve image rendering within the editor in #42009.

We added a useGetMedia native variant that will only call getMediaItems once all of the images have finished uploading, as well as filtering out images that have file: as URL. This will prevent bringing images with the local mediaId while the images are being uploaded and making a lot of network requests.

Main apps will send the large size or medium to the editor instead of the full-size. With this and React Native FastImage only one image will be cached, and memory usage will be very low.

The Image block will only set a new URL if it really changed, for example, if the sizeSlug is set or different.

Testing Instructions

NOTE: Test for both Simple sites and self-hosted, repeat both test cases for the Gallery and Image block.

Test case 1 - Gallery block image uploads

• Add a Gallery block
• Add some images from your device
• Wait until all images have finished uploading
• Open the Gallery block's settings
• Expect to see the Image size option
• Tap on Image size
• Expect to see the options: Thumbnail, Medium, Large, and Full Size
• Close the settings
• Open the HTML editor by tapping on the ··· on the top right
• Check the images URLs don’t have file:// as the protocol and that they’re using the large size, you can see they have a query param ?w=1024, and for self-hosted, instead of a query param the size it¡s in the URL file name e.g. image-1024

Test case 2 - Gallery block image uploads with the editor closed

Note: You should limit your network speed so it's easier to test this use case

• Add a Gallery block
• Add some images from your device
• While the images are uploading, quickly close the editor
• Wait until the images and post are uploaded
• Open the editor
• Tap on the Gallery block
• Open the Gallery block's settings
• Expect to see the Image size option
• Tap on Image size
• Expect to see the options: Thumbnail, Medium, Large, and Full Size
• Close the settings
• Open the HTML editor by tapping on the ··· on the top right
• Check the images URLs don’t have file:// as the protocol and that they’re using the large size, you can see they have a query param ?w=1024, and for self-hosted, instead of a query param the size it¡s in the URL file name e.g. image-1024

Screenshots or screencast

Test case 1

Test case 2