@umbraco-cms/backoffice 14.2.0 → 14.3.0

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

@@ -4,13 +4,15 @@ 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 { UmbBlockListEntryContext } from '../../context/block-list-entry.context.js';
+import { UMB_BLOCK_LIST } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { html, css, customElement, property, state } from '../../../../../external/lit/index.js';
+import { html, css, customElement, property, state, nothing } from '../../../../../external/lit/index.js';
 import '../ref-list-block/index.js';
 import '../inline-list-block/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
-import { UmbBlockListEntryContext } from '../../context/block-list-entry.context.js';
-import { UMB_BLOCK_LIST } from '../../types.js';
+import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
+import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
 /**
  * @element umb-block-list-entry
  */
@@ -30,6 +32,10 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             return;
         this._contentUdi = value;
         this.#context.setContentUdi(value);
+        new UmbObserveValidationStateController(this, `$.contentData[${UmbDataPathBlockElementDataQuery({ udi: value })}]`, (hasMessages) => {
+            this._contentInvalid = hasMessages;
+            this._blockViewProps.contentInvalid = hasMessages;
+        }, 'observeMessagesForContent');
     }
     #context;
     #updateBlockViewProps(incoming) {
@@ -38,6 +44,13 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
     }
     constructor() {
         super();
+        /**
+         * 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
+         */
+        this.readonly = false;
         this.#context = new UmbBlockListEntryContext(this);
         this._showContentEdit = false;
         this._hasSettings = false;
@@ -88,6 +101,14 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         }, null);
         this.observe(this.#context.settings, (settings) => {
             this.#updateBlockViewProps({ settings });
+            this.removeUmbControllerByAlias('observeMessagesForSettings');
+            if (settings) {
+                // Observe settings validation state:
+                new UmbObserveValidationStateController(this, `$.settingsData[${UmbDataPathBlockElementDataQuery(settings)}]`, (hasMessages) => {
+                    this._settingsInvalid = hasMessages;
+                    this._blockViewProps.settingsInvalid = hasMessages;
+                }, 'observeMessagesForSettings');
+            }
         }, null);
         this.observe(this.#context.workspaceEditContentPath, (path) => {
             this._workspaceEditContentPath = path;
@@ -115,10 +136,10 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
     }
     #extensionSlotFilterMethod;
     #renderRefBlock() {
-        return html `<umb-ref-list-block .label=${this._label}></umb-ref-list-block>`;
+        return html `<umb-ref-list-block .label=${this._label} .icon=${this._icon}></umb-ref-list-block>`;
     }
     #renderInlineBlock() {
-        return html `<umb-inline-list-block .label=${this._label}></umb-inline-list-block>`;
+        return html `<umb-inline-list-block .label=${this._label} .icon=${this._icon}></umb-inline-list-block>`;
     }
     #renderBlock() {
         return html `
@@ -127,25 +148,54 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 				default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
 				.props=${this._blockViewProps}
 				.filter=${this.#extensionSlotFilterMethod}
+				single
 				>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
 			>
 			<uui-action-bar>
-				${this._showContentEdit && this._workspaceEditContentPath
-            ? html `<uui-button label="edit" compact href=${this._workspaceEditContentPath}>
-							<uui-icon name="icon-edit"></uui-icon>
-						</uui-button>`
-            : ''}
-				${this._hasSettings && this._workspaceEditSettingsPath
-            ? html `<uui-button label="Edit settings" compact href=${this._workspaceEditSettingsPath}>
-							<uui-icon name="icon-settings"></uui-icon>
-						</uui-button>`
-            : ''}
-				<uui-button label="delete" compact @click=${() => this.#context.requestDelete()}>
-					<uui-icon name="icon-remove"></uui-icon>
-				</uui-button>
+				${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
 			</uui-action-bar>
+			${!this._showContentEdit && this._contentInvalid
+            ? html `<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+            : nothing}
 		`;
     }
+    #renderEditContentAction() {
+        return html ` ${this._showContentEdit && this._workspaceEditContentPath
+            ? html `<uui-button
+					label="edit"
+					look="secondary"
+					color=${this._contentInvalid ? 'danger' : ''}
+					href=${this._workspaceEditContentPath}>
+					<uui-icon name="icon-edit"></uui-icon>
+					${this._contentInvalid
+                ? html `<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+                : nothing}
+				</uui-button>`
+            : nothing}`;
+    }
+    #renderEditSettingsAction() {
+        return html `
+			${this._hasSettings && this._workspaceEditSettingsPath
+            ? html `<uui-button
+						label="Edit settings"
+						look="secondary"
+						color=${this._settingsInvalid ? 'danger' : ''}
+						href=${this._workspaceEditSettingsPath}>
+						<uui-icon name="icon-settings"></uui-icon>
+						${this._settingsInvalid
+                ? html `<uui-badge attention color="danger" label="Invalid settings">!</uui-badge>`
+                : nothing}
+					</uui-button>`
+            : nothing}
+		`;
+    }
+    #renderDeleteAction() {
+        if (this.readonly)
+            return nothing;
+        return html ` <uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()}>
+			<uui-icon name="icon-remove"></uui-icon>
+		</uui-button>`;
+    }
     render() {
         return this.#renderBlock();
     }
