@umbraco-cms/backoffice 14.2.0 → 14.3.0

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

@@ -1,13 +1,14 @@
 import { UMB_BLOCK_MANAGER_CONTEXT } from './block-manager.context-token.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
-import { UmbArrayState, UmbClassState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbArrayState, UmbBooleanState, UmbClassState, UmbStringState } from '../../../../libs/observable-api/index.js';
 import { UmbDocumentTypeDetailRepository } from '../../../documents/document-types/index.js';
 import { UmbId } from '../../../core/id/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../../core/property/index.js';
 /**
  *
- * @param entityType
- * @param guid
+ * @param {string} entityType - The entity type
+ * @param {string} guid - The entity
+ * @returns {string} UDI in the format `umb://<entityType>/<guid>`
  */
 function buildUdi(entityType, guid) {
     return `umb://${entityType}/${guid.replace(/-/g, '')}`;
@@ -25,16 +26,11 @@ export class UmbBlockManagerContext extends UmbContextBase {
     #blockTypes;
     #contents;
     #settings;
-    // TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..)
-    /*setPropertyAlias(alias: string) {
-        this.#propertyAlias.setValue(alias);
-        this.#workspaceModal.setUniquePathValue('propertyAlias', alias);
-    }
-    getPropertyAlias() {
-        this.#propertyAlias.value;
-    }*/
     setEditorConfiguration(configs) {
         this._editorConfiguration.setValue(configs);
+        if (this._liveEditingMode.getValue() === undefined) {
+            this._liveEditingMode.setValue(configs.getValueByAlias('liveEditingMode'));
+        }
     }
     getEditorConfiguration() {
         return this._editorConfiguration.getValue();
@@ -68,6 +64,8 @@ export class UmbBlockManagerContext extends UmbContextBase {
         this.blockTypes = this.#blockTypes.asObservable();
         this._editorConfiguration = new UmbClassState(undefined);
         this.editorConfiguration = this._editorConfiguration.asObservable();
+        this._liveEditingMode = new UmbBooleanState(undefined);
+        this.liveEditingMode = this._liveEditingMode.asObservable();
         this._layouts = new UmbArrayState([], (x) => x.contentUdi);
         this.layouts = this._layouts.asObservable();
         this.#contents = new UmbArrayState([], (x) => x.udi);
@@ -105,6 +103,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
         // TODO: Revisit if this is right to do. Notice this can potentially be proxied to the global store. In that way we do not need to observe and we can just use the global store for data.
         this.#contentTypes.appendOne(data);
     }
+    getContentTypeKeyOfContentUdi(contentUdi) {
+        return this.getContentOf(contentUdi)?.contentTypeKey;
+    }
     contentTypeOf(contentTypeKey) {
         return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey));
     }
@@ -114,6 +115,10 @@ export class UmbBlockManagerContext extends UmbContextBase {
     getContentTypeNameOf(contentTypeKey) {
         return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name;
     }
+    getContentTypeHasProperties(contentTypeKey) {
+        const properties = this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.properties;
+        return properties ? properties.length > 0 : false;
+    }
     blockTypeOf(contentTypeKey) {
         return this.#blockTypes.asObservablePart((source) => source.find((x) => x.contentElementTypeKey === contentTypeKey));
     }
@@ -134,7 +139,7 @@ export class UmbBlockManagerContext extends UmbContextBase {
     }
     // TODO: [v15]: ignoring unused var here here to prevent a breaking change
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setOneLayout(layoutData, modalData) {
+    setOneLayout(layoutData, originData) {
         this._layouts.appendOne(layoutData);
     }
     setOneContent(contentData) {
@@ -206,7 +211,7 @@ export class UmbBlockManagerContext extends UmbContextBase {
     insertBlockData(layoutEntry, content, settings, 
     // TODO: [v15]: ignoring unused var here here to prevent a breaking change
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    modalData) {
+    originData) {
         // Create content entry:
         if (layoutEntry.contentUdi) {
             this.#contents.appendOne(content);

package/dist-cms/packages/block/block/index.d.ts

@@ -1,4 +1,5 @@
 export * from './context/index.js';
 export * from './modals/index.js';
 export * from './types.js';
+export * from './validation/index.js';
 export * from './workspace/index.js';

package/dist-cms/packages/block/block/index.js

@@ -1,4 +1,5 @@
 export * from './context/index.js';
 export * from './modals/index.js';
 export * from './types.js';
+export * from './validation/index.js';
 export * from './workspace/index.js';

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.d.ts

@@ -1,13 +1,13 @@
-import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue } from '../../index.js';
+import { UMB_BLOCK_MANAGER_CONTEXT, type UmbBlockCatalogueModalData, type UmbBlockCatalogueModalValue } from '../../index.js';
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
 import '../../../block-type/index.js';
 export declare class UmbBlockCatalogueModalElement extends UmbModalBaseElement<UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue> {
     #private;
-    private _search;
     private _groupedBlocks;
     private _openClipboard?;
     private _workspacePath?;
     private _filtered;
+    _manager?: typeof UMB_BLOCK_MANAGER_CONTEXT.TYPE;
     constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.js

@@ -5,33 +5,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
+import { UMB_BLOCK_MANAGER_CONTEXT, } from '../../index.js';
 import { css, html, customElement, state, repeat, nothing } from '../../../../../external/lit/index.js';
 import { UMB_MODAL_CONTEXT, UmbModalBaseElement } from '../../../../core/modal/index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 // TODO: This is across packages, how should we go about getting just a single element from another package? like here we just need the umb-block-type-card element
 import '../../../block-type/index.js';
 let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends UmbModalBaseElement {
+    #search;
     constructor() {
         super();
-        //
-        this._search = '';
+        this.#search = '';
         this._groupedBlocks = [];
         this._filtered = [];
         this.consumeContext(UMB_MODAL_CONTEXT, (modalContext) => {
-            new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL)
-                //.addAdditionalPath('block') // No need for additional path specification in this context as this is for sure the only workspace we want to open here.
-                .onSetup(() => {
-                return {
-                    data: { preset: {}, originData: modalContext.data.blockOriginData },
-                };
-            })
-                .onSubmit(() => {
-                // When workspace is submitted, we want to close this modal.
-                this.modalContext?.submit();
-            })
-                .observeRouteBuilder((routeBuilder) => {
-                this._workspacePath = routeBuilder({});
-            });
+            if (modalContext.data.createBlockInWorkspace) {
+                new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL)
+                    //.addAdditionalPath('block') // No need for additional path specification in this context as this is for sure the only workspace we want to open here.
+                    .onSetup(() => {
+                    return {
+                        data: { preset: {}, originData: modalContext.data.originData },
+                    };
+                })
+                    .onSubmit(() => {
+                    // When workspace is submitted, we want to close this modal.
+                    this.modalContext?.submit();
+                })
+                    .observeRouteBuilder((routeBuilder) => {
+                    this._workspacePath = routeBuilder({});
+                });
+            }
+        });
+        this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => {
+            this._manager = manager;
         });
     }
     connectedCallback() {
@@ -50,24 +56,32 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         this.#updateFiltered();
     }
     #updateFiltered() {
-        if (this._search.length === 0) {
+        if (this.#search.length === 0) {
             this._filtered = this._groupedBlocks;
         }
         else {
-            const search = this._search.toLowerCase();
+            const search = this.#search.toLowerCase();
             this._filtered = this._groupedBlocks.map((group) => {
                 return { ...group, blocks: group.blocks.filter((block) => block.label?.toLocaleLowerCase().includes(search)) };
             });
         }
     }
     #onSearch(e) {
-        this._search = e.target.value;
+        this.#search = e.target.value;
         this.#updateFiltered();
     }
+    #chooseBlock(contentElementTypeKey) {
+        this.value = {
+            create: {
+                contentElementTypeKey,
+            },
+        };
+        this.modalContext?.submit();
+    }
     render() {
         return html `
 			<umb-body-layout headline="${this.localize.term('blockEditor_addBlock')}">
-				${this.#renderViews()} ${this._openClipboard ? this.#renderClipboard() : this.#renderCreateEmpty()}
+				${this.#renderViews()}${this.#renderMain()}
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					<uui-button
@@ -79,6 +93,9 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
 			</umb-body-layout>
 		`;
     }
+    #renderMain() {
+        return this._manager ? (this._openClipboard ? this.#renderClipboard() : this.#renderCreateEmpty()) : nothing;
+    }
     #renderClipboard() {
         return html `Clipboard`;
     }
@@ -102,7 +119,10 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
 									.iconColor=${block.iconColor}
 									.backgroundColor=${block.backgroundColor}
 									.contentElementTypeKey=${block.contentElementTypeKey}
-									.href="${this._workspacePath}create/${block.contentElementTypeKey}">
+									@open=${() => this.#chooseBlock(block.contentElementTypeKey)}
+									.href=${this._workspacePath && this._manager.getContentTypeHasProperties(block.contentElementTypeKey)
+            ? `${this._workspacePath}create/${block.contentElementTypeKey}`
+            : undefined}>
 								</umb-block-type-card>
 							`)}
 					</div>
@@ -162,6 +182,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockCatalogueModalElement.prototype, "_filtered", void 0);
+__decorate([
+    state()
+], UmbBlockCatalogueModalElement.prototype, "_manager", void 0);
 UmbBlockCatalogueModalElement = __decorate([
     customElement('umb-block-catalogue-modal')
 ], UmbBlockCatalogueModalElement);

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.d.ts

@@ -5,8 +5,13 @@ import type { UmbBlockTypeGroup } from '../../../block-type/index.js';
 export interface UmbBlockCatalogueModalData {
     blocks: Array<UmbBlockTypeBaseModel>;
     blockGroups?: Array<UmbBlockTypeGroup>;
+    createBlockInWorkspace?: boolean;
     openClipboard?: boolean;
-    blockOriginData: UmbBlockWorkspaceData['originData'];
+    originData: UmbBlockWorkspaceData['originData'];
 }
-export type UmbBlockCatalogueModalValue = never;
-export declare const UMB_BLOCK_CATALOGUE_MODAL: UmbModalToken<UmbBlockCatalogueModalData, undefined>;
+export type UmbBlockCatalogueModalValue = {
+    create?: {
+        contentElementTypeKey: string;
+    };
+} | undefined;
+export declare const UMB_BLOCK_CATALOGUE_MODAL: UmbModalToken<UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue>;

package/dist-cms/packages/block/block/validation/block-data-property-validation-path-translator.controller.d.ts

@@ -0,0 +1,6 @@
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import { UmbValidationPathTranslatorBase } from '../../../core/validation/index.js';
+export declare class UmbBlockElementDataValidationPathTranslator extends UmbValidationPathTranslatorBase {
+    constructor(host: UmbControllerHost);
+    translate(path: string): string | false | undefined;
+}

package/dist-cms/packages/block/block/validation/block-data-property-validation-path-translator.controller.js

@@ -0,0 +1,20 @@
+import { GetPropertyNameFromPath, UmbDataPathPropertyValueQuery, UmbValidationPathTranslatorBase, } from '../../../core/validation/index.js';
+export class UmbBlockElementDataValidationPathTranslator extends UmbValidationPathTranslatorBase {
+    constructor(host) {
+        super(host);
+    }
+    translate(path) {
+        if (!this._context)
+            return;
+        if (path.indexOf('$.') !== 0) {
+            // We do not handle this path.
+            return false;
+        }
+        const rest = path.substring(2);
+        const key = GetPropertyNameFromPath(rest);
+        const specificValue = { alias: key };
+        // replace the values[ number ] with JSON-Path filter values[@.(...)], continues by the rest of the path:
+        //return '$.values' + UmbVariantValuesValidationPathTranslator(specificValue) + path.substring(path.indexOf(']'));
+        return '$.values[' + UmbDataPathPropertyValueQuery(specificValue) + '.value';
+    }
+}

package/dist-cms/packages/block/block/validation/block-data-validation-path-translator.controller.d.ts

@@ -0,0 +1,7 @@
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import { UmbAbstractArrayValidationPathTranslator } from '../../../core/validation/index.js';
+export declare class UmbBlockElementDataValidationPathTranslator extends UmbAbstractArrayValidationPathTranslator {
+    #private;
+    constructor(host: UmbControllerHost, propertyName: 'contentData' | 'settingsData');
+    getDataFromIndex(index: number): any;
+}

package/dist-cms/packages/block/block/validation/block-data-validation-path-translator.controller.js

@@ -0,0 +1,20 @@
+import { UmbDataPathBlockElementDataQuery } from './data-path-element-data-query.function.js';
+import { UmbAbstractArrayValidationPathTranslator } from '../../../core/validation/index.js';
+export class UmbBlockElementDataValidationPathTranslator extends UmbAbstractArrayValidationPathTranslator {
+    #propertyName;
+    constructor(host, propertyName) {
+        super(host, '$.' + propertyName + '[', UmbDataPathBlockElementDataQuery);
+        this.#propertyName = propertyName;
+    }
+    getDataFromIndex(index) {
+        if (!this._context)
+            return;
+        const data = this._context.getTranslationData();
+        const entry = data[this.#propertyName][index];
+        if (!entry || !entry.udi) {
+            console.log('block did not have UDI', this.#propertyName, index, data);
+            return false;
+        }
+        return entry;
+    }
+}

package/dist-cms/packages/block/block/validation/data-path-element-data-query.function.d.ts

@@ -0,0 +1,9 @@
+import type { UmbBlockDataType } from '../types.js';
+/**
+ * Validation Data Path Query generator for Block Element Data.
+ * write a JSON-Path filter similar to `?(@.udi = 'my-udi://1234')`
+ * @param udi {string} - The udi of the block Element data.
+ * @param data {{udi: string}} - A data object with the udi property.
+ * @returns
+ */
+export declare function UmbDataPathBlockElementDataQuery(data: Pick<UmbBlockDataType, 'udi'>): string;

package/dist-cms/packages/block/block/validation/data-path-element-data-query.function.js

@@ -0,0 +1,13 @@
+/**
+ * Validation Data Path Query generator for Block Element Data.
+ * write a JSON-Path filter similar to `?(@.udi = 'my-udi://1234')`
+ * @param udi {string} - The udi of the block Element data.
+ * @param data {{udi: string}} - A data object with the udi property.
+ * @returns
+ */
+export function UmbDataPathBlockElementDataQuery(data) {
+    // write a array of strings for each property, where alias must be present and culture and segment are optional
+    //const filters: Array<string> = [`@.udi = '${udi}'`];
+    //return `?(${filters.join(' && ')})`;
+    return `?(@.udi = '${data.udi}')`;
+}

package/dist-cms/packages/block/block/validation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './block-data-validation-path-translator.controller.js';
+export * from './data-path-element-data-query.function.js';

package/dist-cms/packages/block/block/validation/index.js

@@ -0,0 +1,2 @@
+export * from './block-data-validation-path-translator.controller.js';
+export * from './data-path-element-data-query.function.js';

package/dist-cms/packages/block/block/workspace/block-element-manager.d.ts

@@ -3,26 +3,46 @@ import { UmbBlockElementPropertyDatasetContext } from './block-element-property-
 import type { UmbContentTypeModel } from '../../../core/content-type/index.js';
 import { UmbContentTypeStructureManager } from '../../../core/content-type/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
-import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { type UmbClassInterface, UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbVariantId } from '../../../core/variant/index.js';
+import { UmbValidationController } from '../../../core/validation/index.js';
 export declare class UmbBlockElementManager extends UmbControllerBase {
     #private;
     readonly data: import("rxjs/internal/Observable").Observable<UmbBlockDataType | undefined>;
+    readonly variantId: import("rxjs/internal/Observable").Observable<UmbVariantId | undefined>;
     readonly unique: import("rxjs/internal/Observable").Observable<string | undefined>;
     readonly contentTypeId: import("rxjs/internal/Observable").Observable<string | undefined>;
     readonly structure: UmbContentTypeStructureManager<UmbContentTypeModel>;
-    constructor(host: UmbControllerHost);
+    readonly validation: UmbValidationController;
+    constructor(host: UmbControllerHost, dataPathPropertyName: string);
     reset(): void;
+    setVariantId(variantId: UmbVariantId | undefined): void;
     setData(data: UmbBlockDataType | undefined): void;
     getData(): UmbBlockDataType | undefined;
     getUnique(): string | undefined;
     getEntityType(): string;
     getContentTypeId(): string | undefined;
+    propertyVariantId(propertyAlias: string): Promise<import("rxjs/internal/Observable").Observable<UmbVariantId | undefined>>;
+    /**
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
+     */
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: string): Promise<import("rxjs/internal/Observable").Observable<ReturnType>>;
     getPropertyValue<ReturnType = unknown>(propertyAlias: string): Promise<ReturnType>;
+    /**
+     * @function setPropertyValue
+     * @param {string} alias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
     setPropertyValue(alias: string, value: unknown): Promise<void>;
     initiatePropertyValueChange(): void;
     finishPropertyValueChange: () => void;
     createPropertyDatasetContext(host: UmbControllerHost): UmbBlockElementPropertyDatasetContext;
+    setup(host: UmbClassInterface): void;
     destroy(): void;
 }
 export default UmbBlockElementManager;

package/dist-cms/packages/block/block/workspace/block-element-manager.js

@@ -1,15 +1,16 @@
 import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
 import { UmbContentTypeStructureManager } from '../../../core/content-type/index.js';
-import { UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbClassState, UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import { UmbDocumentTypeDetailRepository } from '../../../documents/document-types/index.js';
+import { UmbValidationController } from '../../../core/validation/index.js';
 export class UmbBlockElementManager extends UmbControllerBase {
     //
     #data;
     #getDataPromise;
     #getDataResolver;
-    constructor(host) {
-        // TODO: Get Workspace Alias via Manifest.
+    #variantId;
+    constructor(host, dataPathPropertyName) {
         super(host);
         //
         this.#data = new UmbObjectState(undefined);
@@ -17,19 +18,30 @@ export class UmbBlockElementManager extends UmbControllerBase {
         this.#getDataPromise = new Promise((resolve) => {
             this.#getDataResolver = resolve;
         });
+        this.#variantId = new UmbClassState(undefined);
+        this.variantId = this.#variantId.asObservable();
         this.unique = this.#data.asObservablePart((data) => data?.udi);
         this.contentTypeId = this.#data.asObservablePart((data) => data?.contentTypeKey);
         this.structure = new UmbContentTypeStructureManager(this, new UmbDocumentTypeDetailRepository(this));
+        this.validation = new UmbValidationController(this);
         this.#updateLock = 0;
         this.finishPropertyValueChange = () => {
             this.#updateLock--;
             this.#triggerPropertyValueChanges();
         };
         this.observe(this.contentTypeId, (id) => this.structure.loadType(id));
+        this.observe(this.unique, (udi) => {
+            if (udi) {
+                this.validation.setDataPath('$.' + dataPathPropertyName + `[?(@.udi = '${udi}')]`);
+            }
+        });
     }
     reset() {
         this.#data.setValue(undefined);
     }
+    setVariantId(variantId) {
+        this.#variantId.setValue(variantId);
+    }
     setData(data) {
         this.#data.setValue(data);
         this.#getDataResolver();
@@ -46,6 +58,17 @@ export class UmbBlockElementManager extends UmbControllerBase {
     getContentTypeId() {
         return this.getData()?.contentTypeKey;
     }
+    // We will implement propertyAlias in the future, when implementing Varying Blocks. [NL]
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async propertyVariantId(propertyAlias) {
+        return this.variantId;
+    }
+    /**
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
+     */
     async propertyValueByAlias(propertyAlias) {
         await this.#getDataPromise;
         return this.#data.asObservablePart((data) => data?.[propertyAlias]);
@@ -54,6 +77,13 @@ export class UmbBlockElementManager extends UmbControllerBase {
         await this.#getDataPromise;
         return this.#data.getValue()?.[propertyAlias];
     }
+    /**
+     * @function setPropertyValue
+     * @param {string} alias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
     async setPropertyValue(alias, value) {
         this.initiatePropertyValueChange();
         await this.#getDataPromise;
@@ -77,6 +107,11 @@ export class UmbBlockElementManager extends UmbControllerBase {
     createPropertyDatasetContext(host) {
         return new UmbBlockElementPropertyDatasetContext(host, this);
     }
+    setup(host) {
+        this.createPropertyDatasetContext(host);
+        // Provide Validation Context for this view:
+        this.validation.provideAt(host);
+    }
     destroy() {
         this.#data.destroy();
         this.structure.destroy();

package/dist-cms/packages/block/block/workspace/block-element-property-dataset.context.d.ts

@@ -6,21 +6,33 @@ import { UmbVariantId } from '../../../core/variant/index.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
 export declare class UmbBlockElementPropertyDatasetContext extends UmbControllerBase implements UmbPropertyDatasetContext {
     #private;
+    readOnly: Observable<boolean>;
     getVariantId(): UmbVariantId;
     getEntityType(): string;
     getUnique(): string | undefined;
     getName(): string | undefined;
     readonly name: Observable<string | undefined>;
     constructor(host: UmbControllerHost, elementManager: UmbBlockElementManager);
+    propertyVariantId?(propertyAlias: string): Promise<Observable<UmbVariantId | undefined>>;
     /**
-     * TODO: Write proper JSDocs here.
-     * @param propertyAlias
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
      */
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: string): Promise<Observable<ReturnType>>;
     /**
-     * TODO: Write proper JSDocs here.
-     * @param propertyAlias
-     * @param value
+     * @function setPropertyValue
+     * @param {string} alias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
      */
-    setPropertyValue(propertyAlias: string, value: unknown): Promise<void>;
+    setPropertyValue(alias: string, value: unknown): Promise<void>;
+    /**
+     * Gets the read-only state of the current variant culture.
+     * @returns {*}  {boolean}
+     * @memberof UmbBlockGridInlinePropertyDatasetContext
+     */
+    getReadOnly(): boolean;
 }

package/dist-cms/packages/block/block/workspace/block-element-property-dataset.context.js

@@ -1,9 +1,12 @@
 import { UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT } from './block-element-property-dataset.context-token.js';
+import { UMB_BLOCK_WORKSPACE_CONTEXT } from './block-workspace.context-token.js';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../core/property/index.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
+import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
 export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase {
     #elementManager;
+    #readOnly;
     // default data:
     getVariantId() {
         return UmbVariantId.CreateInvariant();
@@ -20,23 +23,45 @@ export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase {
     constructor(host, elementManager) {
         // The controller alias, is a very generic name cause we want only one of these for this controller host.
         super(host, UMB_PROPERTY_DATASET_CONTEXT.toString());
+        this.#readOnly = new UmbBooleanState(false);
+        this.readOnly = this.#readOnly.asObservable();
         this.name = 'TODO: get label observable';
         this.#elementManager = elementManager;
+        this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspace) => {
+            this.observe(workspace.readOnlyState.isOn, (value) => {
+                this.#readOnly.setValue(value);
+            }, 'umbObserveReadOnlyStates');
+        });
         this.provideContext(UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT, this);
     }
+    propertyVariantId(propertyAlias) {
+        return this.#elementManager.propertyVariantId(propertyAlias);
+    }
     /**
-     * TODO: Write proper JSDocs here.
-     * @param propertyAlias
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
      */
     async propertyValueByAlias(propertyAlias) {
         return await this.#elementManager.propertyValueByAlias(propertyAlias);
     }
     /**
-     * TODO: Write proper JSDocs here.
-     * @param propertyAlias
-     * @param value
+     * @function setPropertyValue
+     * @param {string} alias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
+    async setPropertyValue(alias, value) {
+        return this.#elementManager.setPropertyValue(alias, value);
+    }
+    /**
+     * Gets the read-only state of the current variant culture.
+     * @returns {*}  {boolean}
+     * @memberof UmbBlockGridInlinePropertyDatasetContext
      */
-    async setPropertyValue(propertyAlias, value) {
-        return this.#elementManager.setPropertyValue(propertyAlias, value);
+    getReadOnly() {
+        return this.#readOnly.getValue();
     }
 }

package/dist-cms/packages/block/block/workspace/block-workspace-editor.element.d.ts

@@ -1,7 +1,10 @@
+import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 export declare class UmbBlockWorkspaceEditorElement extends UmbLitElement {
     workspaceAlias?: string;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    constructor();
+    _headline: string;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbBlockWorkspaceEditorElement;