@umbraco-cms/backoffice 14.2.0 → 14.3.0

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

@@ -1,7 +1,7 @@
 import { UMB_BLOCK_CATALOGUE_MODAL, UmbBlockEntriesContext } from '../../block/index.js';
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT, UMB_BLOCK_GRID_WORKSPACE_MODAL, } from '../index.js';
 import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context-token.js';
-import { UmbArrayState, UmbNumberState, UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbArrayState, UmbBooleanState, UmbNumberState, UmbObjectState, UmbStringState, } from '../../../../libs/observable-api/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
 import { pathFolderName } from '../../../core/utils/index.js';
 export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
@@ -15,6 +15,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     #areaKey;
     #rangeLimits;
     #allowedBlockTypes;
+    #hasTypeLimits;
     firstAllowedBlockTypeName() {
         if (!this._manager) {
             throw new Error('Manager not ready');
@@ -43,6 +44,9 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
         this.#workspaceModal.setUniquePathValue('areaKey', areaKey ?? 'null');
         this.#catalogueModal.setUniquePathValue('areaKey', areaKey ?? 'null');
         this.#gotAreaKey();
+        // Idea: If we need to parse down a validation data path to target the specific layout object: [NL]
+        // If we have a areaKey, we want to inherit our layoutDataPath from nearest blockGridEntry context.
+        // If not, we want to set the layoutDataPath to a base one.
     }
     setLayoutColumns(columns) {
         this.#layoutColumns.setValue(columns);
@@ -50,6 +54,18 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     getLayoutColumns() {
         return this.#layoutColumns.getValue();
     }
+    getMinAllowed() {
+        if (this.#areaKey) {
+            return this.#areaType?.minAllowed ?? 0;
+        }
+        return this._manager?.getMinAllowed() ?? 0;
+    }
+    getMaxAllowed() {
+        if (this.#areaKey) {
+            return this.#areaType?.maxAllowed ?? Infinity;
+        }
+        return this._manager?.getMaxAllowed() ?? Infinity;
+    }
     getLayoutContainerElement() {
         return this.getHostElement().shadowRoot?.querySelector('.umb-block-grid__layout-container');
     }
@@ -63,6 +79,8 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
         this.allowedBlockTypes = this.#allowedBlockTypes.asObservable();
         this.amountOfAllowedBlockTypes = this.#allowedBlockTypes.asObservablePart((x) => x.length);
         this.canCreate = this.#allowedBlockTypes.asObservablePart((x) => x.length > 0);
+        this.#hasTypeLimits = new UmbBooleanState(undefined);
+        this.hasTypeLimits = this.#hasTypeLimits.asObservable();
         this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (blockGridEntry) => {
             this.#parentEntry = blockGridEntry;
             this.#gotBlockParentEntry(); // is not used at this point. [NL]
@@ -78,9 +96,23 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                     blocks: this.#allowedBlockTypes.getValue(),
                     blockGroups: this._manager?.getBlockGroups() ?? [],
                     openClipboard: routingInfo.view === 'clipboard',
-                    blockOriginData: { index: index, areaKey: this.#areaKey, parentUnique: this.#parentUnique },
+                    originData: { index: index, areaKey: this.#areaKey, parentUnique: this.#parentUnique },
+                    createBlockInWorkspace: true,
                 },
             };
+        })
+            .onSubmit(async (value, data) => {
+            if (value?.create && data) {
+                const created = await this.create(value.create.contentElementTypeKey, 
+                // We can parse an empty object, cause the rest will be filled in by others.
+                {}, data.originData);
+                if (created) {
+                    this.insert(created.layout, created.content, created.settings, data.originData);
+                }
+                else {
+                    throw new Error('Failed to create block');
+                }
+            }
         })
             .observeRouteBuilder((routeBuilder) => {
             // TODO: Does it make any sense that this is a state? Check usage and confirm. [NL]
@@ -94,7 +126,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                 data: {
                     entityType: 'block',
                     preset: {},
-                    originData: { areaKey: this.#areaKey, parentUnique: this.#parentUnique },
+                    originData: { areaKey: this.#areaKey, parentUnique: this.#parentUnique, baseDataPath: this._dataPath },
                 },
                 modal: { size: 'medium' },
             };
@@ -107,8 +139,8 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     _gotBlockManager() {
         if (!this._manager)
             return;
-        this.#getAllowedBlockTypes();
-        this.#getRangeLimits();
+        this.#setupAllowedBlockTypes();
+        this.#setupRangeLimits();
         this.observe(this._manager.propertyAlias, (alias) => {
             this.#catalogueModal.setUniquePathValue('propertyAlias', alias ?? 'null');
             this.#workspaceModal.setUniquePathValue('propertyAlias', alias ?? 'null');
@@ -140,7 +172,6 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             this.observe(this.layoutEntries, (layouts) => {
                 this._manager?.setLayouts(layouts);
             }, 'observeThisLayouts');
-            this.removeUmbControllerByAlias('observeAreaType');
             const hostEl = this.getHostElement();
             if (hostEl) {
                 hostEl.removeAttribute('data-area-alias');
@@ -151,8 +182,8 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                 hostEl.style.removeProperty('--umb-block-grid--area-row-span');
             }
             this.removeUmbControllerByAlias('observeAreaType');
-            this.#getAllowedBlockTypes();
-            this.#getRangeLimits();
+            this.#setupAllowedBlockTypes();
+            this.#setupRangeLimits();
         }
         else {
             if (!this.#parentEntry)
@@ -181,21 +212,41 @@ 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();
-                this.#getRangeLimits();
+                this.#setupAllowedBlockTypes();
+                this.#setupRangeLimits();
             }, 'observeAreaType');
         }
     }
-    #getAllowedBlockTypes() {
+    #setupAllowedBlockTypes() {
         if (!this._manager)
             return;
         this.#allowedBlockTypes.setValue(this.#retrieveAllowedElementTypes());
+        this.#setupAllowedBlockTypesLimits();
     }
-    #getRangeLimits() {
+    #setupRangeLimits() {
         if (!this._manager)
             return;
-        const range = this.#retrieveRangeLimits();
-        this.#rangeLimits.setValue(range);
+        //const range = this.#retrieveRangeLimits();
+        if (this.#areaKey != null) {
+            this.removeUmbControllerByAlias('observeConfigurationRootLimits');
+            // Area entries:
+            if (!this.#areaType)
+                return undefined;
+            // No need to observe as this method is called every time the area is changed.
+            this.#rangeLimits.setValue({
+                min: this.#areaType.minAllowed ?? 0,
+                max: this.#areaType.maxAllowed ?? Infinity,
+            });
+        }
+        else if (this.#areaKey === null) {
+            if (!this._manager)
+                return undefined;
+            this.observe(this._manager.editorConfiguration, (config) => {
+                const min = config?.getValueByAlias('validationLimit')?.min ?? 0;
+                const max = config?.getValueByAlias('validationLimit')?.max ?? Infinity;
+                this.#rangeLimits.setValue({ min, max });
+            }, 'observeConfigurationRootLimits');
+        }
     }
     getPathForCreateBlock(index) {
         return this._catalogueRouteBuilderState.getValue()?.({ view: 'create', index: index });
@@ -216,15 +267,15 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
         }
     }
     */
