From 178aea6a554c6a2cb3dcdef3a0cba024159d2abe Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Fri, 9 Nov 2018 18:58:39 +0200 Subject: [PATCH 1/4] Always prefer "large" image size For galleries and image blocks. --- packages/block-library/src/gallery/edit.js | 6 ++++-- packages/block-library/src/image/edit.js | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 3ba6c57bf85b31..b9a125db38be3a 100644 --- 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 index 3d0c3706d14e40..6f41d1c32befdb 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -58,7 +58,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; }; /** From 9425504325196a7470a3d26c7c5d85fe3f31c1e5 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Mon, 12 Nov 2018 18:57:09 +0200 Subject: [PATCH 2/4] Also do the same for the "cover" and "media & text" blocks. --- packages/block-library/src/cover/index.js | 10 +++++++++- packages/block-library/src/media-text/edit.js | 9 ++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 881755f1dd1f53..a63f01bfb64e1d 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { get } from 'lodash'; /** * WordPress dependencies @@ -196,6 +197,7 @@ export const settings = { return; } let mediaType; + let src; // for media selections originated from a file upload. if ( media.media_type ) { if ( media.media_type === IMAGE_BACKGROUND_TYPE ) { @@ -214,8 +216,14 @@ export const settings = { } mediaType = media.type; } + + if ( mediaType === IMAGE_BACKGROUND_TYPE ) { + // 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( { - url: media.url, + url: src || media.url, id: media.id, backgroundType: mediaType, } ); diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index ca932f9b8115dd..238c9a604b32b1 100644 --- 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, } ); } From 6a0a6edd65924f3adbefb404f622088469fb649b Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Thu, 15 Nov 2018 15:23:13 +0200 Subject: [PATCH 3/4] Go back to using the "full" size images for the Cover block --- .eslintrc.js | 1 + packages/block-library/src/cover/index.js | 9 +-------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4f4bfa86ffb2ba..a80c6adeb141e9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -181,6 +181,7 @@ module.exports = { }; } ), } ], + 'linebreak-style': 'off', }, overrides: [ { diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index a63f01bfb64e1d..8a8808327ec97b 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import { get } from 'lodash'; /** * WordPress dependencies @@ -197,7 +196,6 @@ export const settings = { return; } let mediaType; - let src; // for media selections originated from a file upload. if ( media.media_type ) { if ( media.media_type === IMAGE_BACKGROUND_TYPE ) { @@ -217,13 +215,8 @@ export const settings = { mediaType = media.type; } - if ( mediaType === IMAGE_BACKGROUND_TYPE ) { - // 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( { - url: src || media.url, + url: media.url, id: media.id, backgroundType: mediaType, } ); From 24444ee010c26ee222766f1737fc30b3eb1b4ca0 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Thu, 15 Nov 2018 15:23:46 +0200 Subject: [PATCH 4/4] (Remove line endings hack...) --- .eslintrc.js | 1 - 1 file changed, 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index a80c6adeb141e9..4f4bfa86ffb2ba 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -181,7 +181,6 @@ module.exports = { }; } ), } ], - 'linebreak-style': 'off', }, overrides: [ {