enable areas to be undefined (#18057)

Author: nielslyngsoe

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

@@ -31,7 +31,11 @@ function resolvePlacementAsBlockGrid(
 	args: UmbSorterResolvePlacementArgs<UmbBlockGridLayoutModel, UmbBlockGridEntryElement>,
 ) {
 	// If this has areas, we do not want to move, unless we are at the edge
-	if (args.relatedModel.areas?.length > 0 && isWithinRect(args.pointerX, args.pointerY, args.relatedRect, -10)) {
+	if (
+		args.relatedModel.areas &&
+		args.relatedModel.areas.length > 0 &&
+		isWithinRect(args.pointerX, args.pointerY, args.relatedRect, -10)
+	) {
 		return null;
 	}
 

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

@@ -132,14 +132,15 @@ export class UmbBlockGridManagerContext<
 			// Lets check if we found the right parent layout entry:
 			if (currentEntry.contentKey === parentId) {
 				// Append the layout entry to be inserted and unfreeze the rest of the data:
-				const areas = currentEntry.areas.map((x) =>
-					x.key === areaKey
-						? {
-								...x,
-								items: pushAtToUniqueArray([...x.items], insert, (x) => x.contentKey === insert.contentKey, index),
-							}
-						: x,
-				);
+				const areas =
+					currentEntry.areas?.map((x) =>
+						x.key === areaKey
+							? {
+									...x,
+									items: pushAtToUniqueArray([...x.items], insert, (x) => x.contentKey === insert.contentKey, index),
+								}
+							: x,
+					) ?? [];
 				return appendToFrozenArray(
 					entries,
 					{
@@ -150,31 +151,33 @@ export class UmbBlockGridManagerContext<
 				);
 			}
 			// Otherwise check if any items of the areas are the parent layout entry we are looking for. We do so based on parentId, recursively:
-			let y: number = currentEntry.areas?.length;
-			while (y--) {
-				// Recursively ask the items of this area to insert the layout entry, if something returns there was a match in this branch. [NL]
-				const correctedAreaItems = this.#appendLayoutEntryToArea(
-					insert,
-					currentEntry.areas[y].items,
-					parentId,
-					areaKey,
-					index,
-				);
-				if (correctedAreaItems) {
-					// This area got a corrected set of items, lets append those to the area and unfreeze the surrounding data:
-					const area = currentEntry.areas[y];
-					return appendToFrozenArray(
-						entries,
-						{
-							...currentEntry,
-							areas: appendToFrozenArray(
-								currentEntry.areas,
-								{ ...area, items: correctedAreaItems },
-								(z) => z.key === area.key,
-							),
-						},
-						(x) => x.contentKey === currentEntry.contentKey,
+			if (currentEntry.areas) {
+				let y: number = currentEntry.areas.length;
+				while (y--) {
+					// Recursively ask the items of this area to insert the layout entry, if something returns there was a match in this branch. [NL]
+					const correctedAreaItems = this.#appendLayoutEntryToArea(
+						insert,
+						currentEntry.areas[y].items,
+						parentId,
+						areaKey,
+						index,
 					);
+					if (correctedAreaItems) {
+						// This area got a corrected set of items, lets append those to the area and unfreeze the surrounding data:
+						const area = currentEntry.areas[y];
+						return appendToFrozenArray(
+							entries,
+							{
+								...currentEntry,
+								areas: appendToFrozenArray(
+									currentEntry.areas,
+									{ ...area, items: correctedAreaItems },
+									(z) => z.key === area.key,
+								),
+							},
+							(x) => x.contentKey === currentEntry.contentKey,
+						);
+					}
 				}
 			}
 		}

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-value-cloner/property-value-cloner-block-grid.cloner.test.ts

@@ -162,7 +162,7 @@ describe('UmbBlockGridPropertyValueCloner', () => {
 
 			testLayoutEntryNewKeyIsReflected(
 				'fictive-content-type-2',
-				result.value?.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.[0].areas[0]?.items[0],
+				result.value?.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.[0].areas?.[0]?.items[0],
 				result.value?.contentData,
 				result.value?.settingsData,
 				result.value?.expose,
@@ -175,7 +175,7 @@ describe('UmbBlockGridPropertyValueCloner', () => {
 
 			testLayoutEntryNewKeyIsReflected(
 				'fictive-content-type-3',
-				result.value?.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.[0].areas[0]?.items[0].areas[0]?.items[0],
+				result.value?.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.[0].areas?.[0]?.items[0].areas[0]?.items[0],
 				result.value?.contentData,
 				result.value?.settingsData,
 				result.value?.expose,

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-value-cloner/property-value-cloner-block-grid.cloner.ts

@@ -19,15 +19,17 @@ export class UmbBlockGridPropertyValueCloner extends UmbBlockPropertyValueCloner
 	#cloneLayoutEntry = async (layout: UmbBlockGridLayoutModel): Promise<UmbBlockGridLayoutModel> => {
 		// Clone the specific layout entry:
 		const entryClone = await this._cloneBlock(layout);
-		// And then clone the items of its areas:
-		entryClone.areas = await Promise.all(
-			entryClone.areas.map(async (area) => {
-				return {
-					...area,
-					items: await Promise.all(area.items.map(this.#cloneLayoutEntry)),
-				};
-			}),
-		);
+		if (entryClone.areas) {
+			// And then clone the items of its areas:
+			entryClone.areas = await Promise.all(
+				entryClone.areas.map(async (area) => {
+					return {
+						...area,
+						items: await Promise.all(area.items.map(this.#cloneLayoutEntry)),
+					};
+				}),
+			);
+		}
 		return entryClone;
 	};
 }

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

@@ -51,7 +51,7 @@ export interface UmbBlockGridValueModel extends UmbBlockValueType<UmbBlockGridLa
 export interface UmbBlockGridLayoutModel extends UmbBlockLayoutBaseModel {
 	columnSpan: number;
 	rowSpan: number;
-	areas: Array<UmbBlockGridLayoutAreaItemModel>;
+	areas?: Array<UmbBlockGridLayoutAreaItemModel>;
 }
 
 export interface UmbBlockGridLayoutAreaItemModel {