-    async create(contentElementTypeKey, partialLayoutEntry, modalData) {
+    async create(contentElementTypeKey, partialLayoutEntry, originData) {
         await this._retrieveManager;
-        return this._manager?.create(contentElementTypeKey, partialLayoutEntry, modalData);
+        return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData);
     }
     // insert Block?
-    async insert(layoutEntry, content, settings, modalData) {
+    async insert(layoutEntry, content, settings, originData) {
         await this._retrieveManager;
         // TODO: Insert layout entry at the right spot.
-        return this._manager?.insert(layoutEntry, content, settings, modalData) ?? false;
+        return this._manager?.insert(layoutEntry, content, settings, originData) ?? false;
     }
     // create Block?
     async delete(contentUdi) {
@@ -268,24 +319,83 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     }
     /**
      * @internal
-     * @returns an NumberRange of the min and max allowed items in the current area. Or undefined if not ready jet.
      */
-    #retrieveRangeLimits() {
-        if (this.#areaKey != null) {
+    #setupAllowedBlockTypesLimits() {
+        if (!this._manager)
+            return;
+        if (this.#areaKey) {
             // Area entries:
             if (!this.#areaType)
-                return undefined;
-            return { min: this.#areaType.minAllowed ?? 0, max: this.#areaType.maxAllowed ?? Infinity };
+                return;
+            if (this.#areaType.specifiedAllowance && this.#areaType.specifiedAllowance?.length > 0) {
+                this.#hasTypeLimits.setValue(true);
+            }
         }
         else if (this.#areaKey === null) {
-            if (!this._manager)
-                return undefined;
-            const config = this._manager.getEditorConfiguration();
-            const min = config?.getValueByAlias('validationLimit')?.min ?? 0;
-            const max = config?.getValueByAlias('validationLimit')?.max ?? Infinity;
-            return { min, max };
+            // RESET
         }
-        return undefined;
+    }
+    #invalidBlockTypeLimits;
+    getInvalidBlockTypeLimits() {
+        return this.#invalidBlockTypeLimits ?? [];
+    }
+    /**
+     * @internal
+     * @returns {boolean} - True if the block type limits are valid, otherwise false.
+     */
+    checkBlockTypeLimitsValidity() {
+        if (!this.#areaType || !this.#areaType.specifiedAllowance)
+            return false;
+        const layoutEntries = this._layoutEntries.getValue();
+        this.#invalidBlockTypeLimits = this.#areaType.specifiedAllowance
+            .map((rule) => {
+            const minAllowed = rule.minAllowed || 0;
+            const maxAllowed = rule.maxAllowed || 0;
+            // For block groups:
+            if (rule.groupKey) {
+                const groupElementTypeKeys = this._manager
+                    ?.getBlockTypes()
+                    .filter((blockType) => blockType.groupKey === rule.groupKey && blockType.allowInAreas === true)
+                    .map((x) => x.contentElementTypeKey) ?? [];
+                const groupAmount = layoutEntries.filter((entry) => {
+                    const contentTypeKey = this._manager.getContentTypeKeyOfContentUdi(entry.contentUdi);
+                    return contentTypeKey ? groupElementTypeKeys.indexOf(contentTypeKey) !== -1 : false;
+                }).length;
+                if (groupAmount < minAllowed || (maxAllowed > 0 && groupAmount > maxAllowed)) {
+                    return {
+                        groupKey: rule.groupKey,
+                        name: this._manager.getBlockGroupName(rule.groupKey) ?? '?',
+                        amount: groupAmount,
+                        minRequirement: minAllowed,
+                        maxRequirement: maxAllowed,
+                    };
+                }
+                return undefined;
+            }
+            // For specific elementTypes:
+            else if (rule.elementTypeKey) {
+                const amount = layoutEntries.filter((entry) => {
+                    const contentTypeKey = this._manager.getContentOf(entry.contentUdi)?.contentTypeKey;
+                    return contentTypeKey === rule.elementTypeKey;
+                }).length;
+                if (amount < minAllowed || (maxAllowed > 0 ? amount > maxAllowed : false)) {
+                    return {
+                        key: rule.elementTypeKey,
+                        name: this._manager.getContentTypeNameOf(rule.elementTypeKey) ?? '?',
+                        amount: amount,
+                        minRequirement: minAllowed,
+                        maxRequirement: maxAllowed,
+                    };
+                }
+                return undefined;
+            }
+            // Lets fail cause the rule was bad.
+            console.error('Invalid block type limit rule.', rule);
+            return undefined;
+        })
+            .filter((x) => x !== undefined);
+        const hasInvalidRules = this.#invalidBlockTypeLimits.length > 0;
+        return hasInvalidRules === false;
     }
     /**
      * Check if given contentUdi is allowed in the current area.

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

@@ -1,5 +1,5 @@
 import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
-import type { UmbBlockGridWorkspaceData } from '../index.js';
+import type { UmbBlockGridWorkspaceOriginData } from '../index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 import { type UmbBlockDataType, UmbBlockManagerContext } from '../../block/index.js';
@@ -8,16 +8,19 @@ export declare const UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET = "/umbraco/backof
 /**
  * A implementation of the Block Manager specifically for the Block Grid Editor.
  */
-export declare class UmbBlockGridManagerContext<BlockLayoutType extends UmbBlockGridLayoutModel = UmbBlockGridLayoutModel> extends UmbBlockManagerContext<UmbBlockGridTypeModel, UmbBlockGridLayoutModel> {
+export declare class UmbBlockGridManagerContext<BlockLayoutType extends UmbBlockGridLayoutModel = UmbBlockGridLayoutModel> extends UmbBlockManagerContext<UmbBlockGridTypeModel, UmbBlockGridLayoutModel, UmbBlockGridWorkspaceOriginData> {
     #private;
     readonly blockGroups: import("rxjs/internal/Observable").Observable<UmbBlockTypeGroup[]>;
     layoutStylesheet: import("rxjs/internal/Observable").Observable<string | undefined>;
     gridColumns: import("rxjs/internal/Observable").Observable<number>;
+    getMinAllowed(): number;
+    getMaxAllowed(): number;
     setEditorConfiguration(configs: UmbPropertyEditorConfigCollection): void;
     setBlockGroups(blockGroups: Array<UmbBlockTypeGroup>): void;
     getBlockGroups(): UmbBlockTypeGroup[];
+    getBlockGroupName(unique: string): string | undefined;
     constructor(host: UmbControllerHost);
-    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, modalData?: UmbBlockGridWorkspaceData): {
+    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, originData?: UmbBlockGridWorkspaceOriginData): {
         layout: UmbBlockGridLayoutModel;
         content: {
             udi: string;
@@ -25,8 +28,8 @@ export declare class UmbBlockGridManagerContext<BlockLayoutType extends UmbBlock
         };
         settings: UmbBlockDataType | undefined;
     };
-    insert(layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, modalData: UmbBlockGridWorkspaceData): boolean;
-    setOneLayout(layoutEntry: BlockLayoutType, modalData?: UmbBlockGridWorkspaceData): void;
+    insert(layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, originData: UmbBlockGridWorkspaceOriginData): boolean;
+    setOneLayout(layoutEntry: BlockLayoutType, originData?: UmbBlockGridWorkspaceOriginData): void;
     onDragStart(): void;
     onDragEnd(): void;
 }

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

@@ -1,5 +1,5 @@
 import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '../../../../libs/observable-api/index.js';
-import { removeInitialSlashFromPath, transformServerPathToClientPath } from '../../../core/utils/index.js';
+import { removeLastSlashFromPath, transformServerPathToClientPath } from '../../../core/utils/index.js';
 import { UMB_APP_CONTEXT } from '../../../../apps/app/index.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
 export const UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET = '/umbraco/backoffice/css/umbraco-blockgridlayout.css';
@@ -11,6 +11,12 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     #initAppUrl;
     #appUrl;
     #blockGroups;
+    getMinAllowed() {
+        return this._editorConfiguration.getValue()?.getValueByAlias('validationLimit')?.min ?? 0;
+    }
+    getMaxAllowed() {
+        return (this._editorConfiguration.getValue()?.getValueByAlias('validationLimit')?.max ?? Infinity);
+    }
     setEditorConfiguration(configs) {
         this.#initAppUrl.then(() => {
             // we await initAppUrl, So the appUrl begin here is available when retrieving the layoutStylesheet.
@@ -23,6 +29,9 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     getBlockGroups() {
         return this.#blockGroups.value;
     }
+    getBlockGroupName(unique) {
+        return this.#blockGroups.getValue().find((group) => group.key === unique)?.name;
+    }
     constructor(host) {
         super(host);
         this.#blockGroups = new UmbArrayState([], (x) => x.key);
@@ -35,7 +44,7 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
                 return UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET;
             if (layoutStylesheet) {
                 // Cause we await initAppUrl in setting the _editorConfiguration, we can trust the appUrl begin here.
-                return this.#appUrl + removeInitialSlashFromPath(transformServerPathToClientPath(layoutStylesheet));
+                return removeLastSlashFromPath(this.#appUrl) + transformServerPathToClientPath(layoutStylesheet);
             }
             return undefined;
         });
@@ -48,9 +57,9 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
         });
     }
     create(contentElementTypeKey, partialLayoutEntry, 
-    // TODO: [v15] Ignore unused parameter to avoid breaking changes
+    // This property is used by some implementations, but not used in this.
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    modalData) {
+    originData) {
         return super.createBlockData(contentElementTypeKey, partialLayoutEntry);
     }
     /**
@@ -106,16 +115,16 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
         return undefined;
     }
     // TODO: Remove dependency on modalData object here. [NL] Maybe change it into requiring the originData object instead.
-    insert(layoutEntry, content, settings, modalData) {
-        this.setOneLayout(layoutEntry, modalData);
-        this.insertBlockData(layoutEntry, content, settings, modalData);
+    insert(layoutEntry, content, settings, originData) {
+        this.setOneLayout(layoutEntry, originData);
+        this.insertBlockData(layoutEntry, content, settings, originData);
         return true;
     }
-    setOneLayout(layoutEntry, modalData) {
-        const index = modalData?.originData.index ?? -1;
-        if (modalData?.originData.parentUnique && modalData?.originData.areaKey) {
+    setOneLayout(layoutEntry, originData) {
+        const index = originData?.index ?? -1;
+        if (originData?.parentUnique && originData?.areaKey) {
             // Find layout entry based on parentUnique, recursively, as it needs to check layout of areas as well:
-            const layoutEntries = this.#appendLayoutEntryToArea(layoutEntry, this._layouts.getValue(), modalData.originData.parentUnique, modalData.originData.areaKey, index);
+            const layoutEntries = this.#appendLayoutEntryToArea(layoutEntry, this._layouts.getValue(), originData?.parentUnique, originData?.areaKey, index);
             // If this appending was successful, we got a new set of layout entries which we can set as the new value: [NL]
             if (layoutEntries) {
                 this._layouts.setValue(layoutEntries);

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

@@ -98,10 +98,7 @@ let UmbPropertyEditorUIBlockGridAreasConfigElement = class UmbPropertyEditorUIBl
 									.areaGridColumns=${this._areaGridColumns}
 									.key=${area.key}></umb-block-area-config-entry>`)}
 					</div>
-					<uui-button
-						look="placeholder"
-						label=${'Add area'}
-						href=${this._workspacePath + 'create'}></uui-button>`
+					<uui-button look="placeholder" label=${'Add area'} href=${this._workspacePath + 'create'}></uui-button>`
             : '';
     }
 };

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

@@ -4,33 +4,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
+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 { html, customElement, property, state, css, ref, } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/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';
-import { UmbFormControlMixin } from '../../../../core/validation/index.js';
-import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
-import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
+import { UmbFormControlMixin, UmbValidationContext } from '../../../../core/validation/index.js';
+import { UmbBlockElementDataValidationPathTranslator } from '../../../block/index.js';
 /**
  * @element umb-property-editor-ui-block-grid
  */
 let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElement extends UmbFormControlMixin(UmbLitElement) {
+    #validationContext;
+    #contentDataPathTranslator;
+    #settingsDataPathTranslator;
     #context;
     set config(config) {
         if (!config)
             return;
-        /*const validationLimit = config.getValueByAlias<NumberRangeValueType>('validationLimit');
-
-        this.#limitMin = validationLimit?.min;
-        this.#limitMax = validationLimit?.max;*/
         const blocks = config.getValueByAlias('blocks') ?? [];
         this.#context.setBlockTypes(blocks);
         const blockGroups = config.getValueByAlias('blockGroups') ?? [];
         this.#context.setBlockGroups(blockGroups);
         this.style.maxWidth = config.getValueByAlias('maxPropertyWidth') ?? '';
-        //config.useLiveEditing, is covered by the EditorConfiguration of context.
+        //config.useLiveEditing, is covered by the EditorConfiguration of context. [NL]
         this.#context.setEditorConfiguration(config);
     }
     set value(value) {
@@ -48,6 +48,7 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
     }
     constructor() {
         super();
+        this.#validationContext = new UmbValidationContext(this);
         this.#context = new UmbBlockGridManagerContext(this);
         //
         this._value = {
@@ -55,6 +56,19 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
             contentData: [],
             settingsData: [],
         };
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
+            this.observe(context.dataPath, (dataPath) => {
+                // Translate paths for content/settings:
+                this.#contentDataPathTranslator?.destroy();
+                this.#settingsDataPathTranslator?.destroy();
+                if (dataPath) {
+                    // Set the data path for the local validation context:
+                    this.#validationContext.setDataPath(dataPath);
+                    this.#contentDataPathTranslator = new UmbBlockElementDataValidationPathTranslator(this, 'contentData');
+                    this.#settingsDataPathTranslator = new UmbBlockElementDataValidationPathTranslator(this, 'settingsData');
+                }
+            }, 'observeDataPath');
+        });
         // 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]) => {
@@ -77,8 +91,21 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
             }
         });
     }
