古腾堡数组默认导致块验证错误

Question

我正在为我的客户创建一个标签块 我使用属性类型数组 它完全可以很好地保存 但是在保存并刷新页面后（在管理员中） 它导致块验证错误 简而言之，它只是说我们保存生成默认值，但帖子正文是您保存的内容

代码是这样的：

tabs:{
        type:"array",
        default:[
            {
                id:0,
                tabTitle:"Lorem ipsum dolor sit amet0",
                tabContent:{
                    title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor",
                    iconText:[
                        {
                            text:"Lorem ipsum dolor sit1",
                        },
                        {
                            text:"Lorem ipsum dolor sit2",
                        },
                        {
                            text:"Lorem ipsum dolor sit3",
                        },
                    ]
                },
                tabImage:{
                    nbeDefault: "/two-column-option-2-tab-img.jpg"
                },
                shapeColor:"#00A9E0",
                active:true
            },
            {
                id:1,
                tabTitle:"Lorem ipsum dolor sit amet1",
                tabContent:{
                    title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor",
                },
                tabImage:{
                    nbeDefault: "/two-column-option-2-tab-img.jpg"
                },
                shapeColor:"#00A9E0",
                active:true
            },//this item will repeat 4 time
},

这是set函数之一，我的大部分set函数都是这样的

    const setTabShapeColor=(value,id)=>{
        console.log(value)
        let currentTabs=attributes.tabs;
        currentTabs[id].shapeColor=value.hex;
        setAttributes({tabs: currentTabs});
    }

Answer 1

我发现的解决方案很糟糕，但它完成了我想要的工作 我从属性中删除了属性的默认值，它看起来像这样：

attributes: {
    title: {
        type: "string",
        source: "html",
        selector: "h2",
        default: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
    },
    tabs:{
        type:"array",
    },

而是在 eddit 函数上设置默认值 像这样：

if(!tabs){
        let defaultTabs =[
            {
                id:0,
                tabTitle:"Lorem ipsum dolor sit amet0",
                tabContent:{
                    title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor",
                    iconText:[
                        {
                            text:"Lorem ipsum dolor sit1",
                        },
                        {
                            text:"Lorem ipsum dolor sit2",
                        },
                        {
                            text:"Lorem ipsum dolor sit3",
                        },
                    ]
                },
                tabImage:{
                    nbeDefault: "/two-column-option-2-tab-img.jpg"
                },
                shapeColor:"#00A9E0",
                active:true
            },
            {
                id:1,
                tabTitle:"Lorem ipsum dolor sit amet1",
                tabContent:{
                    title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor",
                },
                tabImage:{
                    nbeDefault: "/two-column-option-2-tab-img.jpg"
                },
                shapeColor:"#00A9E0",
                active:true
            },
            {
                id:2,
                tabTitle:"Lorem ipsum dolor sit amet2",
                tabContent:{
                    title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor",
                    iconText:[
                        {
                            text:"Lorem ipsum dolor sit1",
                        },
                        {
                            text:"Lorem ipsum dolor sit2",
                        },
                        {
                            text:"Lorem ipsum dolor sit3",
                        },
                    ]
                },
                tabImage:{
                    nbeDefault: "/videoplayback.mp4"
                },
                shapeColor:"#00A9E0",
                active:true,
            },
            {
                id:3,
                tabTitle:"Lorem ipsum dolor sit amet3",
                tabContent:{
                    title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor",
                    iconText:[
                        {
                            text:"Lorem ipsum dolor sit1",
                        },
                        {
                            text:"Lorem ipsum dolor sit2",
                        },
                        {
                            text:"Lorem ipsum dolor sit3",
                        },
                    ]
                },
                tabImage:{
                    nbeDefault: "/two-column-option-2-tab-img.jpg"
                },
                shapeColor:"#00A9E0",
                active:true,
            },
        ];
        setAttributes({tabs: defaultTabs});
    }

以及我想在任何地方显示我的标签，无论是在 eddit 上还是在保存 我检查了它是否属实或具有这样的价值

{
tabs?tabs.map((y)=>{.....}:""
}