@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

package/dist-cms/packages/block/block-grid/context/block-grid-entries.context.js

@@ -87,7 +87,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     _gotBlockManager() {
         if (!this._manager)
             return;
-        this.#allowedBlockTypes.setValue(this.#retrieveAllowedElementTypes());
+        this.#getAllowedBlockTypes();
         this.observe(this._manager.propertyAlias, (alias) => {
             this.#catalogueModal.setUniquePathValue('propertyAlias', alias ?? 'null');
         }, 'observePropertyAlias');
@@ -110,6 +110,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             await this._retrieveManager;
             if (!this._manager)
                 return;
+            this.removeUmbControllerByAlias('observeParentUnique');
             this.setParentUnique(null);
             this.observe(this._manager.layouts, (layouts) => {
                 this._layoutEntries.setValue(layouts);
@@ -127,6 +128,8 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                 hostEl.style.removeProperty('--umb-block-grid--area-column-span');
                 hostEl.style.removeProperty('--umb-block-grid--area-row-span');
             }
+            this.removeUmbControllerByAlias('observeAreaType');
+            this.#getAllowedBlockTypes();
         }
         else {
             if (!this.#parentEntry)
@@ -135,7 +138,9 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                 this.setParentUnique(unique ?? null);
             }, 'observeParentUnique');
             this.observe(this.#parentEntry.layoutsOfArea(this.#areaKey), (layouts) => {
-                this._layoutEntries.setValue(layouts);
+                if (layouts) {
+                    this._layoutEntries.setValue(layouts);
+                }
             }, 'observeParentLayouts');
             this.observe(this.layoutEntries, (layouts) => {
                 if (this.#areaKey) {
@@ -153,15 +158,34 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                 hostEl.style.setProperty('--umb-block-grid--grid-columns', areaType?.columnSpan?.toString() ?? '');
                 hostEl.style.setProperty('--umb-block-grid--area-column-span', areaType?.columnSpan?.toString() ?? '');
                 hostEl.style.setProperty('--umb-block-grid--area-row-span', areaType?.rowSpan?.toString() ?? '');
+                this.#getAllowedBlockTypes();
             }, 'observeAreaType');
         }
     }
+    #getAllowedBlockTypes() {
+        if (this.#areaKey === undefined || !this._manager)
+            return;
+        this.#allowedBlockTypes.setValue(this.#retrieveAllowedElementTypes());
+    }
     getPathForCreateBlock(index) {
         return this._catalogueRouteBuilderState.getValue()?.({ view: 'create', index: index });
     }
     getPathForClipboard(index) {
         return this._catalogueRouteBuilderState.getValue()?.({ view: 'clipboard', index: index });
     }
