@umbraco-cms/backoffice 18.0.2 → 18.1.0-rc

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

@@ -1,12 +1,14 @@
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbBooleanState, UmbClassState, UmbNumberState, UmbObjectState, UmbStringState, mergeObservables, observeMultiple, } from '../../../../libs/observable-api/index.js';
-import { encodeFilePath, UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
+import { encodeFilePath, UmbDeprecation, UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
 import { umbConfirmModal } from '../../../core/modal/index.js';
 import { UmbLocalizationController } from '../../../../libs/localization-api/index.js';
 import { UmbRoutePathAddendumContext } from '../../../core/router/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
 import { UmbUfmVirtualRenderController } from '../../../ufm/index.js';
 export class UmbBlockEntryContext extends UmbContextBase {
+    // TODO: [V19] Remove together with the legacy label renderer warning. [LK]
+    static #hasWarnedLegacyLabelRenderer = false;
     #contentKey;
     #unsupported;
     #pathAddendum;
@@ -68,7 +70,29 @@ export class UmbBlockEntryContext extends UmbContextBase {
     getLabel() {
         return this.#label.getValue();
     }
+    #name;
+    /**
+     * Set the resolved name text. Intended to be called by the block entry element
+     * when its canonical `<umb-ufm-render>` reports updated text via `umb-ufm-resolved`.
+     * @param {string} text the resolved text.
+     */
+    setName(text) {
+        this.#name.setValue(text);
+    }
+    // TODO: [V19] Remove `#labelRender` and the related plumbing once the legacy renderer is gone. [LK]
     #labelRender;
+    /**
+     * Whether this context should run its own hidden `UmbUfmVirtualRenderController` as the
+     * source of `getName()`. Subclasses whose entry element owns a canonical `<umb-ufm-render>`
+     * (and pushes text via {@link setName}) should override this to return `false`.
+     * @deprecated Scheduled for removal in Umbraco 19. Subclasses must own their own
+     * `<umb-ufm-render>` and push resolved text via {@link setName} — the hidden virtual
+     * renderer fallback will be removed entirely.
+     * @returns {boolean} `true` to create the legacy hidden renderer; `false` to skip it.
+     */
+    _needsLegacyLabelRenderer() {
+        return true;
+    }
     #generateWorkspaceEditContentPath;
     #generateWorkspaceEditSettingsPath;
     #workspacePath;
@@ -189,7 +213,9 @@ export class UmbBlockEntryContext extends UmbContextBase {
         this.unique = this._layout.asObservablePart((x) => x?.contentKey);
         this.#label = new UmbStringState('');
         this.label = this.#label.asObservable();
-        this.#labelRender = new UmbUfmVirtualRenderController(this);
+        this.#name = new UmbStringState('');
+        /** Observable of the block's resolved label text (UFM rendered as plain text). */
+        this.name = this.#name.asObservable();
         this.#generateWorkspaceEditContentPath = (path, contentKey) => path && contentKey ? path + 'edit/' + encodeFilePath(contentKey) + '/view/content' : '';
         this.#generateWorkspaceEditSettingsPath = (path, contentKey) => path && contentKey ? path + 'edit/' + encodeFilePath(contentKey) + '/view/settings' : '';
         this.#workspacePath = new UmbStringState(undefined);
@@ -231,10 +257,24 @@ export class UmbBlockEntryContext extends UmbContextBase {
                 return acc;
             }, {});
         };
-        this.observe(this.label, (label) => {
-            this.#labelRender.markdown = label;
-        });
-        this.#watchContentForLabelRender();
+        // TODO: [V19] Drop this conditional and the legacy renderer plumbing entirely. [LK]
+        if (this._needsLegacyLabelRenderer()) {
+            if (!UmbBlockEntryContext.#hasWarnedLegacyLabelRenderer) {
+                UmbBlockEntryContext.#hasWarnedLegacyLabelRenderer = true;
+                new UmbDeprecation({
+                    deprecated: 'UmbBlockEntryContext hidden virtual label renderer (legacy)',
+                    solution: 'In your UmbBlockEntryContext subclass, override _needsLegacyLabelRenderer() to return false and push the resolved UFM text via setName() — e.g. by listening to @umb-ufm-resolved on a <umb-ufm-render> in your entry element.',
+                    removeInVersion: '19.0.0',
+                }).warn();
+            }
+            this.#labelRender = new UmbUfmVirtualRenderController(this);
+            this.observe(this.label, (label) => {
+                if (this.#labelRender) {
+                    this.#labelRender.markdown = label;
+                }
+            });
+            this.#watchContentForLabelRender();
+        }
         // Consume block manager:
         this.consumeContext(blockManagerContextToken, (manager) => {
             this._manager = manager;
@@ -308,7 +348,9 @@ export class UmbBlockEntryContext extends UmbContextBase {
     }
     async #watchContentForLabelRender() {
         this.observe(await this.contentValues(), (content) => {
-            this.#labelRender.value = content;
+            if (this.#labelRender) {
+                this.#labelRender.value = content;
+            }
         });
     }
     getContentKey() {
@@ -330,7 +372,8 @@ export class UmbBlockEntryContext extends UmbContextBase {
      * @returns {string} - the value of the label.
      */
     getName() {
-        return this.#labelRender.toString();
+        // TODO: [V19] Drop the `#labelRender?.toString()` fallback once the legacy renderer is gone. [LK]
+        return this.#name.getValue() || this.#labelRender?.toString() || '';
     }
     #updateCreatePaths() {
         if (this._entries) {

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

@@ -151,6 +151,7 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
 			${when(this.data?.blocks && this.data?.blocks.length > 8, () => html `
 					<uui-input
 						id="search"
+						name="block-search"
 						@input=${this.#onSearch}
 						label=${this.localize.term('general_search')}
 						placeholder=${this.localize.term('placeholders_search')}>

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

@@ -30,3 +30,7 @@ export interface UmbBlockValueType<BlockLayoutType extends UmbBlockLayoutBaseMod
         [key: string]: Array<BlockLayoutType> | undefined;
     };
 }
+export type UmbBlockLabelUfmValueType = Record<string, unknown> & {
+    $settings?: Record<string, unknown>;
+    $index?: number;
+};

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

@@ -24,6 +24,8 @@ export declare class UmbBlockElementManager<LayoutDataType extends UmbBlockLayou
     readonly values: Observable<UmbBlockDataValueModel<unknown>[] | undefined>;
     getValues(): UmbBlockDataValueModel<unknown>[] | undefined;
     readonly structure: UmbContentTypeStructureManager<UmbContentTypeModel>;
+    readonly variantValues: Observable<UmbBlockDataValueModel<unknown>[]>;
+    getVariantValues(): UmbBlockDataValueModel<unknown>[];
     readonly propertyViewGuard: UmbVariantPropertyGuardManager;
     readonly propertyWriteGuard: UmbVariantPropertyGuardManager;
     readonly validation: UmbValidationController;

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

@@ -5,7 +5,7 @@ import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import { UmbDocumentTypeDetailRepository } from '../../../documents/document-types/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
 import { UmbValidationController } from '../../../core/validation/index.js';
-import { UmbContentValidationToHintsManager, UmbElementWorkspaceDataManager, } from '../../../content/content/index.js';
+import { UmbContentValidationToHintsManager, UmbElementWorkspaceDataManager, umbExtractVariantValues, } from '../../../content/content/index.js';
 import { UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
 import { UmbDataTypeItemRepositoryManager } from '../../../data-type/index.js';
 import { UmbVariantPropertyGuardManager } from '../../../core/property/index.js';
@@ -20,6 +20,10 @@ export class UmbBlockElementManager extends UmbControllerBase {
         return this.#data.getCurrent()?.values;
     }
     #dataTypeItemManager;
+    #variantValuesSnapshot;
+    getVariantValues() {
+        return this.#variantValuesSnapshot;
+    }
     constructor(host, dataPathPropertyName, workspaceViewAlias) {
         super(host);
         //
@@ -38,6 +42,18 @@ export class UmbBlockElementManager extends UmbControllerBase {
         this.values = this.#data.createObservablePartOfCurrent((data) => data?.values);
         this.#dataTypeItemManager = new UmbDataTypeItemRepositoryManager(this);
         this.structure = new UmbContentTypeStructureManager(this, new UmbDocumentTypeDetailRepository(this));
+        // The values resolved to a single entry per property, matching the current variant. [NL]
+        this.variantValues = mergeObservables([this.structure.contentTypeProperties, this.values, this.variantId], ([properties, values, variantId]) => {
+            if (!variantId) {
+                return [];
+            }
+            const propertyVariantIds = properties.map((property) => ({
+                alias: property.alias,
+                variantId: this.#createPropertyVariantId(property, variantId),
+            }));
+            return umbExtractVariantValues(propertyVariantIds, values);
+        });
+        this.#variantValuesSnapshot = [];
         this.propertyViewGuard = new UmbVariantPropertyGuardManager(this);
         this.propertyWriteGuard = new UmbVariantPropertyGuardManager(this);
         this.validation = new UmbValidationController(this);
@@ -68,6 +84,9 @@ export class UmbBlockElementManager extends UmbControllerBase {
         this.observe(this.structure.contentTypeDataTypeUniques, (dataTypeUniques) => {
             this.#dataTypeItemManager.setUniques(dataTypeUniques);
         }, null);
+        this.observe(this.variantValues, (resolvedValues) => {
+            this.#variantValuesSnapshot = resolvedValues;
+        }, null);
     }
     isLoaded() {
         return this.#getDataPromise;

package/dist-cms/packages/block/block/workspace/block-workspace-label-index.function.d.ts

@@ -0,0 +1,14 @@
+import type { UmbBlockWorkspaceOriginData } from './block-workspace.modal-token.js';
+/**
+ * Resolves the `$index` value used in block label UFM expressions.
+ *
+ * Resolution order:
+ * 1. `cachedIndex` — the block's position in the parent layout list (existing blocks).
+ * 2. `originData.index` — the insertion index carried by the catalogue modal (new blocks).
+ *    The sentinel value `-1` means "append to end" and resolves to `layoutsLength`.
+ * @param {number | undefined} cachedIndex The position of this block in the parent layout list, or undefined if it isn't there yet.
+ * @param {UmbBlockWorkspaceOriginData | undefined} originData The origin data captured from the workspace modal.
+ * @param {number | undefined} layoutsLength The current length of the parent layout list; used as the target when originData.index === -1.
+ * @returns {number | undefined} The resolved index, or undefined if no source yields one.
+ */
+export declare function resolveBlockWorkspaceLabelIndex(cachedIndex: number | undefined, originData: UmbBlockWorkspaceOriginData | undefined, layoutsLength: number | undefined): number | undefined;

package/dist-cms/packages/block/block/workspace/block-workspace-label-index.function.js

@@ -0,0 +1,28 @@
+/**
+ * Resolves the `$index` value used in block label UFM expressions.
+ *
+ * Resolution order:
+ * 1. `cachedIndex` — the block's position in the parent layout list (existing blocks).
+ * 2. `originData.index` — the insertion index carried by the catalogue modal (new blocks).
+ *    The sentinel value `-1` means "append to end" and resolves to `layoutsLength`.
+ * @param {number | undefined} cachedIndex The position of this block in the parent layout list, or undefined if it isn't there yet.
+ * @param {UmbBlockWorkspaceOriginData | undefined} originData The origin data captured from the workspace modal.
+ * @param {number | undefined} layoutsLength The current length of the parent layout list; used as the target when originData.index === -1.
+ * @returns {number | undefined} The resolved index, or undefined if no source yields one.
+ */
+export function resolveBlockWorkspaceLabelIndex(cachedIndex, originData, layoutsLength) {
+    if (cachedIndex !== undefined) {
+        return cachedIndex;
+    }
+    if (!originData || !('index' in originData)) {
+        return undefined;
+    }
+    const originIndex = originData.index;
+    if (typeof originIndex !== 'number') {
+        return undefined;
+    }
+    if (originIndex === -1) {
+        return layoutsLength;
+    }
+    return originIndex;
+}

package/dist-cms/packages/block/block/workspace/block-workspace-label-value.function.d.ts

@@ -0,0 +1,11 @@
+import type { UmbBlockDataValueModel, UmbBlockLabelUfmValueType } from '../types.js';
+/**
+ * Builds the value object consumed by the block label UFM render. Content values are placed at the top
+ * level and settings values under a `$settings` key — both keyed by property alias — so labels can
+ * reference them as `${alias}` and `${$settings.alias}` respectively.
+ * @param {Array<UmbBlockDataValueModel> | undefined} contentValues - The resolved block content values.
+ * @param {Array<UmbBlockDataValueModel> | undefined} settingsValues - The resolved block settings values.
+ * @param {number | undefined} index - The block index, exposed as `$index` when defined.
+ * @returns {UmbBlockLabelUfmValueType} The value object for the label render.
+ */
+export declare function buildBlockLabelValueObject(contentValues: Array<UmbBlockDataValueModel> | undefined, settingsValues: Array<UmbBlockDataValueModel> | undefined, index?: number): UmbBlockLabelUfmValueType;

package/dist-cms/packages/block/block/workspace/block-workspace-label-value.function.js

@@ -0,0 +1,28 @@
+/**
+ * Builds the value object consumed by the block label UFM render. Content values are placed at the top
+ * level and settings values under a `$settings` key — both keyed by property alias — so labels can
+ * reference them as `${alias}` and `${$settings.alias}` respectively.
+ * @param {Array<UmbBlockDataValueModel> | undefined} contentValues - The resolved block content values.
+ * @param {Array<UmbBlockDataValueModel> | undefined} settingsValues - The resolved block settings values.
+ * @param {number | undefined} index - The block index, exposed as `$index` when defined.
+ * @returns {UmbBlockLabelUfmValueType} The value object for the label render.
+ */
+export function buildBlockLabelValueObject(contentValues, settingsValues, index) {
+    const valueObject = {};
+    if (contentValues) {
+        for (const property of contentValues) {
+            valueObject[property.alias] = property.value;
+        }
+    }
+    if (settingsValues) {
+        const settingsObject = {};
+        for (const property of settingsValues) {
+            settingsObject[property.alias] = property.value;
+        }
+        valueObject['$settings'] = settingsObject;
+    }
+    if (index !== undefined) {
+        valueObject['$index'] = index;
+    }
+    return valueObject;
+}

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

@@ -3,13 +3,16 @@ import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element
 import { UmbBlockElementManager } from './block-element-manager.js';
 import { UMB_BLOCK_WORKSPACE_VIEW_CONTENT, UMB_BLOCK_WORKSPACE_VIEW_SETTINGS } from './constants.js';
 import { UmbBlockLanguageAccessWorkspaceController } from './block-workspace-language-access.controller.js';
-import { UmbSubmittableWorkspaceContextBase, UmbWorkspaceIsNewRedirectController, UmbWorkspaceIsNewRedirectControllerAlias, } from '../../../core/workspace/index.js';
+import { resolveBlockWorkspaceLabelIndex } from './block-workspace-label-index.function.js';
+import { buildBlockLabelValueObject } from './block-workspace-label-value.function.js';
+import { UmbSubmittableWorkspaceContextBase, UmbWorkspaceIsNewRedirectController, UmbWorkspaceIsNewRedirectControllerAlias, umbWorkspaceWillNavigateAway, } from '../../../core/workspace/index.js';
 import { UmbBooleanState, UmbClassState, UmbObjectState, UmbStringState, observeMultiple, } from '../../../../libs/observable-api/index.js';
 import { UMB_DISCARD_CHANGES_MODAL, UMB_MODAL_CONTEXT, UMB_MODAL_MANAGER_CONTEXT } from '../../../core/modal/index.js';
 import { decodeFilePath, UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
 import { UmbUfmVirtualRenderController } from '../../../ufm/index.js';
 import { UMB_IS_TRASHED_ENTITY_CONTEXT } from '../../../core/recycle-bin/index.js';
+import { distinctUntilChanged, map } from '../../../../external/rxjs/index.js';
 export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase {
     //
     #blockManager;
@@ -21,6 +24,8 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     setOriginData(data) {
         this.#originData = data;
     }
+    // Cached index of this block in its parent layout list, recomputed only when layouts or contentKey change.
+    #index;
     #modalContext;
     #retrieveModalContext;
     #entityType;
@@ -127,6 +132,21 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         });
         this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
             this.#blockEntries = context;
+            if (context) {
+                this.observe(
+                // TODO: Turn this into a observablePart that is retrievable from the block entries context, so we do not have to observe multiple values here. [NL]
+                observeMultiple([context.layoutEntries, this.contentKey]).pipe(map(([layouts, contentKey]) => {
+                    const found = contentKey ? layouts.findIndex((x) => x.contentKey === contentKey) : -1;
+                    return found !== -1 ? found : undefined;
+                }), distinctUntilChanged()), (index) => {
+                    this.#index = index;
+                    this.#renderLabel(this.content.getVariantValues(), this.settings.getVariantValues());
+                }, 'observeLayoutIndex');
+            }
+            else {
+                this.#index = undefined;
+                this.removeUmbControllerByAlias('observeLayoutIndex');
+            }
         }).asPromise({ preventTimeout: true });
         this.consumeContext(UMB_IS_TRASHED_ENTITY_CONTEXT, (context) => {
             this.observe(context?.isTrashed, (isTrashed) => {
@@ -152,7 +172,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             this.content.setVariantId(variantId);
             this.settings.setVariantId(variantId);
         }, null);
-        this.observe(observeMultiple([this.content.values, this.settings.values]), async ([contentValues, settingsValues]) => {
+        this.observe(observeMultiple([this.content.variantValues, this.settings.variantValues]), async ([contentValues, settingsValues]) => {
             this.#renderLabel(contentValues, settingsValues);
         }, 'observeContentForLabelRender');
         this.routes.setRoutes([
@@ -225,24 +245,17 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     #gotLabel(label) {
         if (label) {
             this.#labelRender.markdown = label;
-            this.#renderLabel(this.content.getValues(), this.settings.getValues());
+            this.#renderLabel(this.content.getVariantValues(), this.settings.getVariantValues());
         }
     }
     async #renderLabel(contentValues, settingsValues) {
-        const valueObject = {};
-        if (contentValues) {
-            for (const property of contentValues) {
-                valueObject[property.alias] = property.value;
-            }
-        }
-        if (settingsValues) {
-            valueObject['$settings'] = settingsValues;
-        }
-        // TODO: Look to add support for `$index`, requires wiring up the block-entry with the workspace. [LK]
-        //valueObject['$index'] = 0;
-        this.#labelRender.value = valueObject;
+        const index = resolveBlockWorkspaceLabelIndex(this.#index, this.#originData, this.#blockEntries?.getLayouts().length);
+        this.#labelRender.value = buildBlockLabelValueObject(contentValues, settingsValues, index);
         // Await one animation frame:
         await new Promise((resolve) => requestAnimationFrame(() => resolve(true)));
+        // Check have we been destroyed while waiting for the animation frame? then back out:
+        if (!this.#blockManager)
+            return;
         const prefix = this.getIsNew() === true ? '#general_add' : '#general_edit';
         const label = this.#labelRender.toString();
         const title = `${prefix} ${label}`;
@@ -261,10 +274,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
      * @memberof UmbEntityWorkspaceContextBase
      */
     _checkWillNavigateAway(newUrl) {
-        if (newUrl instanceof URL) {
-            newUrl = newUrl.href;
-        }
-        return !newUrl.includes(this.routes.getActiveLocalPath());
+        return umbWorkspaceWillNavigateAway(this.routes, this.getUnique(), newUrl);
     }
     setEditorSize(editorSize) {
         this.#modalContext?.setModalSize(editorSize);

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

@@ -3,6 +3,8 @@ import type { UmbBlockDataType } from '../../../block/index.js';
 import type { UmbBlockEditorCustomViewConfiguration } from '../../../block-custom-view/index.js';
 import '../../../../ufm/index.js';
 export declare class UmbBlockGridBlockElement extends UmbLitElement {
+    #private;
+    constructor();
     label?: string;
     icon?: string;
     index?: number;

package/dist-cms/packages/block/block-grid/components/block-grid-block/block-grid-block.element.js

@@ -4,10 +4,21 @@ 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 { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../block-grid-entry/constants.js';
 import { css, customElement, html, property, when } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import '../../../../ufm/index.js';
 let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElement {
+    #blockContext;
+    constructor() {
+        super();
+        this.consumeContext(UMB_BLOCK_GRID_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 `
@@ -16,7 +27,13 @@ let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElem
 				.readonly=${!(this.config?.showContentEdit ?? false)}
 				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<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>
 				${when(this.unpublished, () => html `
 						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
 							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>

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

@@ -110,6 +110,9 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
     #expose = () => {
         this.#workspaceContext?.expose();
     };
+    #onUfmResolved = (event) => {
+        this.#blockContext?.setName(event.detail.text);
+    };
     render() {
         return html `
 			<div id="host">
@@ -130,7 +133,13 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 					<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 `

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

@@ -523,10 +523,14 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
         const allowedBlocks = this.#allowedBlockTypes.getValue();
         if (allowedBlocks.length === 0)
             return false;
+        // Manager may have been torn down (e.g. when navigating away) while the form-control
+        // mixin still runs validators from updated(). Treat as valid in that case.
+        if (!this._manager)
+            return true;
         const allowedKeys = allowedBlocks.map((x) => x.contentElementTypeKey);
         // get content for each layout entry:
         const invalidEntries = layoutEntries.filter((entry) => {
-            const contentTypeKey = this._manager.getContentTypeKeyOfContentKey(entry.contentKey);
+            const contentTypeKey = this._manager?.getContentTypeKeyOfContentKey(entry.contentKey);
             if (!contentTypeKey) {
                 // We could not find the content type key, so we cant determin if this is valid or not when the content is missing.
                 // This should be captured elsewhere as the Block then becomes invalid. So the unsupported Block should capture this.

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

@@ -26,6 +26,7 @@ export declare class UmbBlockGridEntryContext extends UmbBlockEntryContext<typeo
     readonly isSortMode: import("rxjs").Observable<boolean | undefined>;
     readonly scaleManager: UmbBlockGridScaleManager;
     constructor(host: UmbControllerHost);
+    protected _needsLegacyLabelRenderer(): boolean;
     layoutsOfArea(areaKey: string): import("rxjs").Observable<UmbBlockGridLayoutModel[] | undefined>;
     areaType(areaKey: string): import("rxjs").Observable<import("../../types.js").UmbBlockGridTypeAreaType | undefined>;
     setLayoutsOfArea(areaKey: string, layouts: UmbBlockGridLayoutModel[]): void;

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

@@ -47,6 +47,11 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.isSortMode = this.#isSortMode.asObservable();
         this.scaleManager = new UmbBlockGridScaleManager(this);
     }
+    _needsLegacyLabelRenderer() {
+        // Block Grid entry element owns the canonical `<umb-ufm-render>` (via its child
+        // views) and pushes resolved text via `setName()`. No hidden virtual renderer needed.
+        return false;
+    }
     layoutsOfArea(areaKey) {
         return this._layout.asObservablePart((x) => x?.areas?.find((x) => x.key === areaKey)?.items);
     }

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

@@ -26,6 +26,7 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     private _showActions?;
     private _inlineEditingMode?;
     private _isSortMode?;
+    private _name?;
     private _canScale?;
     private _showInlineCreateBefore?;
     private _showInlineCreateAfter?;

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

@@ -9,6 +9,7 @@ import { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
 import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
+import { renderHiddenUfm } from '../../../../ufm/index.js';
 import { umbDestroyOnDisconnect, UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
@@ -59,6 +60,9 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         this.#expose = () => {
             this.#context.expose();
         };
+        this.#onUfmResolved = (event) => {
+            this.#context.setName(event.detail.text);
+        };
         this.#updateInlineCreateButtons = () => {
             // TODO: Could we optimize this, so it wont break?, cause currently we trust blindly that parentElement is '.umb-block-grid__layout-container' [NL]
             const layoutContainer = this.parentElement;
@@ -108,18 +112,14 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
                 ext.component.classList.add('umb-block-grid__block--view');
                 ext.component.setAttribute('part', 'component');
             }
-            if (this._exposed || this._isReadOnly) {
-                return ext.component;
-            }
-            else {
-                return html `
+            return html `${this.#renderHiddenUfm()}
+		${when(this._exposed || this._isReadOnly, () => ext.component, () => html `
 				<div>
 					${ext.component}
 					<umb-block-overlay-expose-button .contentTypeName=${this._contentTypeName} @click=${this.#expose}>
 					</umb-block-overlay-expose-button>
 				</div>
-			`;
-            }
+			`)}`;
         };
         this.#renderBuiltinBlockView = () => {
             if (this._unsupported) {
@@ -169,6 +169,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
         this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
         this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
+        this.observe(this.#context.name, (name) => (this._name = name), null);
         // Data:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -257,6 +258,15 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         }
     }
     #expose;
+    #onUfmResolved;
+    #renderHiddenUfm() {
+        const blockValue = {
+            ...this._blockViewProps.content,
+            $settings: this._blockViewProps.settings,
+            $index: this.index,
+        };
+        return renderHiddenUfm(this._label, blockValue, this.#onUfmResolved);
+    }
     #callUpdateInlineCreateButtons() {
         clearTimeout(this.#renderTimeout);
         this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100);
@@ -296,6 +306,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     #renderBuiltinBlockView;
     #renderUnsupportedBlock() {
         return html `
+			${this.#renderHiddenUfm()}
 			<umb-block-grid-block-unsupported
 				class="umb-block-grid__block--view"
 				.config=${this._blockViewProps.config}

package/dist-cms/packages/block/block-grid/manifests.js

@@ -5,6 +5,7 @@ import { manifests as propertyEditorManifests } from './property-editors/manifes
 import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
 import { manifests as validationManifests } from './validation/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { manifests as valueSummaryManifests } from './property-editors/block-grid-editor/value-summary/manifests.js';
 export const manifests = [
     ...clipboardManifests,
     ...componentManifests,
@@ -13,4 +14,5 @@ export const manifests = [
     ...propertyValueClonerManifests,
     ...validationManifests,
     ...workspaceManifests,
+    ...valueSummaryManifests,
 ];

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Block Grid Area Type Permissions',
         icon: 'icon-document',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

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

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Block Grid Areas Configuration',
         icon: 'icon-document',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

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

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Block Grid Column Span',
         icon: 'icon-document',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

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

@@ -1,2 +1,3 @@
 export declare const UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS = "Umbraco.BlockGrid";
 export declare const UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS = "Umb.PropertyEditorUi.BlockGrid";
+export * from './value-type/constants.js';

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

@@ -1,2 +1,3 @@
 export const UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS = 'Umbraco.BlockGrid';
 export const UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.BlockGrid';
+export * from './value-type/constants.js';

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

@@ -10,7 +10,7 @@ const propertyEditorUi = {
         label: 'Block Grid',
         propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
         icon: 'icon-layout',
-        group: 'richContent',
+        group: '#propertyEditorUIGroups_richContent',
         keywords: ['component', 'layout', 'grid', 'modules', 'widgets', 'page', 'builder', 'canvas'],
         supportsReadOnly: true,
         settings: {

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/value-summary/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;