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 } 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(
+								( image ) => pickRelevantMediaFiles( image )
+							);
 							onChange( block.clientId, {
-								images: images.map( ( image ) => pickRelevantMediaFiles( image ) ),
+								ids: map( imagesAttr, 'id' ),
+								images: imagesAttr,
 							} );
 						},
 						allowedTypes: [ 'image' ],

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.json

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

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

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