Block Grid settings for areas

[markusjoha (Markus Johansson)]

I’m researching how to approach a migration of a site that is using the legacy Grid over to using the Block Grid Editor.

The legacy grid has the concept of rows, columns/cells, and controls and I’m trying to see if there would be a way to replicate this with the Block Grid Editor.

My initial idea was to create Blocks to represent the row configuration, which would be:

• 100
• 50/50
• 33/33/33

Then, add Areas to these blocks so that the areas act as columns/cells. This would work but I’m missing the “Cell configuration” as there are no way to add settings to an Area.

This is my current approach:

Anyone that have made a similar migration where cell settings were used, how did you approach it? Or have anyone performed a similar migration with a totally different approach?

All the best!

[Amalie-Wowern]

Hi @markusjoha

I dont have a solution.
I just upgraded a site and migrated the legacy grid and is looking into the best configuration.

I hope that someone comes up with a good approach

[markusjoha (Markus Johansson)]

Hi @Amalie-Wowern!

Nice to hear that I’m not alone

I’ve been thinking about solving it like in the example below by wrapping blocks in a “style-container” that could hold these kinds of settings. It would probably work if this is considered an edge-case but not optimal for situations where most of the areas need settings.

[deanleigh]

Hi all,
not being able to add settings to an area has been frustrating for me too.
However, in UmBootstrap I have templates for Layouts and Features that help make things easier and I think should help with the issues you have.
Also using CSS Utility classes in the area aliases is something I use all the time.

Umbootstrap

[BillyDigi]

Maybe try something like my setup:

Add ‘container’ block as root elmenets.
With possible background color settings.

Add ‘column’ blocks. I have 12 column blocks like bootstrap.
Columns blocks can have their own settings.

Only allow column blocks in container blocks.

Add other blocks to your column bocks (text block, image block, …)

[mistyn8 (Mike Chambers)]

We went with a column settings on the row approach

override the default partials..

 @* @await Html.GetBlockGridItemAreaHtmlAsync(area) *@        
        <partial name="blockgrid/area" model="area" view-data='Html.BlocGridSettings(Model.Settings, area.Alias)' />

with a bit of by convention for prop names (areaAliases).. passes the colsettings down..
var classes = element?.Value<string>($"{alias}Classes") ?? string.Empty;

Not ideal, would be much nicer to have settings on areas

[markusjoha (Markus Johansson)]

Interesting approach @BillyDigi ! Thanks a lot for sharing it!

I have a couple of questions if you don’t mind

1. Does this mean that the workflow for editors looks something like this?

• Add new row
• Add X number of columns
• Add blocks to the columns

2. Does this mean that the editor have full freedom to create any size of blocks or can it be restricted?

3. Do you have the same kind of settings/possibilities for all types of column?

[markusjoha (Markus Johansson)]

Thanks @mistyn8!

We’ve done something similar for one website, this one only had two columns but now I’m looking at a website with a 4 column layout so the “tabs-on-row”-approach kind of felt clumbsy - but would indeed work.

[BillyDigi]

@markusjoha

1. That is idd the correct workflow
2. It can be restricted.
3. You can use the same or different settings per column type.

I setup my columns like bootstrap. So i have 12 column element types.
Each column can have different blocks and settings.

As example you can see the difference between my 12 width column and 2 width column (they have the same settings, but different allowed block types:

12 width:

2 width:

[deanleigh]

@markusjoha

I’ve been thinking about solving it like in the example below by wrapping blocks in a “style-container” that could hold these kinds of settings. It would probably work if this is considered an edge-case but not optimal for situations where most of the areas need settings.

I pass all layout blocks to a _Layouts Razor template and feature blocks to a _Features Razor Template with lots of settings and properties on them.

It’s fairly easy to pass props around between items and areas.

Again please take a look at UmBootstrap, it’s why I made it to help with these kind of issues.

[markusjoha (Markus Johansson)]

Thanks @deanleigh =D I’m mainly looking at this to migrate a site that have configuration on the cell level so I need a way to replicate that using the block grid. I’ll have a look at UmBootstrap. Cheers!

[markusjoha (Markus Johansson)]

@BillyDigi Thanks for sharing some more insights and screenshots! It’s indeed a interesting approach - I’ll have to play around with something similar to see how it feel. Cheers!

[deanleigh]

I also use a ‘hack’ by putting utility classes in the area aliases.
This has proved very efficient with most CSS frameworks.

[mistyn8 (Mike Chambers)]

I remembered there was some talk in a discussion.. around this topic…
Feedback on Block Grid Editor proposal · umbraco/Umbraco-CMS · Discussion #12578 · GitHub

[steve-crook-wtg (Steve Crook)]

Hi @markusjoha

I started with the approach of wrapping blocks in a container, but requiring editors to add an extra container block was adding too much complexity.

So now I’ve got an Area Settings block type, which has a settings model and an empty content model. The Area Settings block can be added to any area. The area template reads the settings from the first Area Settings block in the area, if one is present.

It is possible to add multiple Area Settings blocks to an area - I don’t think there’s a way to prevent that - but only the first one will be used.

I contributed this to uSync Migrations (along with some other stuff in the same PR), so that’s how area settings are migrated there now (previously they weren’t migrated at all).