+    #currentEntriesElement;
+    #gotRootEntriesElement(element) {
+        if (this.#currentEntriesElement === element)
+            return;
+        if (this.#currentEntriesElement) {
+            this.removeFormControlElement(this.#currentEntriesElement);
+        }
+        this.#currentEntriesElement = element;
+        if (element) {
+            this.addFormControlElement(element);
+        }
+    }
     render() {
         return html ` <umb-block-grid-entries
+			${ref(this.#gotRootEntriesElement)}
 			.areaKey=${null}
 			.layoutColumns=${this._layoutColumns}></umb-block-grid-entries>`;
     }

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

@@ -108,9 +108,12 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
             const newGroupKey = element.getAttribute('data-umb-group-key');
             const movedItem = e.detail?.item;
             // Check if item moved back to original group...
-            movedItem.groupKey === newGroupKey
-                ? (this.#moveData = undefined)
-                : (this.#moveData = value.map((block) => ({ ...block, groupKey: newGroupKey })));
+            if (movedItem.groupKey === newGroupKey) {
+                this.#moveData = undefined;
+            }
+            else {
+                this.#moveData = value.map((block) => ({ ...block, groupKey: newGroupKey }));
+            }
         }
         else if (e.detail?.moveComplete) {
             // Move complete, get the blocks that were in an untouched group
@@ -128,9 +131,9 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
             this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + (groupKey ?? null));
         }
     }
