Always prefer "large" image size (#11682)

Prefer "large" image size (when available) for Gallery, Image and Media and Text blocks.
WordPress · Nov 15, 2018 · e583606 · e583606
1 parent a502e1c
commit e583606
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -214,6 +214,7 @@ export const settings = {
 					}
 					mediaType = media.type;
 				}
+
 				setAttributes( {
 					url: media.url,
 					id: media.id,

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import { filter, pick } from 'lodash';
+import { filter, pick, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -45,7 +45,9 @@ export function defaultColumnsNumber( attributes ) {
 }
 
 export const pickRelevantMediaFiles = ( image ) => {
-	return pick( image, [ 'alt', 'id', 'link', 'url', 'caption' ] );
+	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;
+	return imageProps;
 };
 
 class GalleryEdit extends Component {

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -61,7 +61,9 @@ const LINK_DESTINATION_CUSTOM = 'custom';
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export const pickRelevantMediaFiles = ( image ) => {
-	return pick( image, [ 'alt', 'id', 'link', 'url', 'caption' ] );
+	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;
+	return imageProps;
 };
 
 /**

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -50,6 +51,7 @@ class MediaTextEdit extends Component {
 		const { setAttributes } = this.props;
 
 		let mediaType;
+		let src;
 		// for media selections originated from a file upload.
 		if ( media.media_type ) {
 			if ( media.media_type === 'image' ) {
@@ -63,11 +65,16 @@ class MediaTextEdit extends Component {
 			mediaType = media.type;
 		}
 
+		if ( mediaType === 'image' ) {
+			// Try the "large" size URL, falling back to the "full" size URL below.
+			src = get( media, [ 'sizes', 'large', 'url' ] ) || get( media, [ 'media_details', 'sizes', 'large', 'source_url' ] );
+		}
+
 		setAttributes( {
 			mediaAlt: media.alt,
 			mediaId: media.id,
 			mediaType,
-			mediaUrl: media.url,
+			mediaUrl: src || media.url,
 		} );
 	}