@@ -154,15 +204,41 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 			:host {
 				position: relative;
 				display: block;
+				--umb-block-list-entry-actions-opacity: 0;
 			}
+
+			:host([settings-invalid]),
+			:host([content-invalid]),
+			:host(:hover),
+			:host(:focus-within) {
+				--umb-block-list-entry-actions-opacity: 1;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
 				right: var(--uui-size-2);
+				opacity: var(--umb-block-list-entry-actions-opacity, 0);
+				transition: opacity 120ms;
 			}
 
 			:host([drag-placeholder]) {
 				opacity: 0.2;
+				--umb-block-list-entry-actions-opacity: 0;
+			}
+
+			:host([settings-invalid])::after,
+			:host([content-invalid])::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				pointer-events: none;
+				border: 1px solid var(--uui-color-danger);
+				border-radius: var(--uui-border-radius);
+			}
+
+			uui-badge {
+				z-index: 2;
 			}
 		`,
     ]; }
@@ -173,6 +249,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], UmbBlockListEntryElement.prototype, "contentUdi", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbBlockListEntryElement.prototype, "readonly", void 0);
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_contentTypeAlias", void 0);
@@ -197,6 +276,12 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_inlineEditingMode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'content-invalid', reflect: true })
+], UmbBlockListEntryElement.prototype, "_contentInvalid", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'settings-invalid', reflect: true })
+], UmbBlockListEntryElement.prototype, "_settingsInvalid", void 0);
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_blockViewProps", void 0);

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

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1 @@
-"use strict";
+export {};

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

@@ -6,6 +6,7 @@ import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no
 export declare class UmbInlineListBlockElement extends UmbLitElement {
     #private;
     label?: string;
+    icon?: string;
     _isOpen: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/block/block-list/components/inline-list-block/inline-list-block.element.js

@@ -34,6 +34,7 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
                 createExtensionApi(this, manifest, [{ manifest: manifest }]).then((context) => {
                     if (context) {
                         this.#workspaceContext = context;
+                        this.#workspaceContext.establishLiveSync();
                         this.#load();
                         new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [
                             this,
@@ -50,26 +51,110 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
         this.#workspaceContext.load(this.#contentUdi);
     }
     render() {
-        return html ` <uui-box>
-			<button
-				slot="header"
-				id="accordion-button"
-				@click=${() => {
+        return html `
+			<div id="host">
+				<button
+					slot="header"
+					id="open-part"
+					tabindex="0"
+					@keydown=${(e) => {
+            if (e.key !== ' ' && e.key !== 'Enter')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this._isOpen = !this._isOpen;
+        }}
+					@click=${() => {
             this._isOpen = !this._isOpen;
         }}>
-				<uui-icon name="icon-document"></uui-icon>
-				<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
-				<span>${this.label}</span>
-			</button>
-			${this._isOpen === true
+					<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+					${this.#renderContent()}
+					<slot></slot>
+					<slot name="tag"></slot>
+				</button>
+				${this._isOpen === true
             ? html `<umb-block-workspace-view-edit-content-no-router></umb-block-workspace-view-edit-content-no-router>`
             : ''}
-		</uui-box>`;
+			</div>
+		`;
+    }
+    #renderContent() {
+        return html `
+			<span id="content">
+				<span id="icon">
+					<umb-icon .name=${this.icon}></umb-icon>
+				</span>
+				<div id="info">
+					<div id="name">${this.label}</div>
+				</div>
+			</span>
+		`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
-			#accordion-button {
+			#host {
+				position: relative;
+				display: block;
+				width: 100%;
+
+				box-sizing: border-box;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface);
+
+				border: 1px solid var(--uui-color-border);
+				transition: border-color 80ms;
+
+				min-width: 250px;
+			}
+			#open-part + * {
+				border-top: 1px solid var(--uui-color-border);
+			}
+			:host([disabled]) #open-part {
+				cursor: default;
+				transition: border-color 80ms;
+			}
+			:host(:not([disabled])) #host:has(#open-part:hover) {
+				border-color: var(--uui-color-border-emphasis);
+			}
+			:host(:not([disabled])) #open-part:hover + * {
+				border-color: var(--uui-color-border-emphasis);
+			}
+			:host([disabled]) #host {
+				border-color: var(--uui-color-disabled-standalone);
+			}
+
+			slot[name='tag'] {
+				flex-grow: 1;
+
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+
+			button {
+				font-size: inherit;
+				font-family: inherit;
+				border: 0;
+				padding: 0;
+				background-color: transparent;
+				text-align: left;
+				color: var(--uui-color-text);
+			}
+
+			#content {
+				align-self: stretch;
+				line-height: normal;
+				display: flex;
+				position: relative;
+				align-items: center;
+			}
+
+			#open-part {
+				color: inherit;
+				text-decoration: none;
+				cursor: pointer;
+
 				display: flex;
 				text-align: left;
 				align-items: center;
@@ -77,14 +162,39 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 				width: 100%;
 				border: none;
 				background: none;
-				padding: 0;
+
+				min-height: var(--uui-size-16);
+				padding: calc(var(--uui-size-2) + 1px);
+			}
+
+			#icon {
+				font-size: 1.2em;
+				margin-left: var(--uui-size-2);
+				margin-right: var(--uui-size-1);
+			}
+
+			:host(:not([disabled])) #open-part:hover #icon {
+				color: var(--uui-color-interactive-emphasis);
+			}
+			:host(:not([disabled])) #open-part:hover #name {
+				color: var(--uui-color-interactive-emphasis);
+			}
+
+			:host([disabled]) #icon {
+				color: var(--uui-color-disabled-contrast);
+			}
+			:host([disabled]) #name {
+				color: var(--uui-color-disabled-contrast);
 			}
 		`,
     ]; }
 };
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: false })
 ], UmbInlineListBlockElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: false })