+    /*
+    async setLayouts(layouts: Array<UmbBlockGridLayoutModel>) {
+        await this._retrieveManager;
+        if (this.#areaKey === null) {
+            this._manager?.setLayouts(layouts);
+        } else {
+            if (!this.#parentUnique || !this.#areaKey) {
+                throw new Error('ParentUnique or AreaKey not set');
+            }
+            this._manager?.setLayoutsOfArea(this.#parentUnique, this.#areaKey, layouts);
+        }
+    }
+    */
     async create(contentElementTypeKey, partialLayoutEntry, modalData) {
         await this._retrieveManager;
         return this._manager?.create(contentElementTypeKey, partialLayoutEntry, modalData);

package/dist-cms/packages/block/block-grid/context/block-grid-entry.context.d.ts

@@ -8,12 +8,13 @@ import type { UmbControllerHost } from '../../../../libs/controller-api/index.js
 export declare class UmbBlockGridEntryContext extends UmbBlockEntryContext<typeof UMB_BLOCK_GRID_MANAGER_CONTEXT, typeof UMB_BLOCK_GRID_MANAGER_CONTEXT.TYPE, typeof UMB_BLOCK_GRID_ENTRIES_CONTEXT, typeof UMB_BLOCK_GRID_ENTRIES_CONTEXT.TYPE, UmbBlockGridTypeModel, UmbBlockGridLayoutModel> implements UmbBlockGridScalableContext {
     #private;
     readonly columnSpan: import("rxjs/internal/Observable").Observable<number | undefined>;
-    readonly rowSpan: import("rxjs/internal/Observable").Observable<number>;
+    readonly rowSpan: import("rxjs/internal/Observable").Observable<number | undefined>;
+    readonly layoutAreas: import("rxjs/internal/Observable").Observable<import("../index.js").UmbBlockGridLayoutAreaItemModel[] | undefined>;
     readonly columnSpanOptions: import("rxjs/internal/Observable").Observable<import("../index.js").UmbBlockGridTypeColumnSpanOption[]>;
     readonly areaTypeGridColumns: import("rxjs/internal/Observable").Observable<number | undefined>;
     readonly areas: import("rxjs/internal/Observable").Observable<import("../index.js").UmbBlockGridTypeAreaType[]>;
-    readonly minMaxRowSpan: import("rxjs/internal/Observable").Observable<number[]>;
-    getMinMaxRowSpan(): [number, number];
+    readonly minMaxRowSpan: import("rxjs/internal/Observable").Observable<number[] | undefined>;
+    getMinMaxRowSpan(): [number, number] | undefined;
     readonly inlineEditingMode: import("rxjs/internal/Observable").Observable<boolean>;
     readonly relevantColumnSpanOptions: import("rxjs/internal/Observable").Observable<number[]>;
     getRelevantColumnSpanOptions(): number[];
@@ -23,13 +24,28 @@ export declare class UmbBlockGridEntryContext extends UmbBlockEntryContext<typeo
     readonly firstPropertyType: import("rxjs/internal/Observable").Observable<UmbPropertyTypeModel | undefined>;
     readonly scaleManager: UmbBlockGridScaleManager;
     constructor(host: UmbControllerHost);
-    protected _gotLayout(layout: UmbBlockGridLayoutModel | undefined): UmbBlockGridLayoutModel | undefined;
-    layoutsOfArea(areaKey: string): import("rxjs/internal/Observable").Observable<UmbBlockGridLayoutModel[]>;
+    layoutsOfArea(areaKey: string): import("rxjs/internal/Observable").Observable<UmbBlockGridLayoutModel[] | undefined>;
     areaType(areaKey: string): import("rxjs/internal/Observable").Observable<import("../index.js").UmbBlockGridTypeAreaType | undefined>;
     setLayoutsOfArea(areaKey: string, layouts: UmbBlockGridLayoutModel[]): void;
+    /**
+     * Set the column span of this entry.
+     * @param columnSpan {number} The new column span.
+     */
     setColumnSpan(columnSpan: number): void;
+    /**
+     * Get the column span of this entry.
+     * @returns {number} The column span.
+     */
     getColumnSpan(): number | undefined;
+    /**
+     * Set the row span of this entry.
+     * @param rowSpan {number} The new row span.
+     */
     setRowSpan(rowSpan: number): void;
+    /**
+     * Get the row span of this entry.
+     * @returns {number} The row span.
+     */
     getRowSpan(): number | undefined;
     _gotManager(): void;
     _gotEntries(): void;

package/dist-cms/packages/block/block-grid/context/block-grid-entry.context.js

@@ -7,7 +7,9 @@ import { UmbArrayState, UmbBooleanState, UmbNumberState, UmbObjectState, appendT
 export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
     getMinMaxRowSpan() {
         const x = this._blockType.getValue();
-        return [x?.rowMinSpan ?? 1, x?.rowMaxSpan ?? 1];
+        if (!x)
+            return undefined;
+        return [x.rowMinSpan ?? 1, x.rowMaxSpan ?? 1];
     }
     #relevantColumnSpanOptions;
     getRelevantColumnSpanOptions() {
@@ -20,11 +22,12 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         super(host, UMB_BLOCK_GRID_MANAGER_CONTEXT, UMB_BLOCK_GRID_ENTRIES_CONTEXT);
         //
         this.columnSpan = this._layout.asObservablePart((x) => x?.columnSpan);
-        this.rowSpan = this._layout.asObservablePart((x) => x?.rowSpan ?? 1);
+        this.rowSpan = this._layout.asObservablePart((x) => x?.rowSpan);
+        this.layoutAreas = this._layout.asObservablePart((x) => x?.areas);
         this.columnSpanOptions = this._blockType.asObservablePart((x) => x?.columnSpanOptions ?? []);
         this.areaTypeGridColumns = this._blockType.asObservablePart((x) => x?.areaGridColumns);
         this.areas = this._blockType.asObservablePart((x) => x?.areas ?? []);
-        this.minMaxRowSpan = this._blockType.asObservablePart((x) => [x?.rowMinSpan ?? 1, x?.rowMaxSpan ?? 1]);
+        this.minMaxRowSpan = this._blockType.asObservablePart((x) => x ? [x.rowMinSpan ?? 1, x.rowMaxSpan ?? 1] : undefined);
         this.inlineEditingMode = this._blockType.asObservablePart((x) => x?.inlineEditing === true);
         this.#relevantColumnSpanOptions = new UmbArrayState([], (x) => x);
         this.relevantColumnSpanOptions = this.#relevantColumnSpanOptions.asObservable();
@@ -37,17 +40,8 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.firstPropertyType = this.#firstPropertyType.asObservable();
         this.scaleManager = new UmbBlockGridScaleManager(this);
     }
-    _gotLayout(layout) {
-        if (layout) {
-            // TODO: Implement size correction to fit with configurations. both for columnSpan and rowSpan.
-            layout = { ...layout };
-            layout.columnSpan ??= 999;
-            layout.areas ??= [];
-        }
-        return layout;
-    }
     layoutsOfArea(areaKey) {
-        return this._layout.asObservablePart((x) => x?.areas.find((x) => x.key === areaKey)?.items ?? []);
+        return this._layout.asObservablePart((x) => x?.areas?.find((x) => x.key === areaKey)?.items);
     }
     areaType(areaKey) {
         return this._blockType.asObservablePart((x) => x?.areas?.find((x) => x.key === areaKey));
@@ -56,41 +50,77 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         const frozenValue = this._layout.value;
         if (!frozenValue)
             return;
-        const areas = appendToFrozenArray(frozenValue?.areas, {
+        const areas = appendToFrozenArray(frozenValue?.areas ?? [], {
             key: areaKey,
             items: layouts,
         }, (x) => x.key);
         this._layout.update({ areas });
     }
+    /**
+     * Set the column span of this entry.
+     * @param columnSpan {number} The new column span.
+     */
     setColumnSpan(columnSpan) {
         if (!this._entries)
             return;
         const layoutColumns = this._entries.getLayoutColumns();
         if (!layoutColumns)
             return;
-        columnSpan = Math.max(1, Math.min(columnSpan, layoutColumns));
-        this._layout.update({ columnSpan });
+        columnSpan = this.#calcColumnSpan(columnSpan, this.getRelevantColumnSpanOptions(), layoutColumns);
+        if (columnSpan === this.getColumnSpan())
+            return;
+        const layoutValue = this._layout.getValue();
+        if (!layoutValue)
+            return;
+        this._layout.setValue({
+            ...layoutValue,
+            columnSpan,
+        });
     }
+    /**
+     * Get the column span of this entry.
+     * @returns {number} The column span.
+     */
     getColumnSpan() {
         return this._layout.getValue()?.columnSpan;
     }
+    /**
+     * Set the row span of this entry.
+     * @param rowSpan {number} The new row span.
+     */
     setRowSpan(rowSpan) {
-        const blockType = this._blockType.getValue();
-        if (!blockType)
+        const minMax = this.getMinMaxRowSpan();
+        if (!minMax)
+            return;
+        rowSpan = Math.max(minMax[0], Math.min(rowSpan, minMax[1]));
+        if (rowSpan === this.getRowSpan())
             return;
-        rowSpan = Math.max(blockType.rowMinSpan, Math.min(rowSpan, blockType.rowMaxSpan));
-        this._layout.update({ rowSpan });
+        const layoutValue = this._layout.getValue();
+        if (!layoutValue)
+            return;
+        this._layout.setValue({
+            ...layoutValue,
+            rowSpan,
+        });
     }
+    /**
+     * Get the row span of this entry.
+     * @returns {number} The row span.
+     */
     getRowSpan() {
         return this._layout.getValue()?.rowSpan;
     }
-    _gotManager() { }
+    _gotManager() {
+        this.#gotEntriesAndManager();
+    }
     _gotEntries() {
         this.scaleManager.setEntriesContext(this._entries);
         if (!this._entries)
             return;
+        this.#gotEntriesAndManager();
+        // Retrieve scale options:
         this.observe(observeMultiple([this.minMaxRowSpan, this.columnSpanOptions, this._entries.layoutColumns]), ([minMaxRowSpan, columnSpanOptions, layoutColumns]) => {
-            if (!layoutColumns)
+            if (!layoutColumns || !minMaxRowSpan)
                 return;
             const relevantColumnSpanOptions = columnSpanOptions
                 ? columnSpanOptions
@@ -104,30 +134,77 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
             const canScale = hasRelevantColumnSpanOptions || hasRowSpanOptions;
             this.#canScale.setValue(canScale);
         }, 'observeScaleOptions');
+        // Retrieve The Grid Columns for the Areas:
         this.observe(observeMultiple([this.areaTypeGridColumns, this._entries.layoutColumns]), ([areaTypeGridColumns, layoutColumns]) => {
             this.#areaGridColumns.setValue(areaTypeGridColumns ?? layoutColumns);
         }, 'observeAreaGridColumns');
-        this.observe(observeMultiple([this.columnSpan, this.relevantColumnSpanOptions, this._entries.layoutColumns]), ([columnSpan, relevantColumnSpanOptions, layoutColumns]) => {
-            if (!columnSpan || !layoutColumns)
+    }
+    #gotEntriesAndManager() {
+        if (!this._entries || !this._manager)
+            return;
+        // Secure areas fits options:
+        this.observe(observeMultiple([this.areas, this.layoutAreas]), ([areas, layoutAreas]) => {
+            if (!areas || !layoutAreas)
                 return;
-            if (relevantColumnSpanOptions.length > 0) {
-                // Correct columnSpan so it fits.
-                const newColumnSpan = closestColumnSpanOption(columnSpan, relevantColumnSpanOptions, layoutColumns) ?? layoutColumns;
-                if (newColumnSpan !== columnSpan) {
-                    //this.setColumnSpan(newColumnSpan);
-                    this._layout.update({ columnSpan: newColumnSpan });
-                }
+            const areasAreIdentical = areas.length === layoutAreas.length && areas.every((area) => layoutAreas.some((y) => y.key === area.key));
+            if (areasAreIdentical === false) {
+                const layoutValue = this._layout.getValue();
+                if (!layoutValue)
+                    return;
+                this._layout.setValue({
+                    ...layoutValue,
+                    areas: layoutAreas.map((x) => (areas.find((y) => y.key === x.key) ? x : { key: x.key, items: [] })),
+                });
             }
-            else {
-                // Reset to the layoutColumns.
-                if (layoutColumns !== columnSpan) {
-                    //this.setColumnSpan(layoutColumns);
-                    this._layout.update({ columnSpan: layoutColumns });
-                }
+        }, 'observeAreaValidation');
+        // Secure columnSpan fits options:
+        this.observe(observeMultiple([this.layout, this.columnSpan, this.relevantColumnSpanOptions, this._entries.layoutColumns]), ([layout, columnSpan, relevantColumnSpanOptions, layoutColumns]) => {
+            if (!layout || !layoutColumns)
+                return;
+            const newColumnSpan = this.#calcColumnSpan(columnSpan ?? layoutColumns, relevantColumnSpanOptions, layoutColumns);
+            if (newColumnSpan !== columnSpan) {
+                const layoutValue = this._layout.getValue();
+                if (!layoutValue)
+                    return;
+                this._layout.setValue({
+                    ...layoutValue,
+                    columnSpan: newColumnSpan,
+                });
             }
         }, 'observeColumnSpanValidation');
+        // Secure rowSpan fits options:
+        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,
+                    });
+                }
+            }
+        }, 'observeRowSpanValidation');
     }
     _gotContentType(contentType) {
         this.#firstPropertyType.setValue(contentType?.properties[0]);
     }
+    #calcColumnSpan(columnSpan, relevantColumnSpanOptions, layoutColumns) {
+        if (relevantColumnSpanOptions.length > 0) {
+            // Correct to a columnSpan option.
+            const newColumnSpan = closestColumnSpanOption(columnSpan, relevantColumnSpanOptions, layoutColumns) ?? layoutColumns;
+            if (newColumnSpan !== columnSpan) {
+                return newColumnSpan;
+            }
+        }
+        else {
+            // Reset to the layoutColumns.
+            if (layoutColumns !== columnSpan) {
+                return layoutColumns;
+            }
+        }
+        return columnSpan;
+    }
 }