-    // TODO: Implement confirm dialog
+    // TODO: Implement confirm dialog [NL]
     #deleteGroup(groupKey) {
-        // TODO: make one method for updating the blockGroupsDataSetValue:
+        // TODO: make one method for updating the blockGroupsDataSetValue: [NL]
         // This one that deletes might require the ability to parse what to send as an argument to the method, then a filtering can occur before.
         this.#datasetContext?.setPropertyValue('blockGroups', this.#blockGroups?.filter((group) => group.key !== groupKey));
         // If a group is deleted, Move the blocks to no group:
@@ -138,7 +141,7 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
     }
     #changeGroupName(e, groupKey) {
         const groupName = e.target.value;
-        // TODO: make one method for updating the blockGroupsDataSetValue:
+        // TODO: make one method for updating the blockGroupsDataSetValue: [NL]
         this.#datasetContext?.setPropertyValue('blockGroups', this.#blockGroups?.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)));
     }
     render() {

package/dist-cms/packages/block/block-grid/workspace/block-grid-type-workspace.modal-token.js

@@ -5,5 +5,5 @@ export const UMB_BLOCK_GRID_TYPE_WORKSPACE_MODAL = new UmbModalToken('Umb.Modal.
         type: 'sidebar',
         size: 'large',
     },
-    data: { entityType: UMB_BLOCK_GRID_TYPE, preset: { allowAtRoot: true } },
+    data: { entityType: UMB_BLOCK_GRID_TYPE, preset: { allowAtRoot: true, allowInAreas: true } },
 });

