使用默认属性时不保存属性 - Gutenberg

问题描述

我正在尝试创建一个动态块，但使用属性来自定义顺序。故意我需要设置默认属性，但是因为我没有保存我的任何属性并传递给我的 PHP 渲染回调。当我不设置它时，一切都很好，但是由于未设置的 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-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

解决方法

对于某些方法，我发现您需要在默认情况下指定所有属性才能保存它们