Gutenberg Blocks – Cannot retrieve block saved attributes in edit post

The block validation failed because the editor did not parse the attributes from all images (in the saved post content), and it’s because your save function is returning only one .slider-item div containing multiple img tags, like so:

<div class="slider-item">
    <img src="..." data-id="123" />
    <img src="..." data-id="456" />
    ...
</div>

And what should actually be returned is one or more .slider-item divs, each containing just one img tag, like so:

<div class="slider-item">
    <img src="..." data-id="123" />
</div>
<div class="slider-item">
    <img src="..." data-id="456" />
</div>
...

So make sure that your save function returns the correct markup based on your block attribute’s definition. E.g.

save: function( props ) {
    return el(
        'div',
        useBlockProps.save( {
            className: 'slider-items', // note the "itemS"
        } ),
        props.attributes.imgUrl.map( function ( data, i ) {
            return el(
                'div',
                {
                    className: 'slider-item',
                    key: 'slider-item-' + i,
                },
                el( 'img', {
                    src: data.mediaURL,
                    'data-id': data.mediaID,
                }, null )
            ); // end of .slider-item
        } ),
    ); // end of .slider-items
},

Additional Notes

useBlockProps() should be used in the edit function, and useBlockProps.save() in the save function.
When returning an array of elements, each of them should have a unique key.

So in the above example, I used useBlockProps.save() and key.

References

error code: 523