@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

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

@@ -0,0 +1,12 @@
+import { nothing } from '../../../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../../../core/value-summary/index.js';
+import type { UmbBlockListValueModel } from '../../../types.js';
+export declare class UmbBlockListPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<UmbBlockListValueModel | undefined> {
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbBlockListPropertyEditorValueSummaryElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-block-list-property-editor-value-summary': UmbBlockListPropertyEditorValueSummaryElement;
+    }
+}

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/value-summary/value-summary.element.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, html, nothing } from '../../../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../../../core/value-summary/index.js';
+let UmbBlockListPropertyEditorValueSummaryElement = class UmbBlockListPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase {
+    render() {
+        const count = this._value?.contentData?.length ?? 0;
+        if (!count)
+            return nothing;
+        return html `<span>${count}</span> <uui-icon name="icon-layout-list"></uui-icon>`;
+    }
+};
+UmbBlockListPropertyEditorValueSummaryElement = __decorate([
+    customElement('umb-block-list-property-editor-value-summary')
+], UmbBlockListPropertyEditorValueSummaryElement);
+export { UmbBlockListPropertyEditorValueSummaryElement };
+export { UmbBlockListPropertyEditorValueSummaryElement as element };

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/value-type/constants.d.ts

@@ -0,0 +1,7 @@
+import type { UmbBlockListValueModel } from '../../../types.js';
+export declare const UMB_BLOCK_LIST_PROPERTY_EDITOR_VALUE_TYPE: "Umbraco.BlockList";
+declare global {
+    interface UmbValueTypeMap {
+        [UMB_BLOCK_LIST_PROPERTY_EDITOR_VALUE_TYPE]: UmbBlockListValueModel;
+    }
+}

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/value-type/constants.js

@@ -0,0 +1 @@
+export const UMB_BLOCK_LIST_PROPERTY_EDITOR_VALUE_TYPE = 'Umbraco.BlockList';

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

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Block List Type Configuration',
         icon: 'icon-autofill',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

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

@@ -1,7 +1,7 @@
-import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 import '../ref-rte-block/index.js';
+import '../unsupported-rte-block/index.js';
 import '../../../block/action/block-action-list.element.js';
 /**
  * @class UmbBlockRteEntryElement
@@ -17,14 +17,17 @@ export declare class UmbBlockRteEntryElement extends UmbLitElement implements Um
     private _exposed?;
     private _showActions?;
     private _contentTypeAlias?;
+    /** Reflects whether the block's content type is no longer registered. Set internally by context — do not set externally. */
+    unsupported?: boolean;
     private _contentTypeName?;
     private _isReadOnly;
+    private _name?;
     private _blockViewProps;
     _contentInvalid?: boolean;
     _settingsInvalid?: boolean;
     constructor();
     connectedCallback(): void;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
     static readonly styles: import("lit").CSSResult[];
 }
 export default UmbBlockRteEntryElement;

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

@@ -4,15 +4,16 @@ 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 { UMB_BLOCK_RTE } from '../../constants.js';
 import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
-import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
+import { UMB_BLOCK_RTE } from '../../constants.js';
+import { css, customElement, html, nothing, property, when, state } from '../../../../../external/lit/index.js';
+import { renderHiddenUfm } from '../../../../ufm/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
 import '../ref-rte-block/index.js';
