From d2805660f311682b6b48f8bf4fa766749a5c7a89 Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Tue, 14 Oct 2025 16:48:19 +0100 Subject: [PATCH 1/3] Ensure that Slideshow block image size selection works correctly consistently --- .../extensions/blocks/slideshow/edit.js | 38 +++++-------------- 1 file changed, 10 insertions(+), 28 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js b/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js index 5ee05e573dbfb..0ab595d9bd73f 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js @@ -31,8 +31,11 @@ export const pickRelevantMediaFiles = ( image, sizeSlug ) => { image.url; const imageSize = image?.sizes?.[ sizeSlug ] || image?.media_details?.sizes?.[ sizeSlug ] || image; + + imageProps.width = imageSize?.width || null; + imageProps.height = imageSize?.height || null; imageProps.aspectRatio = - imageSize.width && imageSize.height ? `${ imageSize.width } / ${ imageSize.height }` : null; + imageSize?.width && imageSize?.height ? `${ imageSize.width } / ${ imageSize.height }` : null; return imageProps; }; @@ -197,39 +200,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' ); From 790e99cb687b43dc1c1d9e285097e89927447f85 Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Tue, 14 Oct 2025 16:49:52 +0100 Subject: [PATCH 2/3] changelog --- .../changelog/fix-slideshow-block-image-size-selection | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/fix-slideshow-block-image-size-selection 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 From 111c96366488f6b31b706326cd7de4c962655383 Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Fri, 17 Oct 2025 13:08:25 +0100 Subject: [PATCH 3/3] Add fallback to full size for images too small to have a large size (or medium size) defined. --- .../extensions/blocks/slideshow/edit.js | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js b/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js index 0ab595d9bd73f..18b50e90bd963 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js @@ -25,17 +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; - - imageProps.width = imageSize?.width || null; - imageProps.height = imageSize?.height || null; + // 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; }; @@ -104,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 } ),