Merge pull request #2160 from umbraco/v14/bugfix/block-area-config-use-workspace-create

V14/bugfix/block area config use workspace create

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts

@@ -14,6 +14,7 @@ import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { ManifestWorkspace, PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbId } from '@umbraco-cms/backoffice/id';
 
 export class UmbBlockGridAreaTypeWorkspaceContext
 	extends UmbSubmittableWorkspaceContextBase<UmbBlockGridTypeAreaType>
@@ -43,12 +44,20 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 			{
 				path: 'edit/:id',
 				component: () => import('./block-grid-area-type-workspace-editor.element.js'),
-				setup: (_component, info) => {
+				setup: (component, info) => {
 					const id = info.match.params.id;
-					(_component as any).workspaceAlias = manifest.alias;
+					(component as any).workspaceAlias = manifest.alias;
 					this.load(id);
 				},
 			},
+			{
+				path: 'create',
+				component: () => import('./block-grid-area-type-workspace-editor.element.js'),
+				setup: (component) => {
+					(component as any).workspaceAlias = manifest.alias;
+					this.create();
+				},
+			},
 		]);
 	}
 
@@ -78,17 +87,24 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 	}
 
 	async create() {
-		throw new Error('Method not implemented.');
-		/*
-		//Only set groupKey property if it exists
-		const data: UmbBlockGridTypeAreaType = {
+		this.resetState();
+		let data: UmbBlockGridTypeAreaType = {
+			key: UmbId.new(),
+			alias: '',
+			columnSpan: 12,
+			rowSpan: 1,
+			minAllowed: 0,
+			maxAllowed: undefined,
+			specifiedAllowance: [],
+		};
 
+		// If we have a modal context, we blend in the modal preset data: [NL]
+		if (this.modalContext) {
+			data = { ...data, ...this.modalContext.data.preset };
 		}
 
 		this.setIsNew(true);
 		this.#data.setValue(data);
-		return { data };
-		*/
 	}
 
 	getData() {

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

@@ -6,11 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-import {
-	UmbPropertyValueChangeEvent,
-	type UmbPropertyEditorConfigCollection,
-} from '@umbraco-cms/backoffice/property-editor';
-import { UmbId } from '@umbraco-cms/backoffice/id';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { incrementString } from '@umbraco-cms/backoffice/utils';
 
@@ -61,7 +57,17 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 		new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL)
 			.addAdditionalPath('block-grid-area-type')
 			.onSetup(() => {
-				return { data: { entityType: 'block-grid-area-type', preset: {} }, modal: { size: 'large' } };
+				if (!this._areaGridColumns) return false;
+				const halfGridColumns = this._areaGridColumns * 0.5;
+				const columnSpan = halfGridColumns === Math.round(halfGridColumns) ? halfGridColumns : this._areaGridColumns;
+
+				return {
+					data: {
+						entityType: 'block-grid-area-type',
+						preset: { columnSpan, alias: this.#generateUniqueAreaAlias('area') },
+					},
+					modal: { size: 'large' },
+				};
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._workspacePath = routeBuilder({});
@@ -104,29 +110,6 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 		return alias;
 	}
 
-	#addNewArea() {
-		if (!this._areaGridColumns) return;
-		const halfGridColumns = this._areaGridColumns * 0.5;
-		const columnSpan = halfGridColumns === Math.round(halfGridColumns) ? halfGridColumns : this._areaGridColumns;
-
-		this._value = [
-			...this._value,
-			{
-				key: UmbId.new(),
-				alias: this.#generateUniqueAreaAlias('area'),
-				columnSpan: columnSpan,
-				rowSpan: 1,
-				minAllowed: 0,
-				maxAllowed: undefined,
-				specifiedAllowance: [],
-			},
-		];
-		this.requestUpdate('_value');
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-
-		//TODO: open area edit workspace
-	}
-
 	override render() {
 		return this._areaGridColumns
 			? html`${this._styleElement}
@@ -144,7 +127,11 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 									.key=${area.key}></umb-block-area-config-entry>`,
 						)}
 					</div>
-					<uui-button id="add-button" look="placeholder" label=${'Add area'} @click=${this.#addNewArea}></uui-button>`
+					<uui-button
+						id="add-button"
+						look="placeholder"
+						label=${'Add area'}
+						href=${this._workspacePath + 'create'}></uui-button>`
 			: '';
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts

@@ -112,7 +112,6 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
 
 		this.setIsNew(true);
 		this.#data.setValue(data);
-		return { data };
 	}
 
 	getData() {