+import '../unsupported-rte-block/index.js';
 import '../../../block/action/block-action-list.element.js';
 /**
  * @class UmbBlockRteEntryElement
@@ -47,6 +48,9 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             config: { showContentEdit: false, showSettingsEdit: false },
         }; // Set to undefined cause it will be set before we render.
         this.#filterBlockCustomViews = (manifest) => {
+            if (this.unsupported) {
+                return false;
+            }
             const elementTypeAlias = this._contentTypeAlias ?? '';
             const isForBlockEditor = !manifest.forBlockEditor || stringOrStringArrayContains(manifest.forBlockEditor, UMB_BLOCK_RTE);
             const isForContentTypeAlias = !manifest.forContentTypeAlias || stringOrStringArrayContains(manifest.forContentTypeAlias, elementTypeAlias);
@@ -55,59 +59,32 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         this.#expose = () => {
             this.#context.expose();
         };
+        this.#onUfmResolved = (event) => {
+            this.#context.setName(event.detail.text);
+        };
         this.#extensionSlotRenderMethod = (ext) => {
             ext.component?.setAttribute('part', 'component');
-            if (this._exposed || this._isReadOnly) {
-                return ext.component;
-            }
-            else {
-                return html `<div>
-				${ext.component}
-				<umb-block-overlay-expose-button
-					.contentTypeName=${this._contentTypeName}
-					@click=${this.#expose}></umb-block-overlay-expose-button>
-			</div>`;
-            }
+            return when(this._exposed || this._isReadOnly, () => html `${this.#renderHiddenUfm()}${ext.component}`, () => html `
+				${this.#renderHiddenUfm()}
+				<div>
+					${ext.component}
+					<umb-block-overlay-expose-button
+						.contentTypeName=${this._contentTypeName}
+						@click=${this.#expose}></umb-block-overlay-expose-button>
+				</div>
+			`);
         };
         this.#renderBuiltinBlockView = () => {
-            // TODO: Missing unsupported rendering [NL]
-            /*if (this._unsupported) {
+            if (this.unsupported) {
                 return this.#renderUnsupportedBlock();
-            }*/
+            }
             return this.#renderRefBlock();
         };
         // We do not have index for RTE Blocks at the moment.
         this.#context.setIndex(0);
-        this.observe(this.#context.showContentEdit, (showContentEdit) => {
-            this._showContentEdit = showContentEdit;
-            this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
-        }, null);
-        this.observe(this.#context.settingsElementTypeKey, (key) => {
-            this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
-        }, null);
-        this.observe(this.#context.contentElementTypeAlias, (alias) => {
-            this._contentTypeAlias = alias;
-        }, null);
-        this.observe(this.#context.contentElementTypeName, (contentElementTypeName) => {
-            this._contentTypeName = contentElementTypeName;
-        }, null);
-        this.observe(this.#context.blockType, (blockType) => {
-            this.#updateBlockViewProps({ blockType });
-        }, null);
-        this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
-        this.observe(this.#context.label, (label) => {
-            this.#updateBlockViewProps({ label });
-            this._label = label;
-        }, null);
-        this.observe(this.#context.contentElementTypeIcon, (icon) => {
-            this.#updateBlockViewProps({ icon });
-            this._icon = icon;
-        }, null);
-        this.observe(this.#context.hasExpose, (exposed) => {
-            this.#updateBlockViewProps({ unpublished: !exposed });
-            this._exposed = exposed;
-        }, null);
+        this.#observeBlockViewProps();
         this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
+        this.observe(this.#context.name, (name) => (this._name = name), null);
         // Data props:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -134,6 +111,39 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             this.#updateBlockViewProps({ readonly: isReadOnly });
         }, 'umbReadOnlyObserver');
     }
+    #observeBlockViewProps() {
+        this.observe(this.#context.showContentEdit, (showContentEdit) => {
+            this._showContentEdit = showContentEdit;
+            this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
+        }, null);
+        this.observe(this.#context.settingsElementTypeKey, (key) => {
+            this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
+        }, null);
+        this.observe(this.#context.contentElementTypeAlias, (alias) => (this._contentTypeAlias = alias), null);
+        this.observe(this.#context.contentElementTypeName, (name) => (this._contentTypeName = name), null);
+        this.observe(this.#context.blockType, (blockType) => {
+            this.#updateBlockViewProps({ blockType });
+        }, null);
+        this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
+        this.observe(this.#context.label, (label) => {
+            this.#updateBlockViewProps({ label });
+            this._label = label;
+        }, null);
+        this.observe(this.#context.contentElementTypeIcon, (icon) => {
+            this.#updateBlockViewProps({ icon });
+            this._icon = icon;
+        }, null);
+        this.observe(this.#context.hasExpose, (exposed) => {
+            this.#updateBlockViewProps({ unpublished: !exposed });
+            this._exposed = exposed;
+        }, null);
+        this.observe(this.#context.unsupported, (unsupported) => {
+            if (unsupported === undefined)
+                return;
+            this.#updateBlockViewProps({ unsupported });
+            this.unsupported = unsupported;
+        }, null);
+    }
     async #observeData() {
         this.observe(await this.#context.contentValues(), (content) => {
             this.#updateBlockViewProps({ content });
@@ -148,48 +158,57 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
     }
     #filterBlockCustomViews;
     #expose;
+    #onUfmResolved;
+    #renderHiddenUfm() {
+        const blockValue = {
+            ...this._blockViewProps.content,
+            $settings: this._blockViewProps.settings,
+            $index: this._blockViewProps.index,
+        };
+        return renderHiddenUfm(this._label, blockValue, this.#onUfmResolved);
+    }
     #extensionSlotRenderMethod;
     #renderBlock() {
-        return this.contentKey && this._contentTypeAlias
-            ? html `
-					<div class="uui-text uui-font">
-						<umb-extension-slot
-							type="blockEditorCustomView"
-							default-element="umb-ref-rte-block"
-							.renderMethod=${this.#extensionSlotRenderMethod}
-							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
-							.props=${this._blockViewProps}
-							.filter=${this.#filterBlockCustomViews}
-							single></umb-extension-slot>
-						${this.#renderActionBar()}
-						${!this._showContentEdit && this._contentInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-                : nothing}
-					</div>
-				`
-            : nothing;
+        return when(this.contentKey && (this._contentTypeAlias || this.unsupported), () => html `
+				<div>
+					<umb-extension-slot
+						type="blockEditorCustomView"
+						default-element="umb-ref-rte-block"
+						.renderMethod=${this.#extensionSlotRenderMethod}
+						.fallbackRenderMethod=${this.#renderBuiltinBlockView}
+						.props=${this._blockViewProps}
+						.filter=${this.#filterBlockCustomViews}
+						single></umb-extension-slot>
+					${this.#renderActionBar()}
+					${when(!this._showContentEdit && this._contentInvalid, () => html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`)}
+				</div>
+			`);
     }
     #renderActionBar() {
         if (!this._showActions)
             return nothing;
         return html `<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_RTE}></umb-block-action-list>`;
     }
+    #renderUnsupportedBlock() {
+        return html `<umb-unsupported-rte-block></umb-unsupported-rte-block>`;
+    }
     #renderBuiltinBlockView;
     #renderRefBlock() {
-        return html `<umb-ref-rte-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			.config=${this._blockViewProps.config}></umb-ref-rte-block>`;
+        return html `
+			<umb-ref-rte-block
+				.label=${this._label}
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				.config=${this._blockViewProps.config}></umb-ref-rte-block>
+		`;
     }
     render() {
         return this.#renderBlock();
     }
     static { this.styles = [
-        UmbTextStyles,
         css `
 			:host {
 				position: relative;
@@ -207,10 +226,8 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 			}
 
 			:host(.ProseMirror-selectednode) {
-				umb-ref-rte-block {
-					--uui-color-default-contrast: initial;
-					outline: 3px solid var(--uui-color-focus);
-				}
+				--uui-color-default-contrast: initial;
+				outline: 3px solid var(--uui-color-focus);
 			}
 
 			umb-extension-slot::part(component) {
@@ -254,6 +271,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_contentTypeAlias", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'unsupported', reflect: true })
+], UmbBlockRteEntryElement.prototype, "unsupported", void 0);
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_contentTypeName", void 0);

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

