Fix: Converting an image using an external source to a gallery does n…

…ot work (#16548)
WordPress · Aug 29, 2019 · baf011a · baf011a
1 parent caf467c
commit baf011a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -2,7 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { filter, forEach, map, find, every } from 'lodash';
+import {
+	every,
+	filter,
+	find,
+	forEach,
+	map,
+	some,
+} from 'lodash';
 
 /**
  * WordPress dependencies
@@ -234,14 +241,26 @@ class GalleryEdit extends Component {
 	}
 
 	render() {
-		const { attributes, isSelected, className, noticeUI } = this.props;
-		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
+		const {
+			attributes,
+			className,
+			isSelected,
+			noticeUI,
+		} = this.props;
+		const {
+			align,
+			columns = defaultColumnsNumber( attributes ),
+			imageCrop,
+			images,
+			linkTo,
+		} = attributes;
 
 		const hasImages = !! images.length;
+		const hasImagesWithId = hasImages && some( images, ( { id } ) => id );
 
 		const mediaPlaceholder = (
 			<MediaPlaceholder
-				addToGallery={ hasImages }
+				addToGallery={ hasImagesWithId }
 				isAppender={ hasImages }
 				className={ className }
 				dropZoneUIOnly={ hasImages && ! isSelected }
@@ -254,7 +273,7 @@ class GalleryEdit extends Component {
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				multiple
-				value={ hasImages ? images : undefined }
+				value={ hasImagesWithId ? images : undefined }
 				onError={ this.onUploadError }
 				notices={ hasImages ? undefined : noticeUI }
 			/>

diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js
@@ -36,7 +36,7 @@ const transforms = {
 				// Loop through all the images and check if they have the same align.
 				align = every( attributes, [ 'align', align ] ) ? align : undefined;
 
-				const validImages = filter( attributes, ( { id, url } ) => id && url );
+				const validImages = filter( attributes, ( { url } ) => url );
 
 				return createBlock( 'core/gallery', {
 					images: validImages.map( ( { id, url, alt, caption } ) => ( {

diff --git a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
@@ -91,8 +91,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[]} -->
-<ul class=\\"wp-block-gallery columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null]} -->
+<ul class=\\"wp-block-gallery columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;
 
@@ -127,8 +127,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image__attachment-link into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[]} -->
-<ul class=\\"wp-block-gallery columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null]} -->
+<ul class=\\"wp-block-gallery columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;
 
@@ -155,8 +155,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image__center-caption into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[],\\"align\\":\\"center\\"} -->
-<ul class=\\"wp-block-gallery aligncenter columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null],\\"align\\":\\"center\\"} -->
+<ul class=\\"wp-block-gallery aligncenter columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/><figcaption>Give it a try. Press the \\"really wide\\" button on the image toolbar.</figcaption></figure></li></ul>
 <!-- /wp:gallery -->"
 `;
 
@@ -183,8 +183,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image__custom-link into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[]} -->
-<ul class=\\"wp-block-gallery columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null]} -->
+<ul class=\\"wp-block-gallery columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;
 
@@ -211,8 +211,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image__custom-link-class into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[]} -->
-<ul class=\\"wp-block-gallery columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null]} -->
+<ul class=\\"wp-block-gallery columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;
 
@@ -239,8 +239,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image__custom-link-rel into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[]} -->
-<ul class=\\"wp-block-gallery columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null]} -->
+<ul class=\\"wp-block-gallery columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;
 
@@ -267,8 +267,8 @@ exports[`Block transforms correctly transform block Image in fixture core__image
 `;
 
 exports[`Block transforms correctly transform block Image in fixture core__image__media-link into the Gallery block 1`] = `
-"<!-- wp:gallery {\\"ids\\":[]} -->
-<ul class=\\"wp-block-gallery columns-0 is-cropped\\"></ul>
+"<!-- wp:gallery {\\"ids\\":[null]} -->
+<ul class=\\"wp-block-gallery columns-1 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\\" alt=\\"\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;