package/dist-cms/packages/block/block-grid/context/block-grid-manager.context.js

@@ -1,5 +1,5 @@
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
-import { UmbArrayState, appendToFrozenArray } from '../../../../libs/observable-api/index.js';
+import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '../../../../libs/observable-api/index.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
 export const UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET = '/umbraco/backoffice/css/umbraco-blockgridlayout.css';
 /**
@@ -31,9 +31,10 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     /**
      * Inserts a layout entry into an area of a layout entry.
      * @param layoutEntry The layout entry to insert.
-     * @param content The content data to insert.
-     * @param settings The settings data to insert.
-     * @param modalData The modal data.
+     * @param entries The layout entries to search within.
+     * @param parentUnique The parentUnique to search for.
+     * @param areaKey The areaKey to insert the layout entry into.
+     * @param index The index to insert the layout entry at.
      * @returns a updated layout entries array if the insert was successful.
      *
      * @remarks
@@ -45,32 +46,40 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     #appendLayoutEntryToArea(insert, entries, parentId, areaKey, index) {
         // I'm sorry, this code is not easy to read or maintain [NL]
         let i = entries.length;
-        while (--i) {
-            const layoutEntry = entries[i];
-            if (layoutEntry.contentUdi === parentId) {
+        while (i--) {
+            const currentEntry = entries[i];
+            // Lets check if we found the right parent layout entry:
+            if (currentEntry.contentUdi === 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.contentUdi === insert.contentUdi, index),
+                    }
+                    : x);
                 return appendToFrozenArray(entries, {
-                    ...layoutEntry,
-                    areas: layoutEntry.areas.map((x) => x.key === areaKey ? { ...x, items: appendToFrozenArray(x.items, insert) } : x),
-                }, (x) => x.contentUdi === layoutEntry.contentUdi);
+                    ...currentEntry,
+                    areas,
+                }, (x) => x.contentUdi === currentEntry.contentUdi);
             }
-            let y = layoutEntry.areas?.length;
-            while (--y) {
+            // 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 = 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, layoutEntry.areas[y].items, parentId, areaKey, index);
+                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 = layoutEntry.areas[y];
+                    const area = currentEntry.areas[y];
                     return appendToFrozenArray(entries, {
-                        ...layoutEntry,
-                        areas: appendToFrozenArray(layoutEntry.areas, { ...area, items: correctedAreaItems }, (z) => z.key === area.key),
-                    }, (x) => x.contentUdi === layoutEntry.contentUdi);
+                        ...currentEntry,
+                        areas: appendToFrozenArray(currentEntry.areas, { ...area, items: correctedAreaItems }, (z) => z.key === area.key),
+                    }, (x) => x.contentUdi === currentEntry.contentUdi);
                 }
             }
         }
-        // Find layout entry based on parentId, recursively, as it needs to check layout of areas as well:
         return undefined;
     }
+    // TODO: Remove dependency on modalData object here. [NL] Maybe change it into requiring the originData object instead.
     insert(layoutEntry, content, settings, modalData) {
         const index = modalData.originData.index ?? -1;
         if (modalData.originData.parentUnique && modalData.originData.areaKey) {

package/dist-cms/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.d.ts

@@ -5,7 +5,7 @@ export interface UmbBlockGridScalableContext extends UmbControllerHost {
     setRowSpan: (rowSpan: number) => void;
     getColumnSpan: () => number | undefined;
     getRowSpan: () => number | undefined;
-    getMinMaxRowSpan: () => [number, number];
+    getMinMaxRowSpan: () => [number, number] | undefined;
     getRelevantColumnSpanOptions: () => Array<number> | undefined;
 }
 export interface UmbBlockGridScalableContainerContext extends UmbControllerHost {

package/dist-cms/packages/block/block-grid/context/block-grid-scale-manager/block-grid-scale-manager.controller.js

@@ -151,13 +151,17 @@ export class UmbBlockGridScaleManager extends UmbControllerBase {
         const blockEndCol = getInterpolatedIndexOfPositionInWeightMap(endX, this.#runtimeGridColumns);
         const blockEndRow = getInterpolatedIndexOfPositionInWeightMap(endY, this.#runtimeGridRows);
         let newColumnSpan = Math.max(blockEndCol - blockStartCol, 1);
-        const spanOptions = this._host.getRelevantColumnSpanOptions();
-        if (!spanOptions)
+        const columnOptions = this._host.getRelevantColumnSpanOptions();
+        if (!columnOptions)
             return;
         // Find nearest allowed Column:
-        const bestColumnSpanOption = closestColumnSpanOption(newColumnSpan, spanOptions, layoutColumns - blockStartCol);
+        const bestColumnSpanOption = closestColumnSpanOption(newColumnSpan, columnOptions, layoutColumns - blockStartCol);
         newColumnSpan = bestColumnSpanOption ?? layoutColumns;
-        const [rowMinSpan, rowMaxSpan] = this._host.getMinMaxRowSpan();
+        // Find allowed row spans:
+        const minMaxRowSpan = this._host.getMinMaxRowSpan();
+        if (!minMaxRowSpan)
+            return;
+        const [rowMinSpan, rowMaxSpan] = minMaxRowSpan;
         let newRowSpan = Math.round(Math.max(blockEndRow - blockStartRow, rowMinSpan));
         if (rowMaxSpan != null) {
             newRowSpan = Math.min(newRowSpan, rowMaxSpan);

package/dist-cms/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.js

@@ -33,16 +33,16 @@ let UmbPropertyEditorUIBlockGridColumnSpanElement = class UmbPropertyEditorUIBlo
     }
     render() {
         const template = repeat(this._columnsArray, (index) => index, (index) => {
-            const number = index + 1;
+            const colNumber = index + 1;
             let classes = 'default';
             if (this.value && this.value.length > 0) {
-                const applied = this.value.find((column) => column.columnSpan >= index);
-                const picked = this.value.find((column) => column.columnSpan === index);
+                const applied = this.value.find((column) => column.columnSpan >= colNumber);
+                const picked = this.value.find((column) => column.columnSpan === colNumber);
                 classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
             }
             return html `<div class="${classes}" data-index=${index}>
-					<span>${number}</span>
-					<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
+					<span>${colNumber}</span>
+					<button type="button" aria-label=${colNumber} @click=${() => this.#pickColumn(colNumber)}></button>
 				</div>`;
         });
         return html `<div id="wrapper">${template}</div>`;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.js

@@ -17,6 +17,7 @@ export const manifest = {
                     label: 'Amount',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
                     config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
+                    weight: 100,
                 },
             ],
             defaultData: [

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/manifests.js

@@ -17,6 +17,7 @@ export const manifests = [
                         alias: 'blockGroups',
                         label: '',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
+                        weight: 1,
                     },
                     {
                         alias: 'useLiveEditing',
@@ -39,9 +40,12 @@ export const manifests = [
                     {
                         alias: 'gridColumns',
                         label: 'Grid Columns',
-                        description: 'Set the number of columns for the layout. (defaults to 12)',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
-                        config: [{ alias: 'min', value: 0 }],
+                        description: 'Set the number of columns for the layout.',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                        config: [
+                            { alias: 'min', value: 0 },
+                            { alias: 'placeholder', value: '12' },
+                        ],
                     },
                     {
                         alias: 'layoutStylesheet',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.d.ts

@@ -1,7 +1,7 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { type PropertyValueMap } from '../../../../../external/lit/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
-import { type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import type { UmbBlockGridValueModel } from '../../index.js';
 import '../../components/block-grid-entries/index.js';
 /**

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.js

@@ -9,8 +9,9 @@ import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { html, customElement, property, state, css } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UmbPropertyValueChangeEvent, } from '../../../../core/property-editor/index.js';
 import '../../components/block-grid-entries/index.js';
+import { observeMultiple } from '../../../../../libs/observable-api/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 /**
  * @element umb-property-editor-ui-block-grid
  */
