OK that works nicely and they drag between the areas nicely as well 
So thanks Rick !!
Suggestion
It is a shame the JSON for the layout property does not include the alias that is set in the backoffice when configuring the areas, as it would be nicer/easier/friendlier to get an area by its alias as opposed to a GUID/Key.
JSON of Layout property
{
"$type": "BlockGridLayoutItem",
"columnSpan": 12,
"rowSpan": 1,
"areas": [
{
"key": "69af0eda-a73d-4feb-9512-465f4c66e21e",
"items": [
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "85f597b8-4434-4aee-8380-cc46db262696",
"settingsKey": null
},
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "387f89db-629d-4b40-8bbd-adc1fc7eaae9",
"settingsKey": null
},
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "93d3ec2f-dad6-406e-b12a-bd25012ea19a",
"settingsKey": null
},
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "a27a3b15-5e46-4a7f-b558-a429d260f6e4",
"settingsKey": null
}
]
},
{
"key": "24e58942-c5df-4c02-894f-7f94f55f2e30",
"items": [
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "dfc271a5-7b0a-4a2d-9506-27f8a1ab72c9",
"settingsKey": null
},
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "dc238d32-cfc7-4a00-b43d-4a1ade8ed0d9",
"settingsKey": null
}
]
},
{
"key": "2f294f12-d8c3-434a-87b3-36f897093976",
"items": [
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "c516e473-67a3-4c11-91c3-5fbe2c485579",
"settingsKey": null
},
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "f18bef25-b631-46d1-afa8-75a27382f9d7",
"settingsKey": null
}
]
},
{
"key": "99d95040-279f-4dcc-9f9c-03b74dec2037",
"items": [
{
"columnSpan": 3,
"rowSpan": 1,
"areas": [],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "94f1c69a-c1ae-4c36-af5b-fd39d5c370a7",
"settingsKey": null
}
]
}
],
"contentUdi": null,
"settingsUdi": null,
"contentKey": "84d9cf67-01d7-4e62-88e5-4feed0477c94",
"settingsKey": null
}
Solution for now
import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { type UmbBlockDataType } from '@umbraco-cms/backoffice/block';
import { type UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
import type { UmbBlockEditorCustomViewConfiguration, UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
import { commonStyles } from './common-styles';
@customElement('footer-layout-block-custom-view')
export class FooterLayoutBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {
@property({ attribute: false })
content?: UmbBlockDataType & {
image: Array<{ mediaKey: string }>;
}
@property({ attribute: false })
label?: string;
@property({ attribute: false })
settings?: UmbBlockDataType;
@property({ attribute: false })
config?: UmbBlockEditorCustomViewConfiguration;
@property({ attribute: false })
layout?: UmbBlockGridLayoutModel;
constructor() {
super();
}
render() {
return html`
<fieldset>
<legend>${this.label ?? 'Footer Layout'}</legend>
<figure>
<div id="grid">
<div class="area area-1">
Some SVG logo to put here
</div>
<div class="area area-2">
<umb-block-grid-entries .areaKey="${this.layout?.areas?.[0]?.key}"></umb-block-grid-entries>
</div>
<div class="area area-3">
<umb-block-grid-entries .areaKey="${this.layout?.areas?.[1]?.key}"></umb-block-grid-entries>
</div>
<div class="area area-4">
<umb-block-grid-entries .areaKey="${this.layout?.areas?.[2]?.key}"></umb-block-grid-entries>
</div>
<div class="area area-5">
<umb-block-grid-entries .areaKey="${this.layout?.areas?.[3]?.key}"></umb-block-grid-entries>
</div>
</div>
</figure>
</fieldset>
`;
}
static styles = [
commonStyles,
css`
fieldset {
background: var(--colour-echo);
padding: 15px 15px 20px 15px;
}
#grid {
display: grid;
grid-column-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
.area {
border: 1px solid red;
min-height: 100px;
}
`,
];
}
export default FooterLayoutBlockCustomView;
declare global {
interface HTMLElementTagNameMap {
'footer-layout-block-custom-view': FooterLayoutBlockCustomView;
}
}
Screenshot
and look at CMS repo and perhaps your Block Preview package for more bits.