package/dist-cms/packages/block/block-grid/workspace/block-grid-workspace.modal-token.d.ts

@@ -1,7 +1,7 @@
-import type { UmbBlockWorkspaceData } from '../../block/index.js';
+import type { UmbBlockWorkspaceData, UmbBlockWorkspaceOriginData } from '../../block/index.js';
 import type { UmbWorkspaceModalData, UmbWorkspaceModalValue } from '../../../core/modal/index.js';
 import { UmbModalToken } from '../../../core/modal/index.js';
-export interface UmbBlockGridWorkspaceOriginData {
+export interface UmbBlockGridWorkspaceOriginData extends UmbBlockWorkspaceOriginData {
     index: number;
     parentUnique: string | null;
     areaKey?: string;

package/dist-cms/packages/block/block-grid/workspace/block-grid-workspace.modal-token.js

@@ -4,5 +4,10 @@ export const UMB_BLOCK_GRID_WORKSPACE_MODAL = new UmbModalToken('Umb.Modal.Works
         type: 'sidebar',
         size: 'medium',
     },
-    data: { entityType: 'block', preset: {}, originData: { index: -1, parentUnique: null } },
+    data: {
+        entityType: 'block',
+        preset: {},
+        originData: { index: -1, parentUnique: null },
+        baseDataPath: undefined,
+    },
 });