@@ -5,6 +5,8 @@ import type { UmbBlockEditorCustomViewConfiguration } from '../../../block-custo
  * @element umb-ref-rte-block
  */
 export declare class UmbRefRteBlockElement extends UmbLitElement {
+    #private;
+    constructor();
     label?: string;
     icon?: string;
     index?: number;

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

@@ -4,12 +4,24 @@ 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 { UMB_BLOCK_RTE_ENTRY_CONTEXT } from '../../context/block-rte-entry.context-token.js';
 import { css, customElement, html, property } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 /**
  * @element umb-ref-rte-block
  */
 let UmbRefRteBlockElement = class UmbRefRteBlockElement extends UmbLitElement {
+    //
+    #blockContext;
+    constructor() {
+        super();
+        this.consumeContext(UMB_BLOCK_RTE_ENTRY_CONTEXT, (blockContext) => {
+            this.#blockContext = blockContext;
+        });
+    }
+    #onUfmResolved = (event) => {
+        this.#blockContext?.setName(event.detail.text);
+    };
     render() {
         const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
@@ -19,7 +31,13 @@ let UmbRefRteBlockElement = class UmbRefRteBlockElement extends UmbLitElement {
 				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<div class="selection-background" aria-hidden="true">&emsp;</div>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
-				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
+				<umb-ufm-render
+					slot="name"
+					inline
+					.markdown=${this.label}
+					.value=${blockValue}
+					@umb-ufm-resolved=${this.#onUfmResolved}>
+				</umb-ufm-render>
 			</uui-ref-node>
 		`;
     }

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

@@ -0,0 +1 @@
+export * from './unsupported-rte-block.element.js';

package/dist-cms/packages/block/block-rte/components/unsupported-rte-block/index.js

@@ -0,0 +1 @@
+export * from './unsupported-rte-block.element.js';

package/dist-cms/packages/block/block-rte/components/unsupported-rte-block/unsupported-rte-block.element.d.ts

@@ -0,0 +1,14 @@
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+/**
+ * @element umb-unsupported-rte-block
+ */
+export declare class UmbUnsupportedRteBlockElement extends UmbLitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbUnsupportedRteBlockElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-unsupported-rte-block': UmbUnsupportedRteBlockElement;
+    }
+}

package/dist-cms/packages/block/block-rte/components/unsupported-rte-block/unsupported-rte-block.element.js

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { css, customElement, html } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+/**
+ * @element umb-unsupported-rte-block
+ */
+let UmbUnsupportedRteBlockElement = class UmbUnsupportedRteBlockElement extends UmbLitElement {
+    render() {
+        return html `
+			<uui-ref-node
+				standalone
+				.readonly=${true}
+				detail=${this.localize.term('blockEditor_unsupportedBlockDescription')}>
+				<div class="selection-background" aria-hidden="true">&emsp;</div>
+				<umb-icon slot="icon" name="icon-alert"></umb-icon>
+				<span slot="name">${this.localize.term('blockEditor_unsupportedBlockName')}</span>
+			</uui-ref-node>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: block;
+			}
+
+			uui-ref-node {
+				min-height: var(--uui-size-16);
+			}
+
+			/* HACK: Stretches a space character (&emsp;) to be full-width to make the RTE block appear text-selectable. [LK,NL] */
+			.selection-background {
+				position: absolute;
+				pointer-events: none;
+				font-size: 100vw;
+				inset: 0;
+				overflow: hidden;
+				z-index: 0;
+			}
+
+			umb-icon,
+			span {
+				z-index: 1;
+			}
+		`,
+    ]; }
+};
+UmbUnsupportedRteBlockElement = __decorate([
+    customElement('umb-unsupported-rte-block')
+], UmbUnsupportedRteBlockElement);
+export { UmbUnsupportedRteBlockElement };
+export default UmbUnsupportedRteBlockElement;

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

@@ -11,6 +11,7 @@ export declare class UmbBlockRteEntryContext extends UmbBlockEntryContext<typeof
     readonly forceHideContentEditorInOverlay: import("rxjs").Observable<boolean | undefined>;
     readonly showContentEdit: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHost);
+    protected _needsLegacyLabelRenderer(): boolean;
     protected _gotManager(): void;
     protected _gotEntries(): void;
     protected _gotContentType(): void;

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

@@ -16,6 +16,11 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext {
             return a === true && b === false;
         });
     }
+    _needsLegacyLabelRenderer() {
+        // RTE Block entry element owns the canonical `<umb-ufm-render>` (via <umb-ref-rte-block>)
+        // and pushes resolved text via `setName()`. No hidden virtual renderer needed.
+        return false;
+    }
     _gotManager() { }
     _gotEntries() { }
     _gotContentType() { }

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

@@ -7,7 +7,7 @@ export const manifests = [
         meta: {
             label: 'Block RTE Type Configuration',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
         },
     },
 ];

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

@@ -24,6 +24,7 @@ export declare class UmbBlockSingleEntryElement extends UmbLitElement implements
     private _unsupported?;
     private _showActions?;
     private _inlineEditingMode?;
+    private _name?;
     private _contentInvalid?;
     private _settingsInvalid?;
     private _blockViewProps;

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

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbBlockSingleEntryContext } from '../../context/block-single-entry.context.js';
 import { UMB_BLOCK_SINGLE } from '../../constants.js';
-import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
-import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
+import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
+import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
+import { renderHiddenUfm } from '../../../../ufm/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
 import '../ref-single-block/index.js';
@@ -58,6 +59,9 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
         this.#expose = () => {
             this.#context.expose();
         };
+        this.#onUfmResolved = (event) => {
+            this.#context.setName(event.detail.text);
+        };
         this.#extensionSlotFilterMethod = (manifest) => {
             if (this._unsupported) {
                 // If the block is unsupported, we should not allow any custom views to render.
@@ -74,17 +78,15 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
         };
         this.#extensionSlotRenderMethod = (ext) => {
             ext.component?.setAttribute('part', 'component');
-            if (this._exposed || this._isReadOnly) {
-                return ext.component;
-            }
-            else {
-                return html `<div style="min-height: var(--uui-size-16);">
-				${ext.component}
-				<umb-block-overlay-expose-button
-					.contentTypeName=${this._contentTypeName}
-					@click=${this.#expose}></umb-block-overlay-expose-button>
-			</div>`;
-            }
+            return html `${this.#renderHiddenUfm()}
+		${when(this._exposed || this._isReadOnly, () => ext.component, () => html `
+				<div style="min-height: var(--uui-size-16);">
+					${ext.component}
+					<umb-block-overlay-expose-button
+						.contentTypeName=${this._contentTypeName}
+						@click=${this.#expose}></umb-block-overlay-expose-button>
+				</div>
+			`)}`;
         };
         this.#renderBuiltinBlockView = () => {
             if (this._unsupported) {
@@ -132,6 +134,7 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
         this.observe(this.#context.inlineEditingMode, (mode) => {
             this._inlineEditingMode = mode;
         }, null);
+        this.observe(this.#context.name, (name) => (this._name = name), null);
         // Data props:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -185,6 +188,14 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
         }, 'contentElementTypeName');
     }
     #expose;
+    #onUfmResolved;
+    #renderHiddenUfm() {
+        const blockValue = {
+            ...this._blockViewProps.content,
+            $settings: this._blockViewProps.settings,
+        };
+        return renderHiddenUfm(this._label, blockValue, this.#onUfmResolved);
+    }
     #extensionSlotFilterMethod;
     #extensionSlotRenderMethod;
     #renderRefBlock() {
@@ -208,11 +219,14 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
 			${umbDestroyOnDisconnect()}></umb-inline-single-block>`;
     }
     #renderUnsupportedBlock() {
-        return html `<umb-unsupported-single-block
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-unsupported-single-block>`;
+        return html `
+			${this.#renderHiddenUfm()}
+			<umb-unsupported-single-block
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}></umb-unsupported-single-block>
+		`;
     }
     #renderBuiltinBlockView;
     #renderBlock() {

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

@@ -29,6 +29,9 @@ let UmbInlineSingleBlockElement = class UmbInlineSingleBlockElement extends UmbL
         this.#expose = () => {
             this.#workspaceContext?.expose();
         };
+        this.#onUfmResolved = (event) => {
+            this.#blockContext?.setName(event.detail.text);
+        };
         this.consumeContext(UMB_BLOCK_SINGLE_ENTRY_CONTEXT, (blockContext) => {
             this.#blockContext = blockContext;
             this.observe(this.#blockContext?.unique, (contentKey) => {
@@ -72,6 +75,7 @@ let UmbInlineSingleBlockElement = class UmbInlineSingleBlockElement extends UmbL
         this.#workspaceContext.load(this.#contentKey);
     }
     #expose;
+    #onUfmResolved;
     render() {
         return html `
 			<div id="host">
@@ -105,7 +109,13 @@ let UmbInlineSingleBlockElement = class UmbInlineSingleBlockElement extends UmbL
 					<umb-icon .name=${this.icon}></umb-icon>
 				</span>
 				<div id="info">
-					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
+					<umb-ufm-render
+						id="name"
+						inline
+						.markdown=${this.label}
+						.value=${blockValue}
+						@umb-ufm-resolved=${this.#onUfmResolved}>
+					</umb-ufm-render>
 				</div>
 			</span>
 			${when(this.unpublished, () => html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}

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

@@ -1,8 +1,9 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbBlockDataType } from '../../../block/index.js';
-import '../../../../ufm/index.js';
 import type { UmbBlockEditorCustomViewConfiguration } from '../../../block-custom-view/index.js';
 export declare class UmbRefSingleBlockElement extends UmbLitElement {
+    #private;
+    constructor();
     label?: string;
     icon?: string;
     unpublished?: boolean;