diff --git a/projects/plugins/jetpack/changelog/fix-slideshow-block-image-size-selection b/projects/plugins/jetpack/changelog/fix-slideshow-block-image-size-selection new file mode 100644 index 0000000000000..c9e414c4c4aac --- /dev/null +++ b/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 diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js b/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js index 5ee05e573dbfb..18b50e90bd963 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js +++ b/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' );