Attributes doesn't save when using default one - Gutenberg

Question

I'm trying to make a dynamic block but using attributes to customize the order. On purpose i need to set default attributes, but since a did that none of my attributes si saved and passed to my php render callback. When i don't set it, everything is fine but my function with swith between order does'nt work because of the unset attributes.order

const {RichText,MediaUpload,InspectorControls} = wp.editor
const { Button, ButtonGroup,Icon } = wp.components;

registerBlockType('pulse/services',{
    title:'Services',
    category:'widgets',
    supports:{
        html:false,
        align: true,
        align:["full"]
    },
    attributes :{
        orderTxt: { type: 'int', default: 1 },
        orderMedia: { type: 'int', default: 2 },
    },
    edit({className,attributes,setAttributes}){ 
        return (
            <section className="services">
                <div className="grid">
                    { section_service_txt(attributes,setAttributes) }
                    { section_service_media(attributes,setAttributes) }
                </div>
            </section>
        )
    },
    save(props){
        console.log(props.attributes)
        return props
    }
})


 
function section_service_txt(attributes,setAttributes){
    

    return(
        <div className="section_services txt_container" style={{order:attributes.orderTxt}}>
            <ButtonGroup>
                <Button variant="primary" onClick={()=>{moveBackward(attributes,setAttributes)}}><Icon icon="arrow-left-alt2" /></Button>
                <Button variant="primary" onClick={()=>{moveForward(attributes,setAttributes)}}><Icon icon="arrow-right-alt2" /></Button>
            </ButtonGroup>
            <div className="txt_container">
                <RichText 
                    tagName="h4" 
                    placeholder="votre titre"
                    value={attributes.title}    
                    onChange={title => setAttributes({title})}
                />
                <RichText 
                    tagName="p" 
                    placeholder="votre description"
                    value={attributes.desc} 
                    onChange={desc => setAttributes({desc})}
                />
                <RichText 
                    tagName="ul"
                    multiline= 'li'
                    placeholder="votre enumération"
                    value={attributes.ul}   
                    onChange={ul => setAttributes({ul})}
                />
            </div>
        </div>
    )


}
function section_service_media(attributes,setAttributes){
    
    return(
        <div className="section_services media_container" style={{order:attributes.orderMedia}}>
            <ButtonGroup>
                <Button variant="primary" onClick={()=>{moveBackward(attributes,setAttributes)}}><Icon icon="arrow-left-alt2" /></Button>
                <Button variant="primary" onClick={()=>{moveForward(attributes,setAttributes)}}><Icon icon="arrow-right-alt2" /></Button>
            </ButtonGroup>
            {
                attributes && attributes.media && attributes.media.includes("video") ?
                <video muted autoPlay loop>
                    <source src={attributes.mediaUrl} type={attributes.media} />
                        Your browser does not support the video tag.
                </video>
                :<img src={attributes.mediaUrl} alt="" />
            }
            <MediaUpload
                type="image"
                onSelect={ image =>(
                    image.mime.includes("video")?setAttributes({media:image.mime,mediaUrl:image.url}):setAttributes({media:image.mime,mediaUrl:image.sizes.full.url})
                )}
                render = {({open}) =>(
                    <button className={"btn btn--primary text--m"} onClick={open}>Choisir un media</button>
                )}
            />
        </div>
    )
}

function moveForward(attributes,setAttributes){
    if(attributes.orderMedia===2){
        setAttributes({orderMedia:1})
        setAttributes({orderTxt:2})
    }else if(attributes.orderTxt===2){
        setAttributes({orderTxt:1})
        setAttributes({orderMedia:2})
    }

}

function moveBackward(attributes,setAttributes){
    if(attributes.orderMedia===1){
        setAttributes({orderMedia:2})
        setAttributes({orderTxt:1})

    }else if(attributes.orderTxt===1){
        setAttributes({orderTxt:2})
        setAttributes({orderMedia:1})

    }
}````

If someone can help, it would be a pleasure thanks you very much

Answer 1

For some how, I just find that you need to specify all attributes on default to have them saved