From 42bc7ba5045f8d685951f32a4e88e5fb4822df29 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 6 Jul 2022 10:24:34 +0200 Subject: [PATCH 1/4] Mobile - Gallery block - Add useGetMedia native variant - Image block: Don't call for media data if it already has it --- packages/block-library/src/gallery/edit.js | 6 ++- .../src/gallery/use-get-media.native.js | 44 +++++++++++++++++++ .../block-library/src/image/edit.native.js | 10 +++-- 3 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 packages/block-library/src/gallery/use-get-media.native.js diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index c9beeb27a750a2..d0ba808946d7a9 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/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. diff --git a/packages/block-library/src/gallery/use-get-media.native.js b/packages/block-library/src/gallery/use-get-media.native.js new file mode 100644 index 00000000000000..994a2152f756c2 --- /dev/null +++ b/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 ] + ); +} diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index c155f6cf66a38a..a9db871c5f88b5 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -268,11 +268,12 @@ export class ImageEdit extends Component { componentDidUpdate( previousProps ) { const { image, attributes, setAttributes, featuredImageId } = this.props; - if ( ! previousProps.image && image ) { - const url = + const { url } = attributes; + if ( ! hasQueryArg( url, 'w' ) && ! previousProps.image && image ) { + const updatedUrl = getUrlForSlug( image, attributes?.sizeSlug ) || image.source_url; - setAttributes( { url } ); + setAttributes( { url: updatedUrl } ); } const { id } = attributes; @@ -916,9 +917,10 @@ export default compose( [ isNotFileUrl && url && ! hasQueryArg( url, 'w' ) ); + const image = shouldGetMedia ? getMedia( id ) : null; return { - image: shouldGetMedia ? getMedia( id ) : null, + image, imageSizes, imageDefaultSize, featuredImageId, From a65bafc065df604b61a0d98a7a3aa2fd035f3d16 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 6 Jul 2022 16:10:11 +0200 Subject: [PATCH 2/4] 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 --- packages/block-library/src/image/edit.native.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index a9db871c5f88b5..7e0ed8d7a82faa 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -269,11 +269,14 @@ export class ImageEdit extends Component { const { image, attributes, setAttributes, featuredImageId } = this.props; const { url } = attributes; - if ( ! hasQueryArg( url, 'w' ) && ! previousProps.image && image ) { - const updatedUrl = - getUrlForSlug( image, attributes?.sizeSlug ) || - image.source_url; - setAttributes( { url: updatedUrl } ); + if ( ! previousProps.image && image ) { + if ( ! hasQueryArg( url, 'w' ) && attributes?.sizeSlug ) { + const updatedUrl = + getUrlForSlug( image, attributes.sizeSlug ) || + image.source_url; + + setAttributes( { url: updatedUrl } ); + } } const { id } = attributes; From 2fb73cf0f0ad0b59dcbc85feedfd4414c8598434 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 7 Jul 2022 16:47:26 +0200 Subject: [PATCH 3/4] Mobile - CHANGELOG update --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index a50aad23cedcdb..55dbb704b78721 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/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 'Insert from URL' option to Video block [#41493] - [*] Image block copies the alt text from the media library when selecting an item [#41839] - [*] Introduce "block recovery" option for invalid blocks [#41988] +- [***] Gallery and Image block - Performance improvements [#42178] ## 1.78.1 From 68299f6c18060db7aa7a18ed22df30e5d9c7725d Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 11 Jul 2022 18:42:25 +0200 Subject: [PATCH 4/4] Mobile - Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index dc2628725a7db5..a3af388b0de6fa 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -12,12 +12,12 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [*] Add React Native FastImage [#42009] +- [***] Gallery and Image block - Performance improvements [#42178] ## 1.79.0 - [*] Add 'Insert from URL' option to Video block [#41493] - [*] Image block copies the alt text from the media library when selecting an item [#41839] - [*] Introduce "block recovery" option for invalid blocks [#41988] -- [***] Gallery and Image block - Performance improvements [#42178] ## 1.78.1