Block Preview is missing columnSpan

[stefanstankovic]

Which Umbraco.Community.BlockPreview version are you using?

5.3.2

Which Umbraco version are you using? For example: 10.4.0 - don't just write v10

17.2.2

Bug summary

The bug started occurring after I upgraded Umbraco from version 17.0.0 to 17.2.2. I compared the JSON with and without the BlockPreview plugin:

• Without the plugin, columnSpan is set to 6 (the default value)
• With the plugin, columnSpan is set to null

This breaks the entire page.

JSON without plugin:

{
    "template": null,
    "isTrashed": false,
    "documentType": {
        "id": "355b5b34-4e35-471e-ad7f-79c4d9abe741",
        "icon": "icon-umb-content color-blue",
        "collection": null
    },
    "id": "65b3be4f-13a6-4b25-905d-5657397ca465",
    "flags": [],
    "values": [
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": null,
            "segment": null,
            "alias": "umbracoNaviHide",
            "value": false
        },
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": "de-AT",
            "segment": null,
            "alias": "noFollow",
            "value": false
        },
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": "en-GB",
            "segment": null,
            "alias": "noFollow",
            "value": false
        },
        {
            "editorAlias": "Umbraco.Slider",
            "culture": null,
            "segment": null,
            "alias": "searchEngineRelativePriority",
            "value": {
                "from": 0.5,
                "to": 0.5
            }
        },
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": null,
            "segment": null,
            "alias": "hideFromXmlSitemap",
            "value": false
        },
        {
            "editorAlias": "Umbraco.BlockGrid",
            "culture": "de-AT",
            "segment": null,
            "alias": "blockGrid",
            "value": {
                "layout": {
                    "Umbraco.BlockGrid": [
                        {
                            "$type": "BlockGridLayoutItem",
                            "columnSpan": 12,
                            "rowSpan": 1,
                            "areas": [
                                {
                                    "key": "9fa0e554-28b2-40a1-9db9-147a2651c3c5",
                                    "items": [
                                        {
                                            "columnSpan": 6,
                                            "rowSpan": 1,
                                            "areas": [],
                                            "contentUdi": null,
                                            "settingsUdi": null,
                                            "contentKey": "8108ffd3-4e09-4803-8a96-796890d10142",
                                            "settingsKey": "b553c43f-61f4-4635-a74d-7ad3b4cb04e3"
                                        }
                                    ]
                                },
                                {
                                    "key": "0828b314-fbf0-482e-a247-98de4a1f837f",
                                    "items": []
                                }
                            ],
                            "contentUdi": null,
                            "settingsUdi": null,
                            "contentKey": "70536abb-82d1-4f87-bad3-f24bcfb4cb0f",
                            "settingsKey": "670e80d7-ee8a-4b8a-a2d9-6be017ea0586"
                        }
                    ]
                },
                "contentData": [
                    {
                        "contentTypeKey": "d6daac1a-fa7f-49be-a900-32cf72eb9711",
                        "key": "70536abb-82d1-4f87-bad3-f24bcfb4cb0f",
                        "values": [
                            {
                                "editorAlias": "Umbraco.BlockGrid",
                                "culture": null,
                                "segment": null,
                                "alias": "backgroundImage",
                                "value": {
                                    "layout": {
                                        "Umbraco.BlockGrid": [
                                            {
                                                "$type": "BlockGridLayoutItem",
                                                "columnSpan": 12,
                                                "rowSpan": 1,
                                                "areas": [],
                                                "contentUdi": null,
                                                "settingsUdi": null,
                                                "contentKey": "e4f44480-d7d2-4672-b33d-88881a9c510e",
                                                "settingsKey": "074cfe2d-ac4f-4184-84ba-e9f3254a498d"
                                            }
                                        ]
                                    },
                                    "contentData": [
                                        {
                                            "contentTypeKey": "94c94f12-fd10-41c9-8d1a-2b920d16b234",
                                            "key": "e4f44480-d7d2-4672-b33d-88881a9c510e",
                                            "values": [
                                                {
                                                    "editorAlias": "Umbraco.MediaPicker3",
                                                    "culture": null,
                                                    "segment": null,
                                                    "alias": "desktopImage",
                                                    "value": [
                                                        {
                                                            "key": "4321fa54-c00b-4d1a-a660-ed39725eb37d",
                                                            "mediaKey": "a88cc278-b726-4640-9c17-0c717464d52b",
                                                            "mediaTypeAlias": "Image",
                                                            "crops": [],
                                                            "focalPoint": null
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ],
                                    "settingsData": [
                                        {
                                            "contentTypeKey": "5fac233a-2ed5-4e67-acd1-918639307ac7",
                                            "key": "074cfe2d-ac4f-4184-84ba-e9f3254a498d",
                                            "values": [
                                                {
                                                    "editorAlias": "Umbraco.TrueFalse",
                                                    "culture": null,
                                                    "segment": null,
                                                    "alias": "disableLazyLoading",
                                                    "value": false
                                                },
                                                {
                                                    "editorAlias": "Umbraco.TrueFalse",
                                                    "culture": null,
                                                    "segment": null,
                                                    "alias": "hide",
                                                    "value": false
                                                }
                                            ]
                                        }
                                    ],
                                    "expose": [
                                        {
                                            "contentKey": "e4f44480-d7d2-4672-b33d-88881a9c510e",
                                            "culture": null,
                                            "segment": null
                                        }
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        "contentTypeKey": "4adc0e53-0824-4cae-9c60-a5f49249f1d3",
                        "key": "8108ffd3-4e09-4803-8a96-796890d10142",
                        "values": [
                            {
                                "editorAlias": "Umbraco.RichText",
                                "culture": null,
                                "segment": null,
                                "alias": "Text",
                                "value": {
                                    "markup": "\u003Cp\u003EEnter any text and style it. You can add headings/titles as well.\u003C/p\u003E",
                                    "blocks": {
                                        "layout": {},
                                        "contentData": [],
                                        "settingsData": [],
                                        "expose": []
                                    }
                                }
                            }
                        ]
                    }
                ],
                "settingsData": [
                    {
                        "contentTypeKey": "e13bde3a-e3c4-477e-9192-15d522530d7c",
                        "key": "670e80d7-ee8a-4b8a-a2d9-6be017ea0586",
                        "values": [
                            {
                                "editorAlias": "Umbraco.TrueFalse",
                                "culture": null,
                                "segment": null,
                                "alias": "hide",
                                "value": false
                            }
                        ]
                    },
                    {
                        "contentTypeKey": "cad0d52e-18f5-4a49-9d3b-02869bfc1035",
                        "key": "b553c43f-61f4-4635-a74d-7ad3b4cb04e3",
                        "values": [
                            {
                                "editorAlias": "Umbraco.TrueFalse",
                                "culture": null,
                                "segment": null,
                                "alias": "hide",
                                "value": false
                            }
                        ]
                    }
                ],
                "expose": [
                    {
                        "contentKey": "70536abb-82d1-4f87-bad3-f24bcfb4cb0f",
                        "culture": null,
                        "segment": null
                    },
                    {
                        "contentKey": "8108ffd3-4e09-4803-8a96-796890d10142",
                        "culture": null,
                        "segment": null
                    }
                ]
            }
        }
    ],
    "variants": [
        {
            "state": "Published",
            "publishDate": "2026-03-25T08:27:57.0093381+00:00",
            "scheduledPublishDate": null,
            "scheduledUnpublishDate": null,
            "id": "00000000-0000-0000-0000-000000000000",
            "flags": [],
            "createDate": "2026-03-25T08:16:58.3767397+00:00",
            "updateDate": "2026-03-25T08:27:57.0093381+00:00",
            "culture": "de-AT",
            "segment": null,
            "name": "Hero Test 6"
        }
    ]
}

JSON with the plugin:

{
    "template": null,
    "isTrashed": false,
    "documentType": {
        "id": "355b5b34-4e35-471e-ad7f-79c4d9abe741",
        "icon": "icon-umb-content color-blue",
        "collection": null
    },
    "id": "65b3be4f-13a6-4b25-905d-5657397ca465",
    "flags": [],
    "values": [
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": null,
            "segment": null,
            "alias": "umbracoNaviHide",
            "value": false
        },
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": "de-AT",
            "segment": null,
            "alias": "noFollow",
            "value": false
        },
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": "en-GB",
            "segment": null,
            "alias": "noFollow",
            "value": false
        },
        {
            "editorAlias": "Umbraco.Slider",
            "culture": null,
            "segment": null,
            "alias": "searchEngineRelativePriority",
            "value": {
                "from": 0.5,
                "to": 0.5
            }
        },
        {
            "editorAlias": "Umbraco.TrueFalse",
            "culture": null,
            "segment": null,
            "alias": "hideFromXmlSitemap",
            "value": false
        },
        {
            "editorAlias": "Umbraco.BlockGrid",
            "culture": "de-AT",
            "segment": null,
            "alias": "blockGrid",
            "value": {
                "layout": {
                    "Umbraco.BlockGrid": [
                        {
                            "$type": "BlockGridLayoutItem",
                            "columnSpan": 12,
                            "rowSpan": 1,
                            "areas": [
                                {
                                    "key": "9fa0e554-28b2-40a1-9db9-147a2651c3c5",
                                    "items": [
                                        {
                                            "columnSpan": null,
                                            "rowSpan": 1,
                                            "areas": [],
                                            "contentUdi": null,
                                            "settingsUdi": null,
                                            "contentKey": "8108ffd3-4e09-4803-8a96-796890d10142",
                                            "settingsKey": "b553c43f-61f4-4635-a74d-7ad3b4cb04e3"
                                        }
                                    ]
                                },
                                {
                                    "key": "0828b314-fbf0-482e-a247-98de4a1f837f",
                                    "items": []
                                }
                            ],
                            "contentUdi": null,
                            "settingsUdi": null,
                            "contentKey": "70536abb-82d1-4f87-bad3-f24bcfb4cb0f",
                            "settingsKey": "670e80d7-ee8a-4b8a-a2d9-6be017ea0586"
                        }
                    ]
                },
                "contentData": [
                    {
                        "contentTypeKey": "d6daac1a-fa7f-49be-a900-32cf72eb9711",
                        "key": "70536abb-82d1-4f87-bad3-f24bcfb4cb0f",
                        "values": [
                            {
                                "editorAlias": "Umbraco.BlockGrid",
                                "culture": null,
                                "segment": null,
                                "alias": "backgroundImage",
                                "value": {
                                    "layout": {
                                        "Umbraco.BlockGrid": [
                                            {
                                                "$type": "BlockGridLayoutItem",
                                                "columnSpan": 12,
                                                "rowSpan": 1,
                                                "areas": [],
                                                "contentUdi": null,
                                                "settingsUdi": null,
                                                "contentKey": "e4f44480-d7d2-4672-b33d-88881a9c510e",
                                                "settingsKey": "074cfe2d-ac4f-4184-84ba-e9f3254a498d"
                                            }
                                        ]
                                    },
                                    "contentData": [
                                        {
                                            "contentTypeKey": "94c94f12-fd10-41c9-8d1a-2b920d16b234",
                                            "key": "e4f44480-d7d2-4672-b33d-88881a9c510e",
                                            "values": [
                                                {
                                                    "editorAlias": "Umbraco.MediaPicker3",
                                                    "culture": null,
                                                    "segment": null,
                                                    "alias": "desktopImage",
                                                    "value": [
                                                        {
                                                            "key": "4321fa54-c00b-4d1a-a660-ed39725eb37d",
                                                            "mediaKey": "a88cc278-b726-4640-9c17-0c717464d52b",
                                                            "mediaTypeAlias": "Image",
                                                            "crops": [],
                                                            "focalPoint": null
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ],
                                    "settingsData": [
                                        {
                                            "contentTypeKey": "5fac233a-2ed5-4e67-acd1-918639307ac7",
                                            "key": "074cfe2d-ac4f-4184-84ba-e9f3254a498d",
                                            "values": [
                                                {
                                                    "editorAlias": "Umbraco.TrueFalse",
                                                    "culture": null,
                                                    "segment": null,
                                                    "alias": "disableLazyLoading",
                                                    "value": false
                                                },
                                                {
                                                    "editorAlias": "Umbraco.TrueFalse",
                                                    "culture": null,
                                                    "segment": null,
                                                    "alias": "hide",
                                                    "value": false
                                                }
                                            ]
                                        }
                                    ],
                                    "expose": [
                                        {
                                            "contentKey": "e4f44480-d7d2-4672-b33d-88881a9c510e",
                                            "culture": null,
                                            "segment": null
                                        }
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        "contentTypeKey": "4adc0e53-0824-4cae-9c60-a5f49249f1d3",
                        "key": "8108ffd3-4e09-4803-8a96-796890d10142",
                        "values": [
                            {
                                "editorAlias": "Umbraco.RichText",
                                "culture": null,
                                "segment": null,
                                "alias": "Text",
                                "value": {
                                    "markup": "\u003Cp\u003EEnter any text and style it. You can add headings/titles as well.\u003C/p\u003E",
                                    "blocks": {
                                        "layout": {},
                                        "contentData": [],
                                        "settingsData": [],
                                        "expose": []
                                    }
                                }
                            }
                        ]
                    }
                ],
                "settingsData": [
                    {
                        "contentTypeKey": "e13bde3a-e3c4-477e-9192-15d522530d7c",
                        "key": "670e80d7-ee8a-4b8a-a2d9-6be017ea0586",
                        "values": [
                            {
                                "editorAlias": "Umbraco.TrueFalse",
                                "culture": null,
                                "segment": null,
                                "alias": "hide",
                                "value": false
                            }
                        ]
                    },
                    {
                        "contentTypeKey": "cad0d52e-18f5-4a49-9d3b-02869bfc1035",
                        "key": "b553c43f-61f4-4635-a74d-7ad3b4cb04e3",
                        "values": [
                            {
                                "editorAlias": "Umbraco.TrueFalse",
                                "culture": null,
                                "segment": null,
                                "alias": "hide",
                                "value": false
                            }
                        ]
                    }
                ],
                "expose": [
                    {
                        "contentKey": "70536abb-82d1-4f87-bad3-f24bcfb4cb0f",
                        "culture": null,
                        "segment": null
                    },
                    {
                        "contentKey": "8108ffd3-4e09-4803-8a96-796890d10142",
                        "culture": null,
                        "segment": null
                    }
                ]
            }
        }
    ],
    "variants": [
        {
            "state": "Published",
            "publishDate": "2026-03-25T08:23:35.4270106+00:00",
            "scheduledPublishDate": null,
            "scheduledUnpublishDate": null,
            "id": "00000000-0000-0000-0000-000000000000",
            "flags": [],
            "createDate": "2026-03-25T08:16:58.3767397+00:00",
            "updateDate": "2026-03-25T08:23:35.4270106+00:00",
            "culture": "de-AT",
            "segment": null,
            "name": "Hero Test 6"
        }
    ]
}

Steps to reproduce

1. Create a page that has BlockGrid.
2. Create a module that has areas (one-column layout or similar)
3. Add a component in one of the areas
4. Publish the page
5. Try to open the page

Rendering the page will fail.

Expected result / actual result

No response

[stefanstankovic]

This issue can be reproduced in this project: Kraftwerk.Web.zip

Username: stefan.stankovic@kraftwerk.co.at
Password: Test1234#123

[mwiseley-wakefly]

I'm seeing this same problem. I tried applying the fix referenced here, but that doesn't change the behavior. I was able to work around it with the attached ContentSavingNotification handler that adds the missing columnSpan attribute if its found missing .

BlockGridColumnSpanFixer.cs