Umbraco Block Grid V17 can't get it to render custom settings

Questions
1

Hi,

I am using BlockPreview

With the new back office dose it use

default.cshtml
area.cshtml
areas.cshtml
items.cshtml

to render the block grid in the back office:

We have a site that allows a customer to change the block color in V13, we are trying to get this to work in V17 and it not displaying the color in the back office.

Do I need to write a custom plugin to do this for the back office.

It rendering correct on the frontend!

2

Hi @darrenhunterEmerald

It’s all done with Typescript, Lit and Web Components in the new backoffice.

See:

Justin

3

Hi Thanks for that,

Would I have to write my own Column renderer as I am trying to do this:

1
11618×709 34 KB

2
21622×753 45.6 KB

So when you click on the color, it sets the col container to the selected color.

4

Just a thought.. but it’s not just your custom css that you haven’t made available to block preview in the backoffice?

5

Hi @darrenhunterEmerald

Sorry, I missed that you mentioned Block Preview - although it does not change my original answer.

I asked AI and got this response:

You don’t need a custom column renderer. The columns and areas are Umbraco’s own components now, you can’t get at them from a Razor view. The colour has to come from inside your block and fill the space.

Worth ruling out first: default.cshtml, areas.cshtml and items.cshtml are frontend only, BlockPreview doesn’t use them. It renders one partial per element alias from /Views/Partials/blockgrid/Components/. If your colour logic is in the wrapper views, the preview won’t see it.

If it is in the block partial and the frontend is fine, it’s probably just CSS. The preview renders in isolation, so your stylesheet needs adding:

"BlockPreview": {
  "BlockGrid": {
    "Enabled": true,
    "Stylesheets": [ "/css/blocks.css" ]
  }
}

Test it by setting the background inline in the partial. If that works it’s the stylesheet, if not the settings aren’t getting through. Check you’re on v5.x too, that’s the v17 one.

Native alternative is a Block Custom View. You get settings straight on the component, then :host { display: block; height: 100%; } to fill the column.

Justin