Merge pull request #2038 from umbraco/v14/bugfix/fallback-to-layout-columns

Block Grid: fallback to layout columns if no proper options

Author: nielslyngsoe

src/packages/block/block-grid/context/block-grid-entry.context.ts

@@ -30,8 +30,8 @@ export class UmbBlockGridEntryContext
 	implements UmbBlockGridScalableContext
 {
 	//
-	readonly columnSpan = this._layout.asObservablePart((x) => x?.columnSpan);
-	readonly rowSpan = this._layout.asObservablePart((x) => x?.rowSpan);
+	readonly columnSpan = this._layout.asObservablePart((x) => x ? x.columnSpan ?? null : undefined);
+	readonly rowSpan = this._layout.asObservablePart((x) => x ? x.rowSpan ?? null : undefined);
 	readonly layoutAreas = this._layout.asObservablePart((x) => x?.areas);
 	readonly columnSpanOptions = this._blockType.asObservablePart((x) => x?.columnSpanOptions ?? []);
 	readonly areaTypeGridColumns = this._blockType.asObservablePart((x) => x?.areaGridColumns);
@@ -208,7 +208,7 @@ export class UmbBlockGridEntryContext
 		this.observe(
 			observeMultiple([this.columnSpan, this.relevantColumnSpanOptions, this._entries.layoutColumns]),
 			([columnSpan, relevantColumnSpanOptions, layoutColumns]) => {
-				if (!layoutColumns) return;
+				if (!layoutColumns || columnSpan === undefined) return;
 				const newColumnSpan = this.#calcColumnSpan(
 					columnSpan ?? layoutColumns,
 					relevantColumnSpanOptions,
@@ -230,16 +230,15 @@ export class UmbBlockGridEntryContext
 		this.observe(
 			observeMultiple([this.minMaxRowSpan, this.rowSpan]),
 			([minMax, rowSpan]) => {
-				if (minMax) {
-					const newRowSpan = Math.max(minMax[0], Math.min(rowSpan ?? 1, minMax[1]));
-					if (newRowSpan !== rowSpan) {
-						const layoutValue = this._layout.getValue();
-						if (!layoutValue) return;
-						this._layout.setValue({
-							...layoutValue,
-							rowSpan: newRowSpan,
-						});
-					}
+				if (!minMax || rowSpan === undefined) return;
+				const newRowSpan = Math.max(minMax[0], Math.min(rowSpan ?? 1, minMax[1]));
+				if (newRowSpan !== rowSpan) {
+					const layoutValue = this._layout.getValue();
+					if (!layoutValue) return;
+					this._layout.setValue({
+						...layoutValue,
+						rowSpan: newRowSpan,
+					});
 				}
 			},
 			'observeRowSpanValidation',
@@ -259,10 +258,8 @@ export class UmbBlockGridEntryContext
 				return newColumnSpan;
 			}
 		} else {
-			// Reset to the layoutColumns.
-			if (layoutColumns !== columnSpan) {
-				return layoutColumns;
-			}
+			// Fallback to the layoutColumns.
+			return layoutColumns;
 		}
 		return columnSpan;
 	}

src/packages/block/block/context/block-entry.context.ts

@@ -307,6 +307,9 @@ export abstract class UmbBlockEntryContext<
 			},
 			'observeContent',
 		);
+		/*
+
+		This two way binding does not work well, might need to further investigate what the exact problem is.
 		this.observe(
 			this.content,
 			(content) => {
@@ -316,6 +319,7 @@ export abstract class UmbBlockEntryContext<
 			},
 			'observeInternalContent',
 		);
+		*/
 
 		// observe settings:
 		const settingsUdi = this._layout.value?.settingsUdi;
@@ -351,8 +355,6 @@ export abstract class UmbBlockEntryContext<
 		this.observe(
 			this._manager.contentTypeOf(contentTypeKey),
 			(contentType) => {
-				//this.#contentElementTypeAlias.setValue(contentType?.alias);
-				//this.#contentElementTypeName.setValue(contentType?.name);
 				this.#contentElementType.setValue(contentType);
 				this._gotContentType(contentType);
 			},