Hello everyone
I am using Umbraco 13 for my website and I want to improve the rendering of the backoffice preview. Currently, I am using the following Nuget: GitHub - rickbutterfield/BlockPreview: Easy to use rich HTML backoffice previews for the Umbraco Block List and Block Grid editors.
About the structure: I am working with a grid layout. The top level consists of sections, which contain blocks with areas. On these sections, I apply wrapper classes like containers, background colors, and so on. Inside these sections are the actual modules like text, buttons, and images.
The problem: In the preview, I can currently only render the lowest-level elements (the individual blocks or modules). As a result, all parent CSS classes (such as those for spacing, containers, or colors) are missing, even though they significantly affect the frontend layout. Because of that, the preview in the backoffice does not match what is shown on the live frontend. Spacing is off, text is too large, etc. Even when I try to use vh, vw, or px values, the preview often looks strange.
At the moment, I work around this by writing separate CSS specifically for the backoffice to fix the most obvious layout issues. However, this leads to duplicated effort and maintenance overhead.
My questions:
- Are there any reliable alternatives to BlockPreview that work better with more complex structures?
- Is there a way to improve the preview rendering without writing separate CSS for the backoffice?
- My goal is to have the preview in the backoffice look exactly the same as what is rendered on the live frontend.
Let me know if anyone has experience or suggestions on how to achieve this.