+], UmbInlineListBlockElement.prototype, "icon", void 0);
 __decorate([
     state()
 ], UmbInlineListBlockElement.prototype, "_isOpen", void 0);

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

@@ -6,6 +6,7 @@ import '../../../../ufm/index.js';
  */
 export declare class UmbRefListBlockElement extends UmbLitElement {
     label?: string;
+    icon?: string;
     _content?: UmbBlockDataType;
     _workspaceEditPath?: string;
     constructor();

package/dist-cms/packages/block/block-list/components/ref-list-block/ref-list-block.element.js

@@ -27,7 +27,8 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
     render() {
         return html `
 			<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
-				<umb-ufm-render inline .markdown=${this.label} .value=${this._content}></umb-ufm-render>
+				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
+				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this._content}></umb-ufm-render>
 			</uui-ref-node>
 		`;
     }
@@ -40,13 +41,16 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
     ]; }
 };
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: false })
 ], UmbRefListBlockElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: false })
+], UmbRefListBlockElement.prototype, "icon", void 0);
 __decorate([
     state()
 ], UmbRefListBlockElement.prototype, "_content", void 0);
 __decorate([
-    state()
+    property()
 ], UmbRefListBlockElement.prototype, "_workspaceEditPath", void 0);
 UmbRefListBlockElement = __decorate([
     customElement('umb-ref-list-block')

package/dist-cms/packages/block/block-list/context/block-list-entries.context.d.ts

@@ -1,10 +1,10 @@
 import type { UmbBlockDataType } from '../../block/index.js';
 import { UmbBlockEntriesContext } from '../../block/index.js';
-import { type UmbBlockListWorkspaceData } from '../index.js';
+import type { UmbBlockListWorkspaceOriginData } from '../index.js';
 import type { UmbBlockListLayoutModel, UmbBlockListTypeModel } from '../types.js';
 import { UMB_BLOCK_LIST_MANAGER_CONTEXT } from './block-list-manager.context-token.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
-export declare class UmbBlockListEntriesContext extends UmbBlockEntriesContext<typeof UMB_BLOCK_LIST_MANAGER_CONTEXT, typeof UMB_BLOCK_LIST_MANAGER_CONTEXT.TYPE, UmbBlockListTypeModel, UmbBlockListLayoutModel> {
+export declare class UmbBlockListEntriesContext extends UmbBlockEntriesContext<typeof UMB_BLOCK_LIST_MANAGER_CONTEXT, typeof UMB_BLOCK_LIST_MANAGER_CONTEXT.TYPE, UmbBlockListTypeModel, UmbBlockListLayoutModel, UmbBlockListWorkspaceOriginData> {
     #private;
     readonly canCreate: import("rxjs/internal/Observable").Observable<boolean>;
     constructor(host: UmbControllerHost);
@@ -12,7 +12,7 @@ export declare class UmbBlockListEntriesContext extends UmbBlockEntriesContext<t
     getPathForCreateBlock(index: number): string | undefined;
     getPathForClipboard(index: number): string | undefined;
     setLayouts(layouts: Array<UmbBlockListLayoutModel>): Promise<void>;
-    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentUdi'>, modalData?: UmbBlockListWorkspaceData): Promise<{
+    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentUdi'>, originData?: UmbBlockListWorkspaceOriginData): Promise<{
         layout: UmbBlockListLayoutModel;
         content: {
             udi: string;
@@ -20,6 +20,6 @@ export declare class UmbBlockListEntriesContext extends UmbBlockEntriesContext<t
         };
         settings: UmbBlockDataType | undefined;
     } | undefined>;
-    insert(layoutEntry: UmbBlockListLayoutModel, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, modalData: UmbBlockListWorkspaceData): Promise<boolean>;
+    insert(layoutEntry: UmbBlockListLayoutModel, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, originData: UmbBlockListWorkspaceOriginData): Promise<boolean>;
     delete(contentUdi: string): Promise<void>;
 }

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

@@ -14,17 +14,31 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
         this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
             .addUniquePaths(['propertyAlias', 'variantId'])
             .addAdditionalPath(':view/:index')
-            .onSetup((routingInfo) => {
-            // Idea: Maybe on setup should be async, so it can retrieve the values when needed? [NL]
+            .onSetup(async (routingInfo) => {
+            await this._retrieveManager;
+            if (!this._manager)
+                return false;
             const index = routingInfo.index ? parseInt(routingInfo.index) : -1;
             return {
                 data: {
                     blocks: this._manager?.getBlockTypes() ?? [],
                     blockGroups: [],
                     openClipboard: routingInfo.view === 'clipboard',
-                    blockOriginData: { index: index },
+                    originData: { index: index },
+                    createBlockInWorkspace: this._manager.getInlineEditingMode() === false,
                 },
             };
+        })
+            .onSubmit(async (value, data) => {
+            if (value?.create && data) {
+                const created = await this.create(value.create.contentElementTypeKey, {}, data.originData);
+                if (created) {
+                    this.insert(created.layout, created.content, created.settings, data.originData);
+                }
+                else {
+                    throw new Error('Failed to create block');
+                }
+            }
         })
             .observeRouteBuilder((routeBuilder) => {
             this._catalogueRouteBuilderState.setValue(routeBuilder);
@@ -33,7 +47,10 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
             .addUniquePaths(['propertyAlias', 'variantId'])
             .addAdditionalPath('block')
             .onSetup(() => {
-            return { data: { entityType: 'block', preset: {} }, modal: { size: 'medium' } };
+            return {
+                data: { entityType: 'block', preset: {}, baseDataPath: this._dataPath },
+                modal: { size: 'medium' },
+            };
         })
             .observeRouteBuilder((routeBuilder) => {
             const newPath = routeBuilder({});
@@ -69,14 +86,14 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
         await this._retrieveManager;
         this._manager?.setLayouts(layouts);
     }
-    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;
-        return this._manager?.insert(layoutEntry, content, settings, modalData) ?? false;
+        return this._manager?.insert(layoutEntry, content, settings, originData) ?? false;
     }
     // create Block?
     async delete(contentUdi) {

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

@@ -1,15 +1,16 @@
 import type { UmbBlockListLayoutModel, UmbBlockListTypeModel } from '../types.js';
-import type { UmbBlockListWorkspaceData } from '../index.js';
+import type { UmbBlockListWorkspaceOriginData } from '../index.js';
 import type { UmbBlockDataType } from '../../block/types.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
 /**
  * A implementation of the Block Manager specifically for the Block List Editor.
  */
-export declare class UmbBlockListManagerContext<BlockLayoutType extends UmbBlockListLayoutModel = UmbBlockListLayoutModel> extends UmbBlockManagerContext<UmbBlockListTypeModel, BlockLayoutType> {
+export declare class UmbBlockListManagerContext<BlockLayoutType extends UmbBlockListLayoutModel = UmbBlockListLayoutModel> extends UmbBlockManagerContext<UmbBlockListTypeModel, BlockLayoutType, UmbBlockListWorkspaceOriginData> {
     #private;
     readonly inlineEditingMode: import("rxjs/internal/Observable").Observable<boolean | undefined>;
     setInlineEditingMode(inlineEditingMode: boolean | undefined): void;
-    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, modalData?: UmbBlockListWorkspaceData): {
+    getInlineEditingMode(): boolean | undefined;
+    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, originData?: UmbBlockListWorkspaceOriginData): {
         layout: BlockLayoutType;
         content: {
             udi: string;
@@ -17,5 +18,5 @@ export declare class UmbBlockListManagerContext<BlockLayoutType extends UmbBlock
         };
         settings: UmbBlockDataType | undefined;
     };
-    insert(layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, modalData: UmbBlockListWorkspaceData): boolean;
+    insert(layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, originData: UmbBlockListWorkspaceOriginData): boolean;
 }

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

@@ -15,15 +15,18 @@ export class UmbBlockListManagerContext extends UmbBlockManagerContext {
     setInlineEditingMode(inlineEditingMode) {
         this.#inlineEditingMode.setValue(inlineEditingMode ?? false);
     }
+    getInlineEditingMode() {
+        return this.#inlineEditingMode.getValue();
+    }
     create(contentElementTypeKey, partialLayoutEntry, 
-    // TODO: [v15] ignoring unused modalData 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);
     }
-    insert(layoutEntry, content, settings, modalData) {
-        this._layouts.appendOneAt(layoutEntry, modalData.originData.index ?? -1);
-        this.insertBlockData(layoutEntry, content, settings, modalData);
+    insert(layoutEntry, content, settings, originData) {
+        this._layouts.appendOneAt(layoutEntry, originData.index ?? -1);
+        this.insertBlockData(layoutEntry, content, settings, originData);
         return true;
     }
 }

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

@@ -11,6 +11,7 @@ export const manifests = [
             propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS,
             icon: 'icon-thumbnail-list',
             group: 'lists',
+            supportsReadOnly: true,
             settings: {
                 properties: [
                     {

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

@@ -3,22 +3,32 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
 import { type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import '../../components/block-list-entry/index.js';
+declare const UmbPropertyEditorUIBlockListElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbBlockListValueModel | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-block-list
  */
-export declare class UmbPropertyEditorUIBlockListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIBlockListElement extends UmbPropertyEditorUIBlockListElement_base implements UmbPropertyEditorUiElement {
     #private;
     private _value;
     set value(value: UmbBlockListValueModel | undefined);
-    get value(): UmbBlockListValueModel;
+    get value(): UmbBlockListValueModel | undefined;
     private _createButtonLabel;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    get readonly(): boolean;
+    set readonly(value: boolean);
     private _limitMin?;
     private _limitMax?;
     private _blocks?;
     private _layouts;
     private _catalogueRouteBuilder?;
     constructor();
+    protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }