Slideshow block: ensure image size selection works correctly

projects/plugins/jetpack/changelog/fix-slideshow-block-image-size-selection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Slideshow block: Ensure image size selection is correctly reflected in editor at all times

projects/plugins/jetpack/extensions/blocks/slideshow/edit.js

@@ -25,14 +25,23 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export const pickRelevantMediaFiles = ( image, sizeSlug ) => {
 	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
-	imageProps.url =
-		image?.sizes?.[ sizeSlug ]?.url ||
-		image?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
-		image.url;
-	const imageSize =
-		image?.sizes?.[ sizeSlug ] || image?.media_details?.sizes?.[ sizeSlug ] || image;
+	// Prefer the requested size, fallback to 'full' if missing
+	const chosenSize =
+		image?.sizes?.[ sizeSlug ] ||
+		image?.media_details?.sizes?.[ sizeSlug ] ||
+		image?.sizes?.full ||
+		image?.media_details?.sizes?.full ||
+		image;
+
+	imageProps.url = chosenSize?.url || chosenSize?.source_url || image.url;
+
+	imageProps.width = chosenSize?.width || null;
+	imageProps.height = chosenSize?.height || null;
 	imageProps.aspectRatio =
-		imageSize.width && imageSize.height ? `${ imageSize.width } / ${ imageSize.height }` : null;
+		chosenSize?.width && chosenSize?.height
+			? `${ chosenSize.width } / ${ chosenSize.height }`
+			: null;
+
 	return imageProps;
 };
 
@@ -101,7 +110,13 @@ export const SlideshowEdit = ( {
 			const resizedImage = resizedImages.find(
 				( { id } ) => parseInt( id, 10 ) === parseInt( image.id, 10 )
 			);
-			const url = resizedImage?.sizes?.[ slug ]?.source_url;
+			const sizeObj =
+				resizedImage?.sizes?.[ slug ] ||
+				resizedImage?.media_details?.sizes?.[ slug ] ||
+				resizedImage?.sizes?.full ||
+				resizedImage?.media_details?.sizes?.full;
+
+			const url = sizeObj?.source_url || sizeObj?.url || image.url;
 			return {
 				...image,
 				...( url && { url } ),
@@ -197,39 +212,18 @@ export const SlideshowEdit = ( {
 	);
 };
 
-const memoCache = new Map();
-
 export default compose(
 	withSelect( ( select, props ) => {
-		const { getEditorSettings } = select( 'core/editor' );
 		const { ids } = props.attributes;
-
-		const imageSizes = getEditorSettings().imageSizes;
-
-		// Create cache key
-		const memoKey = ids.join( ',' );
-
-		if ( memoCache.has( memoKey ) ) {
-			return {
-				imageSizes,
-				resizedImages: memoCache.get( memoKey ),
-			};
-		}
-
-		// If not in cache, calculate new value
 		const { getEntityRecord } = select( 'core' );
-		const resizedImages = ids.reduce( ( currentResizedImages, id ) => {
-			const image = getEntityRecord( 'postType', 'attachment', id );
-			const sizes = image?.media_details?.sizes;
-			return [ ...currentResizedImages, { id, sizes } ];
-		}, [] );
+		const imageSizes = select( 'core/editor' ).getEditorSettings().imageSizes;
 
-		memoCache.set( memoKey, resizedImages );
+		const resizedImages = ids.map( id => {
+			const media = getEntityRecord( 'postType', 'attachment', id );
+			return { id, sizes: media?.media_details?.sizes };
+		} );
 
-		return {
-			imageSizes,
-			resizedImages,
-		};
+		return { imageSizes, resizedImages };
 	} ),
 	withDispatch( dispatch => {
 		const { lockPostSaving, unlockPostSaving } = dispatch( 'core/editor' );