[Mobile] - Gallery block - Add useGetMedia native variant (#42178)

* Mobile - Gallery block - Add useGetMedia native variant

- Image block: Don't call for media data if it already has it

* Mobile - Image block - Update image URL if needed by checking if an image size was specified or if it doesn't contain a query param

* Mobile - CHANGELOG update

* Mobile - Update CHANGELOG

packages/block-library/src/gallery/edit.js

@@ -414,8 +414,10 @@ function GalleryEdit( props ) {
 
 	const hasImages = !! images.length;
 	const hasImageIds = hasImages && images.some( ( image ) => !! image.id );
-	const imagesUploading = images.some(
-		( img ) => ! img.id && img.url?.indexOf( 'blob:' ) === 0
+	const imagesUploading = images.some( ( img ) =>
+		! Platform.isNative
+			? ! img.id && img.url?.indexOf( 'blob:' ) === 0
+			: img.url?.indexOf( 'file:' ) === 0
 	);
 
 	// MediaPlaceholder props are different between web and native hence, we provide a platform-specific set.

packages/block-library/src/gallery/use-get-media.native.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+const EMPTY_IMAGE_MEDIA = [];
+
+/**
+ * Retrieves the extended media info for each gallery image from the store. This is used to
+ * determine which image size options are available for the current gallery.
+ *
+ * @param {Array} innerBlockImages An array of the innerBlock images currently in the gallery.
+ *
+ * @return {Array} An array of media info options for each gallery image.
+ */
+export default function useGetMedia( innerBlockImages ) {
+	return useSelect(
+		( select ) => {
+			const imagesUploading = innerBlockImages.some(
+				( { attributes } ) => attributes?.url?.indexOf( 'file:' ) === 0
+			);
+			const imageIds = innerBlockImages
+				.filter( ( { attributes } ) => {
+					const { id, url } = attributes;
+					return id !== undefined && url?.indexOf( 'file:' ) !== 0;
+				} )
+				.map( ( imageBlock ) => imageBlock.attributes.id );
+
+			if ( imageIds.length === 0 || imagesUploading ) {
+				return EMPTY_IMAGE_MEDIA;
+			}
+
+			return (
+				select( coreStore ).getMediaItems( {
+					include: imageIds.join( ',' ),
+					per_page: imageIds.length,
+					orderby: 'include',
+				} ) ?? EMPTY_IMAGE_MEDIA
+			);
+		},
+		[ innerBlockImages ]
+	);
+}

packages/block-library/src/image/edit.native.js

@@ -268,11 +268,15 @@ export class ImageEdit extends Component {
 	componentDidUpdate( previousProps ) {
 		const { image, attributes, setAttributes, featuredImageId } =
 			this.props;
+		const { url } = attributes;
 		if ( ! previousProps.image && image ) {
-			const url =
-				getUrlForSlug( image, attributes?.sizeSlug ) ||
-				image.source_url;
-			setAttributes( { url } );
+			if ( ! hasQueryArg( url, 'w' ) && attributes?.sizeSlug ) {
+				const updatedUrl =
+					getUrlForSlug( image, attributes.sizeSlug ) ||
+					image.source_url;
+
+				setAttributes( { url: updatedUrl } );
+			}
 		}
 
 		const { id } = attributes;
@@ -921,9 +925,10 @@ export default compose( [
 				isNotFileUrl &&
 				url &&
 				! hasQueryArg( url, 'w' ) );
+		const image = shouldGetMedia ? getMedia( id ) : null;
 
 		return {
-			image: shouldGetMedia ? getMedia( id ) : null,
+			image,
 			imageSizes,
 			imageDefaultSize,
 			shouldUseFastImage,

packages/react-native-editor/CHANGELOG.md

@@ -14,6 +14,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] Add React Native FastImage [#42009]
 -   [*] Block inserter displays block collections [#42405]
 -   [**] Fix a crash when scrolling posts containing Embed blocks (Android 12 only) [#42514]
+-   [***] Gallery and Image block - Performance improvements [#42178]
 
 ## 1.79.0
 -   [*] Add 'Insert from URL' option to Video block [#41493]