area grid columns + more bindings

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts

@@ -15,6 +15,9 @@ export class UmbBlockGridAreaContainerElement extends UmbLitElement {
 	@state()
 	_areas?: Array<UmbBlockGridLayoutAreaItemModel> = [];
 
+	@state()
+	_areaGridColumns?: number;
+
 	constructor() {
 		super();
 
@@ -26,6 +29,13 @@ export class UmbBlockGridAreaContainerElement extends UmbLitElement {
 				},
 				'observeAreas',
 			);
+			this.observe(
+				context.areaGridColumns,
+				(areaGridColumns) => {
+					this._areaGridColumns = areaGridColumns;
+				},
+				'observeAreaGridColumns',
+			);
 		});
 		this.consumeContext(UMB_BLOCK_GRID_MANAGER_CONTEXT, (manager) => {
 			this.observe(
@@ -43,7 +53,9 @@ export class UmbBlockGridAreaContainerElement extends UmbLitElement {
 	render() {
 		return this._areas
 			? html` ${this.#styleElement}
-					<div class="umb-block-grid__area-container">
+					<div
+						class="umb-block-grid__area-container"
+						style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
 						${repeat(
 							this._areas,
 							(area) => area.key,

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -1,6 +1,6 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js';
-import { html, css, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import '../ref-grid-block/index.js';
 import type { UmbBlockGridLayoutModel, UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block';
@@ -67,11 +67,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	constructor() {
 		super();
 
-		this.observe(this.#context.createPath, (createPath) => {
-			const oldValue = this._createPath;
-			this._createPath = createPath;
-			this.requestUpdate('_createPath', oldValue);
-		});
+		// Misc:
 		this.observe(this.#context.showContentEdit, (showContentEdit) => {
 			this._showContentEdit = showContentEdit;
 		});
@@ -82,7 +78,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			this._blockViewProps.label = label;
 			this._label = label;
 		});
-		// Data props:
+
+		// Data:
 		this.observe(this.#context.layout, (layout) => {
 			this._blockViewProps.layout = layout;
 		});
@@ -92,6 +89,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		this.observe(this.#context.settings, (settings) => {
 			this._blockViewProps.settings = settings;
 		});
+
+		// Paths:
+		this.observe(this.#context.createPath, (createPath) => {
+			const oldValue = this._createPath;
+			this._createPath = createPath;
+			this.requestUpdate('_createPath', oldValue);
+		});
 		this.observe(this.#context.workspaceEditContentPath, (path) => {
 			this._workspaceEditContentPath = path;
 			this._blockViewProps.urls.editContent = path;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts

@@ -40,7 +40,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
 
 		this.#retrieveParentEntry = this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (blockGridEntry) => {
 			this.#parentEntry = blockGridEntry;
-			//this.#gotBlockParentEntry();// is not used at this point.
+			this.#gotBlockParentEntry(); // is not used at this point.
 		}).asPromise();
 
 		this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
@@ -89,7 +89,12 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
 		if (!this.#parentEntry) return;
 	}*/
 
-	async #gotAreaKey() {
+	#gotAreaKey() {
+		if (this.#areaKey === undefined) return;
+		this.#gotBlockParentEntry();
+	}
+
+	async #gotBlockParentEntry() {
 		if (this.#areaKey === undefined) return;
 
 		if (this.#areaKey === null) {
@@ -112,9 +117,19 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
 				},
 				'observeThisLayouts',
 			);
+
+			this.removeControllerByAlias('observeAreaType');
+
+			const hostEl = this.getHostElement() as HTMLElement | undefined;
+			if (hostEl) {
+				hostEl.removeAttribute('data-area-alias');
+				hostEl.removeAttribute('data-area-col-span');
+				hostEl.removeAttribute('data-area-row-span');
+				hostEl.style.removeProperty('--umb-block-grid--grid-columns');
+				hostEl.style.removeProperty('--umb-block-grid--area-column-span');
+				hostEl.style.removeProperty('--umb-block-grid--area-row-span');
+			}
 		} else {
-			// entries of a area:
-			await this.#retrieveParentEntry;
 			if (!this.#parentEntry) return;
 
 			this.observe(
@@ -141,6 +156,21 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
 				},
 				'observeThisLayouts',
 			);
+
+			this.observe(
+				this.#parentEntry.areaType(this.#areaKey),
+				(areaType) => {
+					const hostEl = this.getHostElement() as HTMLElement | undefined;
+					if (!hostEl) return;
+					hostEl.setAttribute('data-area-alias', areaType?.alias ?? '');
+					hostEl.setAttribute('data-area-col-span', areaType?.colSpan ?? '');
+					hostEl.setAttribute('data-area-row-span', areaType?.rowSpan ?? '');
+					hostEl.style.setProperty('--umb-block-grid--grid-columns', areaType?.colSpan ?? '');
+					hostEl.style.setProperty('--umb-block-grid--area-column-span', areaType?.colSpan ?? '');
+					hostEl.style.setProperty('--umb-block-grid--area-row-span', areaType?.rowSpan ?? '');
+				},
+				'observeAreaType',
+			);
 		}
 	}
 

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts

@@ -18,6 +18,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 	//
 	columnSpan = this._layout.asObservablePart((x) => x?.columnSpan);
 	rowSpan = this._layout.asObservablePart((x) => x?.rowSpan ?? 1);
+	areaGridColumns = this._blockType.asObservablePart((x) => x?.areaGridColumns ?? '');
 	areas = this._layout.asObservablePart((x) => x?.areas ?? []);
 
 	readonly showContentEdit = this._blockType.asObservablePart((x) => !x?.forceHideContentEditorInOverlay);
@@ -30,6 +31,11 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 		return this._layout.asObservablePart((x) => x?.areas.find((x) => x.key === areaKey)?.items ?? []);
 	}
 
+	areaType(areaKey: string) {
+		console.log('areaKey', areaKey);
+		return this._blockType.asObservablePart((x) => x?.areas?.find((x) => x.key === areaKey));
+	}
+
 	setLayoutsOfArea(areaKey: string, layouts: UmbBlockGridLayoutModel[]) {
 		const frozenValue = this._layout.value;
 		if (!frozenValue) return;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts

@@ -1,6 +1,6 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-block-grid-type-workspace-view-areas')
@@ -10,7 +10,7 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 			<uui-box headline="Areas">
 				<umb-property
 					label=${this.localize.term('blockEditor_areasLayoutColumns')}
-					alias="areasLayoutColumns"
+					alias="areaGridColumns"
 					property-editor-ui-alias="Umb.PropertyEditorUi.Number"></umb-property>
 				<umb-property
 					label=${this.localize.term('blockEditor_areasConfigurations')}