[Mobile] - Gallery block - Add useGetMedia native variant #42178
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Image block: Don't call for media data if it already has it
geriux
added
[Status] In Progress
|
Size Change: +17 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
…mage size was specified or if it doesn't contain a query param
added 2 commits
July 18, 2022 16:54
# Conflicts: # packages/react-native-editor/CHANGELOG.md
4 tasks
|
I found this article to be useful while executing test case 2: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related PRs:
Gutenberg Mobile PR-> Gallery block improvements wordpress-mobile/gutenberg-mobile#5007WordPress iOS PR-> Media - Add large and medium image sizes wordpress-mobile/WordPress-iOS#18997WordPress Android PR-> Media - Add large and medium image sizes wordpress-mobile/WordPress-Android#16875What?
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
useGetMediaand this causes the following issues:mediaIdwhen making the request, on mobile we use amediaIdfor local uploads which are different from the finalmediaId, so it might occur that your image would change to a different one that matches the localmediaIdwith 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.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
useGetMedianative variant that will only callgetMediaItemsonce all of the images have finished uploading, as well as filtering out images that havefile:as URL. This will prevent bringing images with the localmediaIdwhile the images are being uploaded and making a lot of network requests.Main apps will send the
largesize ormediumto the editor instead of thefull-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
sizeSlugis 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
Image sizeoptionImage sizeThumbnail,Medium,Large, andFull Size···on the top rightfile://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-1024Test 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
Image sizeoptionImage sizeThumbnail,Medium,Large, andFull Size···on the top rightfile://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-1024Screenshots or screencast
Test case 1
GalleryTestCase1_Final.mov
Test case 2
GalleryBlockTestCase2_Final.mov