Rendering Issue

[AaronSadlerUK]

Which Umbraco.Community.BlockPreview version are you using?

5.0.0-rc1

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

17.0.0-rc1

Bug summary

On the front end the rendering works correctly.

Bootstrap uses 12 columns, and each nested item is also split into 12 columns, it does this all the way down.

From my crude drawing you can see this here:

But in the backoffice it is wrapping:

(The column with the error should be to the left of the Property Taxation Specialists)

How can I fix the rendering in the backoffice?

Steps to reproduce

See above

Expected result / actual result

No response

[AaronSadlerUK]

@rickbutterfield any luck with fixing the nesting rendering issues?

[rickbutterfield]

@AaronSadlerUK please can you try the final release of v5 and let me know if this is still an issue?

[AaronSadlerUK]

@rickbutterfield Yes still an issue, nesting seems to break.

Want a call so I can demo?

[skttl]

@AaronSadlerUK can you reliably reproduce this?

I've seen that sometimes it doesn't generate the <link> tag for the stylesheet, but I can't reliably reproduce. I think it might happen if the rendering starts before the stylesheet has been resolved. In which case this._styleElement is undefined (it's being set here: https://github.com/rickbutterfield/BlockPreview/blob/v5/main/src/Umbraco.Community.BlockPreview.UI/src/blockEditor/block-list-preview.custom-view.element.ts#L167)

Not sure if this is the same issue. Can you verify that there is a link element next to the "Edit block" link?

[vivek-ayer-cw]

@skttl Did you get to the bottom of the issue where it doesn't generate the <link> tag for the stylesheet sometimes?

[vivek-ayer-cw]

@rickbutterfield I think the issue is that in block-list-preview.custom-view.element.ts Line 56 _styleElements is declared as a plain class property but it needs the @State() decorator to trigger Lit re-render when assigned in the case where _htmlMarkup is set first and the component is already rendered without stylesheets, so Lit can update the DOM.

https://github.com/rickbutterfield/BlockPreview/blob/v5/main/src/Umbraco.Community.BlockPreview.UI/src/blockEditor/block-list-preview.custom-view.element.ts#L56

I can raise a PR for it if you agree.