[Solved] Style block custom view based on area

[plain lotus]

In custom view of block grid item in backoffice, we can access colSpan and rowSpan . Furthermore we can style based on parent context by setting and attribute or class on layout block and update CSS variables as mentioned here.
https://umbraco.com/blog/deep-dive-block-grid-editor-part-3/

However if I have two columns - left area which span 6 columns and right area which span 6 columns, is there any way to know area context inside the block?
I would like to align content in block when in left area and "flip" the block content when placed in right area.

[craggy ruin]

Could you do it with a combo of first-child/last-child selectors? Something like this:

[data-col-span="6"]:has(+[data-col-span="6"]):first-child { /* left column */ }
[data-col-span="6"]+[data-col-span="6"]:last-child { /* right column */ }

(I have no idea how the markup looks, so your mileage may of course vary...)

[plain lotus]

I could set this in blockgridlayout.css used in Block Grid datatype instance.

/* Left column */
.umb-block-grid__area[slot="left"] {
    --umb-block-grid--areas-context-left: 0;
    --umb-block-grid--areas-context-right: auto;
}

/* Right column */
.umb-block-grid__area[slot="right"] {
    --umb-block-grid--areas-context-left: auto;
    --umb-block-grid--areas-context-right: 0;
}

Then for styling of the specific block I have this:

margin-left: var(--umb-block-grid--areas-context-left, auto);
margin-right: var(--umb-block-grid--areas-context-right, auto);

However I think it mainly need to use the values directly.

It would be great a block also knew about the area name (it does know the column span and row span from area).

[plain lotus]

[Solved] Style block custom view based on area

[tight glade]

Please take a look at Umbootstrap where I have used various techniques to achieve your aims, I should add, with some help from @slender rain :
https://umbootstrap.com/

[vernal adder]

with a couple of alterations you can pass the areaAlias down to the item via the ViewDataDictionary override on partialAsync.

in area.cshtml

 @* @await Html.GetBlockGridItemsHtmlAsync(Model) *@

@await Html.PartialAsync($"{BlockGridTemplateExtensions.DefaultFolder}{BlockGridTemplateExtensions.DefaultItemsTemplate}", Model, new ViewDataDictionary(ViewData) { { "area", Model.Alias }})

replacing the helper extension method.. the helper method is only really adding the default partial name... https://github.com/umbraco/Umbraco-CMS/blob/contrib/src/Umbraco.Web.Common/Extensions/BlockGridTemplateExtensions.cs#L107-L108

then in items.cshtml pass the VDD on again

@await Html.PartialAsync(partialViewName, item, ViewData)

now in your blockgrid component renderer you can access ViewData["area"] giving you the area alias in the component.

oops.. backoffice custom preview was the question not frontend 😉

[plain lotus]

It's a headless project using Delivery API 🙂
We only use the backend to hold data, so we haven't any razor views for the blocks.
The frontend is separated using Nuxt3 and PrimeVue.