Gutenberg Block -> Media Upload - Array of different images - reactjs

Question

Someone could help me create array for images inside attributes?
At the moment I did:
attributes: {
Bg_URL: { type: 'string' },
Bg_ID: { type: 'number' },
Bg_ALT: { type: 'string'},
icon_1_URL: { type: 'string' },
icon_1_ID: { type: 'number' },
icon_1_ALT: { type: 'string'},
icon_2_URL: { type: 'string' },
icon_2_ID: { type: 'number' },
icon_2_ALT: { type: 'string'},
icon_3_URL: { type: 'string' },
icon_3_ID: { type: 'number' },
icon_3_ALT: { type: 'string'},
},
Then Update function:
const onSelectImage = (name) => (e) => {
setAttributes({
[name+'_URL']: e.url,
[name+'_ID']: e.id,
[name+'_ALT']: e.alt,
});
};
And MediaUpload:
<MediaUpload
onSelect={onSelectImage('Bg')}
type="image"
value={attributes.Bg_ID}
render={({open}) => (
<figure className={!attributes.Bg_ID ? ' image-button' : ' image-preview'} onClick={open} >
{!attributes.Bg_ID ? __("Upload Image") : <img src={attributes.Bg_URL} />}
</figure>
)}
/>
So ok, I did one function to update the specific image in attributes, but I would like to have images array there, which would store all block images, and from onSelect I could pass name/id/key of that image to store, which I would call
images.key.url
Ideally I would see the same for RichText, where I don't need to define each of it separate, but would have a array "content", and there something like this?
value={ attributes.content.heading }
onChange={ ( content.heading ) => setAttributes( { content.heading } ) }
where .heading don't need to be defined earlier, it is when adding the content.
Have anyone had the same idea and could help to archive that?
Thanks.

Answer 1

I would suggest storing the images in an array attribute. Then you can use the MediaUpload component to create and edit a "gallery".
The onSelectMeida function:
const onSelectMedia = (media) => {
setAttributes({
images: [{
id: media.id,
url: media.url,
alt: media.alt,
}],
});
};
The MediaUpload component:
<MediaUploadCheck>
<MediaUpload
multiple={ true }
gallery={ true }
onSelect={ (media) => onSelectMedia(media) }
allowedTypes={ ['image'] }
accept="image/*"
value={ images.map(item => item.id) }
render={ ({open}) => {
return (
<Fragment>
<Button
isPrimary={ true }
onClick={ (event) => {
event.stopPropagation();
open();
} }
>
{ images.length > 0 ? __('Edit Images', 'pb') : __('Select Images', 'pb') }
</Button>
</Fragment>
);
} }
/>
</MediaUploadCheck>
Then you can render the images using a map:
{ images.length > 0 && images.map(image => {
<img
key={ image.id }
src={ image.url }
alt={ image.alt }
/>
}) }