area config base

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

@@ -227,7 +227,6 @@ export class UmbBlockGridEntriesElement extends UmbLitElement {
 							label=${this.localize.term('blockEditor_addBlock')}></uui-button-inline-create>
 				  `}
 		`;
-		//
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/manifests.ts

@@ -0,0 +1,13 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestPropertyEditorUi = {
+	type: 'propertyEditorUi',
+	alias: 'Umb.PropertyEditorUi.BlockGridAreasConfig',
+	name: 'Block Grid Areas Configuration Property Editor UI',
+	js: () => import('./property-editor-ui-block-grid-areas-config.element.js'),
+	meta: {
+		label: 'Block Grid Areas Configuration',
+		icon: 'icon-document',
+		group: 'common',
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts

@@ -0,0 +1,65 @@
+import type { UmbBlockGridTypeAreaType } from '../../index.js';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+
+@customElement('umb-property-editor-ui-block-grid-areas-config')
+export class UmbPropertyEditorUIBlockGridAreasConfigElement
+	extends UmbLitElement
+	implements UmbPropertyEditorUiElement
+{
+	// local vars:
+	#defaultAreaGridColumns: number = 12;
+	#valueOfAreaGridColumns?: number | null;
+
+	@property({ type: Array })
+	value: Array<UmbBlockGridTypeAreaType> = [];
+
+	@property({ attribute: false })
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		const defaultAreaGridColumns = config?.getValueByAlias('defaultAreaGridColumns');
+		if (typeof defaultAreaGridColumns === 'number' && defaultAreaGridColumns > 0) {
+			this.#defaultAreaGridColumns = defaultAreaGridColumns ?? null;
+		} else {
+			this.#defaultAreaGridColumns = 12;
+		}
+		this.#gotAreaColumns();
+	}
+
+	@state()
+	_areaGridColumns?: number;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
+			this.observe(await context.propertyValueByAlias('areaGridColumns'), (value) => {
+				// Value can be undefined, but 'undefined > 0' is still valid JS and will return false. [NL]
+				this.#valueOfAreaGridColumns = (value as number) > 0 ? (value as number) : null;
+				this.#gotAreaColumns();
+			});
+		});
+	}
+
+	#gotAreaColumns() {
+		if (!this.#defaultAreaGridColumns || this.#valueOfAreaGridColumns === undefined) return;
+		this._areaGridColumns = this.#valueOfAreaGridColumns ?? this.#defaultAreaGridColumns;
+	}
+
+	render() {
+		return this._areaGridColumns ? html`<div id="wrapper">Hello columns: ${this._areaGridColumns}</div>` : '';
+	}
+
+	static styles = [UmbTextStyles, css``];
+}
+
+export default UmbPropertyEditorUIBlockGridAreasConfigElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-block-grid-areas-config': UmbPropertyEditorUIBlockGridAreasConfigElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/manifests.ts

@@ -1,13 +1,15 @@
+import { manifest as blockGridAreasConfigEditor } from './block-grid-areas-config/manifests.js';
+import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js';
 import { manifest as blockGridEditor } from './block-grid-editor/manifests.js';
+import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests.js';
 import { manifest as blockGridLayoutStylesheet } from './block-grid-layout-stylesheet/manifests.js';
 import { manifest as blockGridTypeConfiguration } from './block-grid-type-configuration/manifests.js';
-import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js';
-import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests.js';
 
 export const manifests = [
-	blockGridTypeConfiguration,
-	blockGridEditor,
-	blockGridLayoutStylesheet,
+	blockGridAreasConfigEditor,
 	blockGridColumnSpan,
+	blockGridEditor,
 	blockGridGroupConfiguration,
+	blockGridLayoutStylesheet,
+	blockGridTypeConfiguration,
 ];

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

@@ -1,10 +1,31 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbPropertyEditorConfig } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-block-grid-type-workspace-view-areas')
 export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
+	//
+	@state()
+	_areaConfigConfigurationObject?: UmbPropertyEditorConfig;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
+			this.observe(
+				await context.propertyValueByAlias<undefined | string>('gridColumns'),
+				(value) => {
+					const dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
+					this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
+				},
+				'observeGridColumns',
+			);
+		}).passContextAliasMatches();
+	}
+
 	render() {
 		return html`
 			<uui-box headline="Areas">
@@ -15,7 +36,10 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 				<umb-property
 					label=${this.localize.term('blockEditor_areasConfigurations')}
 					alias="areas"
-					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreas"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
+					.config=${this._areaConfigConfigurationObject}
+					>></umb-property
+				>
 			</uui-box>
 		`;
 	}