Gallery block: Add images size selector

packages/block-library/src/gallery/block.json

@@ -60,6 +60,10 @@
 		"linkTo": {
 			"type": "string",
 			"default": "none"
+		},
+		"sizeSlug": {
+			"type": "string",
+			"default": "large"
 		}
 	}
 }

packages/block-library/src/gallery/edit.js

@@ -6,7 +6,10 @@ import {
 	filter,
 	find,
 	forEach,
+	get,
+	isEmpty,
 	map,
+	reduce,
 	some,
 } from 'lodash';
 
@@ -75,6 +78,8 @@ class GalleryEdit extends Component {
 		this.setImageAttributes = this.setImageAttributes.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 		this.onFocusGalleryCaption = this.onFocusGalleryCaption.bind( this );
+		this.getImagesSizeOptions = this.getImagesSizeOptions.bind( this );
+		this.updateImagesSize = this.updateImagesSize.bind( this );
 
 		this.state = {
 			selectedImage: null,
@@ -169,7 +174,7 @@ class GalleryEdit extends Component {
 	}
 
 	onSelectImages( newImages ) {
-		const { columns, images } = this.props.attributes;
+		const { columns, images, sizeSlug } = this.props.attributes;
 		const { attachmentCaptions } = this.state;
 		this.setState(
 			{
@@ -181,7 +186,7 @@ class GalleryEdit extends Component {
 		);
 		this.setAttributes( {
 			images: newImages.map( ( newImage ) => ( {
-				...pickRelevantMediaFiles( newImage ),
+				...pickRelevantMediaFiles( newImage, sizeSlug ),
 				caption: this.selectCaption( newImage, images, attachmentCaptions ),
 			} ) ),
 			columns: columns ? Math.min( newImages.length, columns ) : columns,
@@ -234,6 +239,28 @@ class GalleryEdit extends Component {
 		} );
 	}
 
+	getImagesSizeOptions() {
+		const { imageSizes } = this.props;
+		return map( imageSizes, ( { name, slug } ) => ( { value: slug, label: name } ) );
+	}
+
+	updateImagesSize( sizeSlug ) {
+		const { attributes: { images }, resizedImages } = this.props;
+
+		const updatedImages = map( images, ( image ) => {
+			if ( ! image.id ) {
+				return image;
+			}
+			const url = get( resizedImages, [ parseInt( image.id, 10 ), sizeSlug ] );
+			return {
+				...image,
+				...( url && { url } ),
+			};
+		} );
+
+		this.setAttributes( { images: updatedImages, sizeSlug } );
+	}
+
 	componentDidMount() {
 		const { attributes, mediaUpload } = this.props;
 		const { images } = attributes;
@@ -274,6 +301,7 @@ class GalleryEdit extends Component {
 			imageCrop,
 			images,
 			linkTo,
+			sizeSlug,
 		} = attributes;
 
 		const hasImages = !! images.length;
@@ -304,6 +332,9 @@ class GalleryEdit extends Component {
 		if ( ! hasImages ) {
 			return mediaPlaceholder;
 		}
+
+		const imageSizeOptions = this.getImagesSizeOptions();
+
 		return (
 			<>
 				<InspectorControls>
@@ -331,6 +362,14 @@ class GalleryEdit extends Component {
 							onChange={ this.setLinkTo }
 							options={ linkOptions }
 						/>
+						{ hasImages && ! isEmpty( imageSizeOptions ) && (
+							<SelectControl
+								label={ __( 'Images Size' ) }
+								value={ sizeSlug }
+								options={ imageSizeOptions }
+								onChange={ this.updateImagesSize }
+							/>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				{ noticeUI }
@@ -350,10 +389,42 @@ class GalleryEdit extends Component {
 	}
 }
 export default compose( [
-	withSelect( ( select ) => {
+	withSelect( ( select, { attributes: { ids }, isSelected } ) => {
+		const { getMedia } = select( 'core' );
 		const { getSettings } = select( 'core/block-editor' );
-		const { mediaUpload } = getSettings();
-		return { mediaUpload };
+		const {
+			imageSizes,
+			mediaUpload,
+		} = getSettings();
+
+		let resizedImages = {};
+
+		if ( isSelected ) {
+			resizedImages = reduce( ids, ( currentResizedImages, id ) => {
+				if ( ! id ) {
+					return currentResizedImages;
+				}
+				const image = getMedia( id );
+				const sizes = reduce( imageSizes, ( currentSizes, size ) => {
+					const defaultUrl = get( image, [ 'sizes', size.slug, 'url' ] );
+					const mediaDetailsUrl = get( image, [ 'media_details', 'sizes', size.slug, 'source_url' ] );
+					return {
+						...currentSizes,
+						[ size.slug ]: defaultUrl || mediaDetailsUrl,
+					};
+				}, {} );
+				return {
+					...currentResizedImages,
+					[ parseInt( id, 10 ) ]: sizes,
+				};
+			}, {} );
+		}
+
+		return {
+			imageSizes,
+			mediaUpload,
+			resizedImages,
+		};
 	} ),
 	withNotices,
 	withViewportMatch( { isNarrow: '< small' } ),

packages/block-library/src/gallery/shared.js

@@ -7,9 +7,9 @@ export function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
 
-export const pickRelevantMediaFiles = ( image ) => {
+export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
-	imageProps.url = get( image, [ 'sizes', 'large', 'url' ] ) || get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) || image.url;
+	imageProps.url = get( image, [ 'sizes', sizeSlug, 'url' ] ) || get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) || image.url;
 	const fullUrl = get( image, [ 'sizes', 'full', 'url' ] ) || get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
 	if ( fullUrl ) {
 		imageProps.fullUrl = fullUrl;

packages/block-library/src/gallery/transforms.js

@@ -31,10 +31,11 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/image' ],
 			transform: ( attributes ) => {
-				// Init the align attribute from the first item which may be either the placeholder or an image.
-				let { align } = attributes[ 0 ];
-				// Loop through all the images and check if they have the same align.
+				// Init the align and size from the first item which may be either the placeholder or an image.
+				let { align, sizeSlug } = attributes[ 0 ];
+				// Loop through all the images and check if they have the same align and size.
 				align = every( attributes, [ 'align', align ] ) ? align : undefined;
+				sizeSlug = every( attributes, [ 'sizeSlug', sizeSlug ] ) ? sizeSlug : undefined;
 
 				const validImages = filter( attributes, ( { url } ) => url );
 
@@ -47,6 +48,7 @@ const transforms = {
 					} ) ),
 					ids: validImages.map( ( { id } ) => id ),
 					align,
+					sizeSlug,
 				} );
 			},
 		},
@@ -102,14 +104,15 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { images, align } ) => {
+			transform: ( { images, align, sizeSlug } ) => {
 				if ( images.length > 0 ) {
 					return images.map( ( { id, url, alt, caption } ) => createBlock( 'core/image', {
 						id,
 						url,
 						alt,
 						caption,
 						align,
+						sizeSlug,
 					} ) );
 				}
 				return createBlock( 'core/image', { align } );

packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.json

@@ -22,7 +22,8 @@
             ],
             "caption": "Gallery caption.",
             "imageCrop": true,
-            "linkTo": "none"
+            "linkTo": "none",
+            "sizeSlug": "large"
         },
         "innerBlocks": [],
         "originalContent": "<figure class=\"wp-block-gallery columns-2 is-cropped\">\n\t<ul class=\"blocks-gallery-grid\">\n\t\t<li class=\"blocks-gallery-item\">\n\t\t\t<figure>\n\t\t\t\t<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"title\" />\n\t\t\t</figure>\n\t\t</li>\n\t\t<li class=\"blocks-gallery-item\">\n\t\t\t<figure>\n\t\t\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"title\" />\n\t\t\t</figure>\n\t\t</li>\n\t</ul>\n\t<figcaption class=\"blocks-gallery-caption\">Gallery caption.</figcaption>\n</figure>"

packages/e2e-tests/fixtures/blocks/core__gallery.json

@@ -22,7 +22,8 @@
             ],
             "caption": "",
             "imageCrop": true,
-            "linkTo": "none"
+            "linkTo": "none",
+            "sizeSlug": "large"
         },
         "innerBlocks": [],
         "originalContent": "<figure class=\"wp-block-gallery columns-2 is-cropped\">\n\t<ul class=\"blocks-gallery-grid\">\n\t\t<li class=\"blocks-gallery-item\">\n\t\t\t<figure>\n\t\t\t\t<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"title\" />\n\t\t\t</figure>\n\t\t</li>\n\t\t<li class=\"blocks-gallery-item\">\n\t\t\t<figure>\n\t\t\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"title\" />\n\t\t\t</figure>\n\t\t</li>\n\t</ul>\n</figure>"

packages/e2e-tests/fixtures/blocks/core__gallery__columns.json

@@ -23,7 +23,8 @@
             "columns": 1,
             "caption": "",
             "imageCrop": true,
-            "linkTo": "none"
+            "linkTo": "none",
+            "sizeSlug": "large"
         },
         "innerBlocks": [],
         "originalContent": "<figure class=\"wp-block-gallery columns-1 is-cropped\">\n\t<ul class=\"blocks-gallery-grid\">\n\t\t<li class=\"blocks-gallery-item\">\n\t\t\t<figure>\n\t\t\t\t<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"title\" />\n\t\t\t</figure>\n\t\t</li>\n\t\t<li class=\"blocks-gallery-item\">\n\t\t\t<figure>\n\t\t\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"title\" />\n\t\t\t</figure>\n\t\t</li>\n\t</ul>\n</figure>"