diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 3dcba55bfc780..0fe26490ea493 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -49,6 +49,17 @@ const editMediaLibrary = ( attributes, setAttributes ) => { editFrame.open( 'gutenberg-gallery' ); }; +// the media library image object contains numerous attributes +// we only need this set to display the image in the library +const slimImageObjects = ( imgs ) => { + const attrSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt' ]; + const newImgs = []; + imgs.forEach( ( img ) => { + newImgs.push( _.pick( img, attrSet ) ); + } ); + return newImgs; +}; + function defaultColumnsNumber( attributes ) { attributes.images = attributes.images || []; return Math.min( 3, attributes.images.length ); @@ -59,14 +70,6 @@ registerBlockType( 'core/gallery', { icon: 'format-gallery', category: 'common', - attributes: { - images: - query( 'div.wp-block-gallery figure.blocks-gallery-image img', { - url: attr( 'src' ), - alt: attr( 'alt' ), - } ) || [], - }, - getEditWrapperProps( attributes ) { const { align } = attributes; if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) { @@ -101,7 +104,7 @@ registerBlockType( 'core/gallery', { ); if ( images.length === 0 ) { - const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } ); + const setMediaUrl = ( imgs ) => setAttributes( { images: slimImageObjects( imgs ) } ); const uploadButtonProps = { isLarge: true }; return [