package/dist-cms/packages/block/block-list/components/block-list-entry/block-list-entry.element.d.ts

@@ -1,8 +1,8 @@
+import { type UmbBlockListLayoutModel } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbBlockEditorCustomViewProperties, UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
 import '../ref-list-block/index.js';
 import '../inline-list-block/index.js';
-import { type UmbBlockListLayoutModel } from '../../types.js';
 /**
  * @element umb-block-list-entry
  */
@@ -13,6 +13,13 @@ export declare class UmbBlockListEntryElement extends UmbLitElement implements U
     get contentUdi(): string | undefined;
     set contentUdi(value: string | undefined);
     private _contentUdi?;
+    /**
+     * Sets the element to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
     _contentTypeAlias?: string;
     _showContentEdit: boolean;
     _hasSettings: boolean;
@@ -21,6 +28,8 @@ export declare class UmbBlockListEntryElement extends UmbLitElement implements U
     _workspaceEditContentPath?: string;
     _workspaceEditSettingsPath?: string;
     _inlineEditingMode?: boolean;
+    _contentInvalid?: boolean;
+    _settingsInvalid?: boolean;
     _blockViewProps: UmbBlockEditorCustomViewProperties<UmbBlockListLayoutModel>;
     constructor();
     connectedCallback(): void;