Improve performance of the gallery block, by removing unnecessary requests.

blocks/api/raw-handling/shortcode-converter.js

@@ -58,18 +58,22 @@ function segmentHTMLToShortcodeBlock( HTML, lastIndex = 0 ) {
 			( schema ) => schema.shortcode( match.shortcode.attrs, match ),
 		);
 
-		const block = createBlock(
-			transformation.blockName,
-			getBlockAttributes(
-				{
-					...getBlockType( transformation.blockName ),
-					attributes: transformation.attributes,
-				},
-				match.shortcode.content,
-				attributes,
-			)
+		const blockAttributes = getBlockAttributes(
+			{
+				...getBlockType( transformation.blockName ),
+				attributes: transformation.attributes,
+			},
+			match.shortcode.content,
+			attributes,
 		);
 
+		const block = transformation.transform ?
+			transformation.transform( blockAttributes ) :
+			createBlock(
+				transformation.blockName,
+				blockAttributes
+			);
+
 		return [
 			beforeHTML,
 			block,

core-blocks/gallery/gallery-image.js

@@ -10,7 +10,6 @@ import { Component } from '@wordpress/element';
 import { IconButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { keycodes } from '@wordpress/utils';
-import { withSelect } from '@wordpress/data';
 import { RichText } from '@wordpress/editor';
 
 /**
@@ -72,14 +71,7 @@ class GalleryImage extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { isSelected, image, url } = this.props;
-		if ( image && ! url ) {
-			this.props.setAttributes( {
-				url: image.source_url,
-				alt: image.alt_text,
-			} );
-		}
-
+		const { isSelected } = this.props;
 		// unselect the caption so when the user selects other image and comeback
 		// the caption is not immediately selected
 		if ( this.state.captionSelected && ! isSelected && prevProps.isSelected ) {
@@ -145,11 +137,4 @@ class GalleryImage extends Component {
 	}
 }
 
-export default withSelect( ( select, ownProps ) => {
-	const { getMedia } = select( 'core' );
-	const { id } = ownProps;
-
-	return {
-		image: id ? getMedia( id ) : null,
-	};
-} )( GalleryImage );
+export default GalleryImage;

core-blocks/gallery/index.js

@@ -1,14 +1,15 @@
 /**
  * External dependencies
  */
-import { filter, every } from 'lodash';
+import { compact, every, filter, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { RichText, editorMediaUpload } from '@wordpress/editor';
+import { dispatch, select, subscribe } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -123,6 +124,49 @@ export const settings = {
 						},
 					},
 				},
+				transform( attributes ) {
+					const block = createBlock( 'core/gallery' );
+					if ( attributes.images && attributes.images.length > 0 ) {
+						const { getMedia } = select( 'core' );
+
+						const getAllImages = () => map( attributes.images, ( { id } ) => {
+							return getMedia( id );
+						} );
+
+						const convertApiImageToAttribute = ( image ) => {
+							if ( ! image ) {
+								return image;
+							}
+							return {
+								alt: image.alt_text,
+								caption: image.caption.rendered,
+								id: image.id,
+								url: image.source_url,
+							};
+						};
+
+						//trigger resolver for all images
+						getAllImages();
+						// subcribe and wait until all images were requested
+						const unsubscribe = subscribe( () => {
+							const images = getAllImages();
+							const allImagesRequested = every(
+								images,
+								( image ) => {
+									return image !== undefined;
+								}
+							);
+							if ( allImagesRequested ) {
+								unsubscribe();
+								// update the block with the images we requested.
+								dispatch( 'core/editor' ).updateBlockAttributes( block.uid, {
+									images: compact( map( images, convertApiImageToAttribute ) ),
+								} );
+							}
+						} );
+					}
+					return block;
+				},
 			},
 			{
 				type: 'files',

editor/components/block-list/block.js

@@ -660,9 +660,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 		},
 		onReplace( blocks ) {
 			const { layout } = ownProps;
-			blocks = castArray( blocks ).map( ( block ) => (
-				cloneBlock( block, { layout } )
-			) );
+			blocks = castArray( blocks ).map( ( block ) => ( {
+				...block,
+				layout,
+			} ) );
 			replaceBlocks( [ ownProps.uid ], blocks );
 		},
 		onMetaChange( meta ) {