@@ -37,8 +38,8 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
         buildUpValue.settingsData ??= [];
         this._value = buildUpValue;
         this.#context.setLayouts(this._value.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS] ?? []);
-        this.#context.setContents(buildUpValue.contentData);
-        this.#context.setSettings(buildUpValue.settingsData);
+        this.#context.setContents(this._value.contentData);
+        this.#context.setSettings(this._value.settingsData);
     }
     get value() {
         return this._value;
@@ -52,30 +53,19 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
             contentData: [],
             settingsData: [],
         };
-        this.#fireChangeEvent = async () => {
-            if (this.#debounceChangeEvent)
-                return;
-            this.#debounceChangeEvent = true;
-            await Promise.resolve();
-            this.dispatchEvent(new UmbPropertyValueChangeEvent());
-            this.#debounceChangeEvent = false;
-        };
-        // TODO: Prevent initial notification from these observes:
-        this.observe(this.#context.layouts, (layouts) => {
-            this._value = { ...this._value, layout: { [UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS]: layouts } };
-            this.#fireChangeEvent();
-        });
-        this.observe(this.#context.contents, (contents) => {
-            this._value = { ...this._value, contentData: contents };
-            this.#fireChangeEvent();
-        });
-        this.observe(this.#context.settings, (settings) => {
-            this._value = { ...this._value, settingsData: settings };
-            this.#fireChangeEvent();
+        // TODO: Prevent initial notification from these observes
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
+            this.observe(observeMultiple([this.#context.layouts, this.#context.contents, this.#context.settings]), ([layouts, contents, settings]) => {
+                this._value = {
+                    ...this._value,
+                    layout: { [UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS]: layouts },
+                    contentData: contents,
+                    settingsData: settings,
+                };
+                propertyContext.setValue(this._value);
+            }, 'motherObserver');
         });
     }
-    #debounceChangeEvent;
-    #fireChangeEvent;
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         this.observe(this.#context.gridColumns, (gridColumns) => {

package/dist-cms/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.js

@@ -34,7 +34,7 @@ let UmbPropertyEditorUIBlockGridLayoutStylesheetElement = class UmbPropertyEdito
 				.min=${0}
 				.max=${1}></umb-input-static-file>
 			<br />
-			<a href="#Missinhg_link_to_default_layout_stylesheet">Link to default layout stylesheet</a>
+			<a href="/umbraco/backoffice/assets/css/umbraco-blockgridlayout.css">Link to default layout stylesheet</a>
 		`;
     }
     static { this.styles = [UmbTextStyles]; }

package/dist-cms/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.d.ts

@@ -1,10 +1,12 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { nothing } from '../../../../../external/lit/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../core/extension-registry/index.js';
 import type { UmbPropertyEditorConfig } from '../../../../core/property-editor/index.js';
 export declare class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
+    _areaColumnsConfigurationObject?: UmbPropertyEditorConfig;
     _areaConfigConfigurationObject?: UmbPropertyEditorConfig;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbBlockGridTypeWorkspaceViewAreasElement;