Próbowałem zbudować własny niestandardowy blok Gutenberga w galerii, jak pokazano tutaj, aby lepiej zapoznać się ze strukturą bloku. Umieszczenie całego kodu w jednym pliku działa dobrze, ale kiedy próbuję podzielić go na edit.js i save.js, zwraca ten błąd przy próbie dodania do niego obrazów: „Uncaught TypeError: setAttributes is not a function”

Nie udało mi się tego rozwiązać, w czym problem?

atrybuty w block.json

"attributes": {
        "images" : {
            "type": "array" 
        }
},

edytuj.js

/**
 * Retrieves the translation of text.
 *
 * @see 
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see 
 */
import { 
    useBlockProps,
    MediaUpload
 } from '@wordpress/block-editor';

import {
    Button
} from '@wordpress/components';

//import {registerBlockType} from "@wordpress/blocks";
/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see 
 */
import './editor.scss';



/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see 
 *
 * @return {WPElement} Element to render.
 */
export default function Edit(attributes, className, setAttributes) {

    const blockProps = useBlockProps();

    // Getting the images of the array
    const {images = [] } = attributes;

    // to remove image from gallery
    const removeImage = (removeImage) => {
        //filter images 
        const newImages = images.filter( (image) => {
            // if current image is equal to removeImage, image will be returend
            if(image.id != removeImage.id) {
                return image;
            }
        });
        //save new state
        setAttributes({
            images: newImages,
        })
    }

    //Display the images
    const displayImages = (images) => {
        return (
            //Loop through 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 {...blockProps}>
            <div className="gallery-grid">
                {displayImages(images)}
            </div>

            <br/>

            <MediaUpload 
                onSelect={(media) => setAttributes({
                    images: [...images,...media],
                })
                    
                }
                type="image"
                multiple={true}
                gallery={true}
                value={images}
                render={({open}) => (
                    <Button className="select-images-button is-button is-default is-large" onClick={open}>
                        Add images
                    </Button>
                )}
            />
        </div>
        </>
    );
}