From db24ef67feb4f015d47812611c1674775a975788 Mon Sep 17 00:00:00 2001 From: mmtr Date: Mon, 18 Nov 2019 17:03:49 +0100 Subject: [PATCH 1/8] Gallery block: Add images size selector --- packages/block-library/src/gallery/block.json | 4 + packages/block-library/src/gallery/edit.js | 76 +++++++++++++++++-- packages/block-library/src/gallery/shared.js | 4 +- 3 files changed, 76 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 342aafd4b2c490..9bd97dc49fb555 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -60,6 +60,10 @@ "linkTo": { "type": "string", "default": "none" + }, + "sizeSlug": { + "type": "string", + "default": "large" } } } diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index bb4cdb7d2576f4..655f9359585d84 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -6,7 +6,10 @@ import { filter, find, forEach, + get, + isEmpty, map, + reduce, some, } from 'lodash'; @@ -58,7 +61,7 @@ const MOBILE_CONTROL_PROPS = Platform.select( { native: { separatorType: 'fullWidth' }, } ); -class GalleryEdit extends Component { +export class GalleryEdit extends Component { constructor() { super( ...arguments ); @@ -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,25 @@ 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 ) => { + 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 +298,7 @@ class GalleryEdit extends Component { imageCrop, images, linkTo, + sizeSlug, } = attributes; const hasImages = !! images.length; @@ -304,6 +329,9 @@ class GalleryEdit extends Component { if ( ! hasImages ) { return mediaPlaceholder; } + + const imageSizeOptions = this.getImagesSizeOptions(); + return ( <> @@ -331,6 +359,14 @@ class GalleryEdit extends Component { onChange={ this.setLinkTo } options={ linkOptions } /> + { hasImages && ! isEmpty( imageSizeOptions ) && ( + + ) } { noticeUI } @@ -350,10 +386,38 @@ class GalleryEdit extends Component { } } export default compose( [ - withSelect( ( select ) => { + withSelect( ( select, { attributes: { ids } } ) => { + const { getMedia } = select( 'core' ); const { getSettings } = select( 'core/block-editor' ); - const { mediaUpload } = getSettings(); - return { mediaUpload }; + const { + imageSizes, + mediaUpload, + } = getSettings(); + + const resizedImages = reduce( + ids, + ( currentResizedImages, id ) => { + 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' } ), diff --git a/packages/block-library/src/gallery/shared.js b/packages/block-library/src/gallery/shared.js index 7d40f3b90d62d3..3a16b4744b4401 100644 --- a/packages/block-library/src/gallery/shared.js +++ b/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; From b1bbe13e44fbd0d2b99809dc6ad3fb004b05c6e0 Mon Sep 17 00:00:00 2001 From: mmtr Date: Tue, 19 Nov 2019 11:05:56 +0100 Subject: [PATCH 2/8] Ignore images that are just URLs --- packages/block-library/src/gallery/edit.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 655f9359585d84..b88b974a1b50a3 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -61,7 +61,7 @@ const MOBILE_CONTROL_PROPS = Platform.select( { native: { separatorType: 'fullWidth' }, } ); -export class GalleryEdit extends Component { +class GalleryEdit extends Component { constructor() { super( ...arguments ); @@ -248,6 +248,9 @@ export class GalleryEdit extends Component { 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, From e1dea570a2db78a6e04d09c04e288bf0f547a203 Mon Sep 17 00:00:00 2001 From: mmtr Date: Tue, 19 Nov 2019 11:06:17 +0100 Subject: [PATCH 3/8] Update fixtures --- .../e2e-tests/fixtures/blocks/core__gallery-with-caption.json | 3 ++- packages/e2e-tests/fixtures/blocks/core__gallery.json | 3 ++- packages/e2e-tests/fixtures/blocks/core__gallery__columns.json | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.json b/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.json index 2b3e74047f7c8b..a071065d578d92 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.json +++ b/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": "
\n\t
    \n\t\t
  • \n\t\t\t
    \n\t\t\t\t\"title\"\n\t\t\t
    \n\t\t
    • \n\t\t
  • \n\t\t\t
    \n\t\t\t\t\"title\"\n\t\t\t
    \n\t\t
    • \n\t
\n\t
Gallery caption.
\n
" diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery.json b/packages/e2e-tests/fixtures/blocks/core__gallery.json index 0857eacd1afd5c..5c6b4c3302a1b5 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery.json +++ b/packages/e2e-tests/fixtures/blocks/core__gallery.json @@ -22,7 +22,8 @@ ], "caption": "", "imageCrop": true, - "linkTo": "none" + "linkTo": "none", + "sizeSlug": "large" }, "innerBlocks": [], "originalContent": "
\n\t
    \n\t\t
  • \n\t\t\t
    \n\t\t\t\t\"title\"\n\t\t\t
    \n\t\t
    • \n\t\t
  • \n\t\t\t
    \n\t\t\t\t\"title\"\n\t\t\t
    \n\t\t
    • \n\t
\n
" diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__columns.json b/packages/e2e-tests/fixtures/blocks/core__gallery__columns.json index 95eec8479de3be..8f5aa53d436b42 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery__columns.json +++ b/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": "
\n\t
    \n\t\t
  • \n\t\t\t
    \n\t\t\t\t\"title\"\n\t\t\t
    \n\t\t
    • \n\t\t
  • \n\t\t\t
    \n\t\t\t\t\"title\"\n\t\t\t
    \n\t\t
    • \n\t
\n
" From f2dfc7919b6d50dd161c4b086bd2893bb6542f18 Mon Sep 17 00:00:00 2001 From: mmtr Date: Tue, 19 Nov 2019 12:45:20 +0100 Subject: [PATCH 4/8] Fix transformations --- packages/block-library/src/gallery/transforms.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js index 8e42a109ee4b63..d0c8c57240e2da 100644 --- a/packages/block-library/src/gallery/transforms.js +++ b/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,7 +104,7 @@ 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, @@ -110,6 +112,7 @@ const transforms = { alt, caption, align, + sizeSlug, } ) ); } return createBlock( 'core/image', { align } ); From 5bcf9e1531930a201cef7bc240a93711214e6d96 Mon Sep 17 00:00:00 2001 From: mmtr Date: Tue, 19 Nov 2019 14:01:03 +0100 Subject: [PATCH 5/8] Update e2e snapshots --- .../experimental/__snapshots__/block-transforms.test.js.snap | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/e2e-tests/specs/experimental/__snapshots__/block-transforms.test.js.snap diff --git a/packages/e2e-tests/specs/experimental/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/experimental/__snapshots__/block-transforms.test.js.snap new file mode 100644 index 00000000000000..e69de29bb2d1d6 From 2519cdcd08a87cc655cdcfa7cb12b78710f3e2f0 Mon Sep 17 00:00:00 2001 From: mmtr Date: Fri, 29 Nov 2019 13:56:50 +0100 Subject: [PATCH 6/8] Remove snapshot --- .../experimental/__snapshots__/block-transforms.test.js.snap | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 packages/e2e-tests/specs/experimental/__snapshots__/block-transforms.test.js.snap diff --git a/packages/e2e-tests/specs/experimental/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/experimental/__snapshots__/block-transforms.test.js.snap deleted file mode 100644 index e69de29bb2d1d6..00000000000000 From 4a43b08f06482a5ad7e002dfbaff7ab47d3911ef Mon Sep 17 00:00:00 2001 From: mmtr Date: Fri, 29 Nov 2019 15:21:32 +0100 Subject: [PATCH 7/8] Ignore external images --- packages/block-library/src/gallery/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index b88b974a1b50a3..78eb720db40128 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -400,6 +400,9 @@ export default compose( [ const 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' ] ); From 3c6f371520364b64aad48d86eab29da4caf52dfc Mon Sep 17 00:00:00 2001 From: mmtr Date: Fri, 6 Dec 2019 14:01:36 +0100 Subject: [PATCH 8/8] Prevent media requests if block is not selected --- packages/block-library/src/gallery/edit.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 78eb720db40128..e81c41e564967e 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -389,7 +389,7 @@ class GalleryEdit extends Component { } } export default compose( [ - withSelect( ( select, { attributes: { ids } } ) => { + withSelect( ( select, { attributes: { ids }, isSelected } ) => { const { getMedia } = select( 'core' ); const { getSettings } = select( 'core/block-editor' ); const { @@ -397,9 +397,10 @@ export default compose( [ mediaUpload, } = getSettings(); - const resizedImages = reduce( - ids, - ( currentResizedImages, id ) => { + let resizedImages = {}; + + if ( isSelected ) { + resizedImages = reduce( ids, ( currentResizedImages, id ) => { if ( ! id ) { return currentResizedImages; } @@ -416,8 +417,8 @@ export default compose( [ ...currentResizedImages, [ parseInt( id, 10 ) ]: sizes, }; - }, - {} ); + }, {} ); + } return { imageSizes,