Gallery: Duplicate image IDs into easy-to-parse attribute

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

@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import { filter, pick, get } from 'lodash';
+import { filter, pick, map, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -63,12 +63,28 @@ class GalleryEdit extends Component {
 		this.setImageAttributes = this.setImageAttributes.bind( this );
 		this.addFiles = this.addFiles.bind( this );
 		this.uploadFromFiles = this.uploadFromFiles.bind( this );
+		this.setAttributes = this.setAttributes.bind( this );
 
 		this.state = {
 			selectedImage: null,
 		};
 	}
 
+	setAttributes( attributes ) {
+		if ( attributes.ids ) {
+			throw new Error( 'The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes' );
+		}
+
+		if ( attributes.images ) {
+			attributes = {
+				...attributes,
+				ids: map( attributes.images, 'id' ),
+			};
+		}
+
+		this.props.setAttributes( attributes );
+	}
+
 	onSelectImage( index ) {
 		return () => {
 			if ( this.state.selectedImage !== index ) {
@@ -84,37 +100,38 @@ class GalleryEdit extends Component {
 			const images = filter( this.props.attributes.images, ( img, i ) => index !== i );
 			const { columns } = this.props.attributes;
 			this.setState( { selectedImage: null } );
-			this.props.setAttributes( {
+			this.setAttributes( {
 				images,
 				columns: columns ? Math.min( images.length, columns ) : columns,
 			} );
 		};
 	}
 
 	onSelectImages( images ) {
-		this.props.setAttributes( {
+		this.setAttributes( {
 			images: images.map( ( image ) => pickRelevantMediaFiles( image ) ),
 		} );
 	}
 
 	setLinkTo( value ) {
-		this.props.setAttributes( { linkTo: value } );
+		this.setAttributes( { linkTo: value } );
 	}
 
 	setColumnsNumber( value ) {
-		this.props.setAttributes( { columns: value } );
+		this.setAttributes( { columns: value } );
 	}
 
 	toggleImageCrop() {
-		this.props.setAttributes( { imageCrop: ! this.props.attributes.imageCrop } );
+		this.setAttributes( { imageCrop: ! this.props.attributes.imageCrop } );
 	}
 
 	getImageCropHelp( checked ) {
 		return checked ? __( 'Thumbnails are cropped to align.' ) : __( 'Thumbnails are not cropped.' );
 	}
 
 	setImageAttributes( index, attributes ) {
-		const { attributes: { images }, setAttributes } = this.props;
+		const { attributes: { images } } = this.props;
+		const { setAttributes } = this;
 		if ( ! images[ index ] ) {
 			return;
 		}
@@ -136,7 +153,8 @@ class GalleryEdit extends Component {
 
 	addFiles( files ) {
 		const currentImages = this.props.attributes.images || [];
-		const { noticeOperations, setAttributes } = this.props;
+		const { noticeOperations } = this.props;
+		const { setAttributes } = this;
 		mediaUpload( {
 			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList: files,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every } from 'lodash';
+import { filter, every, map, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -52,6 +52,10 @@ const blockAttributes = {
 			},
 		},
 	},
+	ids: {
+		type: 'array',
+		default: [],
+	},
 	columns: {
 		type: 'number',
 	},
@@ -67,6 +71,16 @@ const blockAttributes = {
 
 export const name = 'core/gallery';
 
+const parseShortcodeIds = ( ids ) => {
+	if ( ! ids ) {
+		return [];
+	}
+
+	return ids.split( ',' ).map( ( id ) => (
+		parseInt( id, 10 )
+	) );
+};
+
 export const settings = {
 	title: __( 'Gallery' ),
 	description: __( 'Display multiple images in a rich gallery.' ),
@@ -89,6 +103,7 @@ export const settings = {
 					if ( validImages.length > 0 ) {
 						return createBlock( 'core/gallery', {
 							images: validImages.map( ( { id, url, alt, caption } ) => ( { id, url, alt, caption } ) ),
+							ids: validImages.map( ( { id } ) => id ),
 						} );
 					}
 					return createBlock( 'core/gallery' );
@@ -101,15 +116,17 @@ export const settings = {
 					images: {
 						type: 'array',
 						shortcode: ( { named: { ids } } ) => {
-							if ( ! ids ) {
-								return [];
-							}
-
-							return ids.split( ',' ).map( ( id ) => ( {
-								id: parseInt( id, 10 ),
+							return parseShortcodeIds( ids ).map( ( id ) => ( {
+								id,
 							} ) );
 						},
 					},
+					ids: {
+						type: 'array',
+						shortcode: ( { named: { ids } } ) => {
+							return parseShortcodeIds( ids );
+						},
+					},
 					columns: {
 						type: 'number',
 						shortcode: ( { named: { columns = '3' } } ) => {
@@ -139,8 +156,12 @@ export const settings = {
 					mediaUpload( {
 						filesList: files,
 						onFileChange: ( images ) => {
+							const imagesAttr = images.map(
+								pickRelevantMediaFiles
+							);
 							onChange( block.clientId, {
-								images: images.map( ( image ) => pickRelevantMediaFiles( image ) ),
+								ids: map( imagesAttr, 'id' ),
+								images: imagesAttr,
 							} );
 						},
 						allowedTypes: [ 'image' ],
@@ -199,6 +220,66 @@ export const settings = {
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			isEligible( { images, ids } ) {
+				return images &&
+					images.length > 0 &&
+					(
+						( ! ids && images ) ||
+						( ids && images && ids.length !== images.length ) ||
+						some( images, ( id, index ) => {
+							if ( ! id && ids[ index ] !== null ) {
+								return true;
+							}
+							return parseInt( id, 10 ) !== ids[ index ];
+						} )
+					);
+			},
+			migrate( attributes ) {
+				return {
+					...attributes,
+					ids: map( attributes.images, ( { id } ) => {
+						if ( ! id ) {
+							return null;
+						}
+						return parseInt( id, 10 );
+					} ),
+				};
+			},
+			save( { attributes } ) {
+				const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
+				return (
+					<ul className={ `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
+						{ images.map( ( image ) => {
+							let href;
+
+							switch ( linkTo ) {
+								case 'media':
+									href = image.url;
+									break;
+								case 'attachment':
+									href = image.link;
+									break;
+							}
+
+							const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
+
+							return (
+								<li key={ image.id || image.url } className="blocks-gallery-item">
+									<figure>
+										{ href ? <a href={ href }>{ img }</a> : img }
+										{ image.caption && image.caption.length > 0 && (
+											<RichText.Content tagName="figcaption" value={ image.caption } />
+										) }
+									</figure>
+								</li>
+							);
+						} ) }
+					</ul>
+				);
+			},
+		},
 		{
 			attributes: blockAttributes,
 			save( { attributes } ) {

post-content.php

@@ -88,7 +88,7 @@
 <p><?php _e( 'Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {"columns":2} -->
+<!-- wp:gallery {"ids":[null,null,null],"columns":2} -->
 <ul class="wp-block-gallery columns-2 is-cropped">
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/n0g6ME5VKC.jpg" alt="" /></figure></li>
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/ZjESfxPI3R.jpg" alt="" /></figure></li>
@@ -116,7 +116,7 @@
 <p><?php _e( 'Sure, the full-wide image can be pretty big. But sometimes the image is worth it.', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {"align":"wide","images":[{"url":"https://cldup.com/_rSwtEeDGD.jpg","alt":""},{"url":"https://cldup.com/L-cC3qX2DN.jpg","alt":""}]} -->
+<!-- wp:gallery {"ids":[null,null],"align":"wide","images":[{"url":"https://cldup.com/_rSwtEeDGD.jpg","alt":""},{"url":"https://cldup.com/L-cC3qX2DN.jpg","alt":""}]} -->
 <ul class="wp-block-gallery alignwide columns-2 is-cropped">
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/_rSwtEeDGD.jpg" alt="" /></figure></li>
 <li class="blocks-gallery-item"><figure><img src="https://cldup.com/L-cC3qX2DN.jpg" alt="" /></figure></li>

test/integration/__snapshots__/blocks-raw-handling.spec.js.snap

@@ -29,7 +29,7 @@ exports[`Blocks raw handling rawHandler should convert HTML post to blocks with
 <h3>Shortcode</h3>
 <!-- /wp:heading -->
 
-<!-- wp:gallery {\\"columns\\":3,\\"linkTo\\":\\"attachment\\"} -->
+<!-- wp:gallery {\\"ids\\":[1],\\"columns\\":3,\\"linkTo\\":\\"attachment\\"} -->
 <ul class=\\"wp-block-gallery columns-3 is-cropped\\"><li class=\\"blocks-gallery-item\\"><figure><img data-id=\\"1\\" class=\\"wp-image-1\\"/></figure></li></ul>
 <!-- /wp:gallery -->"
 `;

test/integration/fixtures/wordpress-out.html

@@ -18,6 +18,6 @@ <h3>More tag</h3>
 <h3>Shortcode</h3>
 <!-- /wp:heading -->
 
-<!-- wp:gallery {"columns":3,"linkTo":"attachment"} -->
+<!-- wp:gallery {"ids":[1],"columns":3,"linkTo":"attachment"} -->
 <ul class="wp-block-gallery columns-3 is-cropped"><li class="blocks-gallery-item"><figure><img data-id="1" class="wp-image-1"/></figure></li></ul>
 <!-- /wp:gallery -->

test/integration/full-content/fixtures/core__gallery.html

@@ -1,4 +1,4 @@
-<!-- wp:core/gallery -->
+<!-- wp:core/gallery {"ids":[null,null]} -->
 <ul class="wp-block-gallery columns-2 is-cropped">
 	<li class="blocks-gallery-item">
 		<figure>

test/integration/full-content/fixtures/core__gallery.json

@@ -16,6 +16,10 @@
                     "caption": ""
                 }
             ],
+            "ids": [
+                null,
+                null
+            ],
             "imageCrop": true,
             "linkTo": "none"
         },

test/integration/full-content/fixtures/core__gallery.parsed.json

@@ -1,7 +1,12 @@
 [
     {
         "blockName": "core/gallery",
-        "attrs": {},
+        "attrs": {
+            "ids": [
+                null,
+                null
+            ]
+        },
         "innerBlocks": [],
         "innerHTML": "\n<ul class=\"wp-block-gallery columns-2 is-cropped\">\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n</ul>\n",
         "innerContent": [

test/integration/full-content/fixtures/core__gallery.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:gallery -->
+<!-- wp:gallery {"ids":[null,null]} -->
 <ul class="wp-block-gallery columns-2 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://google.com/hi.png" alt="title"/></figure></li></ul>
 <!-- /wp:gallery -->

test/integration/full-content/fixtures/core__gallery__columns.html

@@ -1,4 +1,4 @@
-<!-- wp:core/gallery {"columns":1} -->
+<!-- wp:core/gallery {"ids":[null,null],"columns":1} -->
 <ul class="wp-block-gallery columns-1 is-cropped">
 	<li class="blocks-gallery-item">
 		<figure>

test/integration/full-content/fixtures/core__gallery__columns.json

@@ -16,6 +16,10 @@
                     "caption": ""
                 }
             ],
+            "ids": [
+                null,
+                null
+            ],
             "columns": 1,
             "imageCrop": true,
             "linkTo": "none"

test/integration/full-content/fixtures/core__gallery__columns.parsed.json

@@ -2,6 +2,10 @@
     {
         "blockName": "core/gallery",
         "attrs": {
+            "ids": [
+                null,
+                null
+            ],
             "columns": 1
         },
         "innerBlocks": [],

test/integration/full-content/fixtures/core__gallery__columns.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:gallery {"columns":1} -->
+<!-- wp:gallery {"ids":[null,null],"columns":1} -->
 <ul class="wp-block-gallery columns-1 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://google.com/hi.png" alt="title"/></figure></li></ul>
 <!-- /wp:gallery -->