Gallery block refactor: check for new images by clientId instead of i…

…d to stop link settings being lost when images edited (#30550) Co-authored-by: Glen Davies <[email protected]>
WordPress · Apr 8, 2021 · 3870131 · 3870131
1 parent cebaa9f
commit 3870131
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty, concat, find } from 'lodash';
+import { concat, find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -440,7 +440,6 @@ function GalleryEdit( props ) {
 		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
 	}
 
-	const shouldShowSizeOptions = ! isEmpty( imageSizeOptions );
 	const hasLinkTo = linkTo && linkTo !== 'none';
 
 	return (
@@ -478,15 +477,16 @@ function GalleryEdit( props ) {
 							onChange={ toggleOpenInNewTab }
 						/>
 					) }
-					{ shouldShowSizeOptions ? (
+					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
 							hideCancelButton={ true }
 						/>
-					) : (
+					) }
+					{ ! imageSizeOptions && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
 								{ __( 'Image size' ) }

diff --git a/packages/block-library/src/gallery/use-get-new-images.js b/packages/block-library/src/gallery/use-get-new-images.js
@@ -41,7 +41,9 @@ export default function useGetNewImages( images, imageData ) {
 		const newImages = images.filter(
 			( image ) =>
 				! newCurrentImages.find(
-					( currentImage ) => image.id && currentImage.id === image.id
+					( currentImage ) =>
+						image.clientId &&
+						currentImage.clientId === image.clientId
 				) &&
 				imageData?.find( ( img ) => img.id === image.id ) &&
 				! image.fromSavedConent

diff --git a/packages/block-library/src/gallery/use-image-sizes.js b/packages/block-library/src/gallery/use-image-sizes.js
@@ -13,7 +13,7 @@ export default function useImageSizes( images, isSelected, getSettings ) {
 
 	function getImageSizing() {
 		if ( ! images || images.length === 0 ) {
-			return [];
+			return;
 		}
 		const { imageSizes } = getSettings();
 		let resizedImages = {};