Функция сохранения WP Blocks не соответствует функции редактирования при загрузке редактора

Я разрабатываю блок WP Gutenberg на основе https://github.com/JimSchofield/Guty-Blocks-2, и я столкнулся с проблемой, когда сохраненный контент не соответствует редактору при загрузке, поэтому я вижу ошибку «Этот блок содержит неожиданный или недопустимый контент».

Я попытался заглянуть в консоль браузера, но не могу понять, в чем заключается несоответствие, функции редактирования и сохранения ссылаются на изображения, но они не сохраняются функцией сохранения.

Стоит отметить, что после того, как блок загружен в первый раз, использован и сообщение сохранено, он корректно работает во внешнем интерфейсе. Когда вы возвращаетесь в редактор, он больше не работает.

import './__block__.view.scss';
import './__block__.editor.scss';

const {
    registerBlockType,
    getBlockDefaultClassName
} = wp.blocks;

const { 
    InspectorControls,
    MediaUpload
} = wp.editor;

const {
    Button
} = wp.components;

registerBlockType('__namespace__/__block__', {
    title: '__prettyname__(noCase)',
    icon: '__icon__',
    category: '__category__',

    attributes: {
        imgUrl: {
            type: 'array',
            source: 'children',
            selector: 'img',
        },
    },

    edit({ attributes, className, setAttributes }) {

        //Destructuring the images array attribute
        const {images = []} = attributes;

        // This removes an image from the gallery
        const removeImage = (removeImage) => {
            //filter the images
            const newImages = images.filter( (image) => {
                //If the current image is equal to removeImage the image will be returnd
                if(image.id != removeImage.id) {
                    return image;
                }
            });

            //Saves the new state
            setAttributes({
                images:newImages,
            })
        }

        //Displays the images
        const displayImages = (images) => {
            return (
                //Loops throug the images
                images.map( (image) => {
                    return (
                    <div className="gallery-item-container">
                            <img className='gallery-item' src={image.url} key={ images.id } />
                            <div className='remove-item' onClick={() => removeImage(image)}><span class="dashicons dashicons-trash"></span></div>
                            <div className='caption-text'>{image.caption[0]}</div>
                    </div>
                    )
                })

            )
        }

        //JSX to return
        return (
            <div>
                <MediaUpload
                    onSelect={(media) => {setAttributes({images: [...images, ...media]});}}
                    type="image"
                    multiple={true}
                    value={images}
                    render={({open}) => (
                        <Button className="select-images-button is-button is-default is-large" onClick={open}>
                            Add images
                        </Button>
                    )}
                />
                <br />
                <div class="modal__img">
                    <div class="flexslider">
                        <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
                    </div>
                </div>
            </div>
        );
    },

    save({attributes}) {
        // Destructuring the images array attribute
        const { images = [] } = attributes;

        // Displays the images
        const displayImages = (images) => {
            return (
                images.map( (image,index) => {
                    return (
                            <li><img
                                className='lazy'
                                key={images.id}
                                data-src={image.url}
                                data-slide-no={index}
                                data-caption={image.caption[0]}
                                alt={image.alt}
                                /></li>
                    )
                })
            )
        }

        //JSX to return
        return (
            <div class="modal__img">
                <div class="flexslider">
                    <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
                </div>
            </div>
        );

    },
});

Я ожидал, что блок вернет исходный HTML-код, когда вернется в редактор, но это не работает.