@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

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>;

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

@@ -0,0 +1,11 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_VALUE_TYPE } from '../value-type/constants.js';
+export const manifests = [
+    {
+        type: 'valueSummary',
+        kind: 'default',
+        alias: 'Umb.ValueSummary.PropertyEditor.BlockGrid',
+        name: 'Block Grid Property Editor Value Summary',
+        forValueType: UMB_BLOCK_GRID_PROPERTY_EDITOR_VALUE_TYPE,
+        element: () => import('./value-summary.element.js'),
+    },
+];

package/dist-cms/packages/block/block-grid/property-editors/block-grid-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 { UmbBlockGridValueModel } from '../../../types.js';
+export declare class UmbBlockGridPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<UmbBlockGridValueModel | undefined> {
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbBlockGridPropertyEditorValueSummaryElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-block-grid-property-editor-value-summary': UmbBlockGridPropertyEditorValueSummaryElement;
+    }
+}

package/dist-cms/packages/block/block-grid/property-editors/block-grid-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 UmbBlockGridPropertyEditorValueSummaryElement = class UmbBlockGridPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase {
+    render() {
+        const count = this._value?.contentData?.length ?? 0;
+        if (!count)
+            return nothing;
+        return html `<span>${count}</span> <uui-icon name="icon-layout-masonry"></uui-icon>`;
+    }
+};
+UmbBlockGridPropertyEditorValueSummaryElement = __decorate([
+    customElement('umb-block-grid-property-editor-value-summary')
+], UmbBlockGridPropertyEditorValueSummaryElement);
+export { UmbBlockGridPropertyEditorValueSummaryElement };
+export { UmbBlockGridPropertyEditorValueSummaryElement as element };

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

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

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

@@ -0,0 +1 @@
+export const UMB_BLOCK_GRID_PROPERTY_EDITOR_VALUE_TYPE = 'Umbraco.BlockGrid';

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

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: '',
         icon: 'icon-box-alt',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

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

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

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

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Block Grid Block Configuration',
         icon: 'icon-autofill',
-        group: 'blocks',
+        group: '#propertyEditorUIGroups_blocks',
     },
 };

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

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

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

@@ -10,6 +10,7 @@ import { css, customElement, html, nothing, property, state, when } from '../../
 import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/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-list-block/index.js';
@@ -57,6 +58,9 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         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.
@@ -73,17 +77,15 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         };
         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) {
@@ -130,6 +132,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement 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 props:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -183,13 +186,34 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         }, 'contentElementTypeName');
     }
     #expose;
+    #onUfmResolved;
     #extensionSlotFilterMethod;
     #extensionSlotRenderMethod;
+    get #blockValue() {
+        return {
+            ...this._blockViewProps.content,
+            $settings: this._blockViewProps.settings,
+            $index: this.index,
+        };
+    }
+    #renderUfm() {
+        return html `
+			<umb-ufm-render
+				slot="name"
+				inline
+				.markdown=${this._label}
+				.value=${this.#blockValue}
+				@umb-ufm-resolved=${this.#onUfmResolved}>
+			</umb-ufm-render>
+		`;
+    }
+    #renderHiddenUfm() {
+        return renderHiddenUfm(this._label, this.#blockValue, this.#onUfmResolved);
+    }
     #renderRefBlock() {
         return html `
 			<umb-ref-list-block
 				class=${this._isSortMode ? 'sortable' : ''}
-				.label=${this._label}
 				.icon=${this._icon}
 				.index=${this._blockViewProps.index}
 				.unpublished=${!this._exposed}
@@ -197,26 +221,33 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 				.content=${this._blockViewProps.content}
 				.settings=${this._blockViewProps.settings}
 				${umbDestroyOnDisconnect()}>
+				${this.#renderUfm()}
 			</umb-ref-list-block>
 		`;
     }
     #renderInlineBlock() {
-        return html `<umb-inline-list-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-inline-list-block>`;
+        return html `
+			<umb-inline-list-block
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+				${this.#renderUfm()}
+			</umb-inline-list-block>
+		`;
     }
     #renderUnsupportedBlock() {
-        return html `<umb-unsupported-list-block
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-unsupported-list-block>`;
+        return html `
+			${this.#renderHiddenUfm()}
+			<umb-unsupported-list-block
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}></umb-unsupported-list-block>
+		`;
     }
     #renderBuiltinBlockView;
     #renderBlock() {

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

@@ -3,10 +3,16 @@ import type { UmbBlockDataType } from '../../../block/index.js';
 import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
 /**
  * @element umb-inline-list-block
+ * @slot name - Content rendered as the block's primary label. The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
  */
 export declare class UmbInlineListBlockElement extends UmbLitElement {
     #private;
-    label?: string;
+    /**
+     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
+     */
+    set label(value: string | undefined);
+    get label(): string | undefined;
+    private _label?;
     icon?: string;
     index?: number;
     unpublished?: boolean;
@@ -16,6 +22,7 @@ export declare class UmbInlineListBlockElement extends UmbLitElement {
     private _isOpen;
     private _ownerContentTypeName?;
     private _variantName?;
+    private _hasNameSlotContent;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

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

@@ -5,30 +5,58 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
-import { UMB_BLOCK_MANAGER_CONTEXT, UMB_BLOCK_WORKSPACE_ALIAS, UmbBlockInsertedEvent, } from '../../../block/index.js';
 import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
-import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
+import { UmbBlockInsertedEvent, UMB_BLOCK_MANAGER_CONTEXT, UMB_BLOCK_WORKSPACE_ALIAS, } from '../../../block/index.js';
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
+import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
+import { UmbDeprecation } from '../../../../core/utils/index.js';
 import { UmbLanguageItemRepository } from '../../../../language/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
 import { UmbContextBoundary } from '../../../../../libs/context-api/index.js';
 import { UMB_VIEW_CONTEXT } from '../../../../core/view/index.js';
+import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
 const apiArgsCreator = (manifest) => {
     return [{ manifest }];
 };
+let hasWarnedLabelDeprecation = false;
 /**
  * @element umb-inline-list-block
+ * @slot name - Content rendered as the block's primary label. The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
  */
 let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitElement {
     #manager;
     #blockContext;
     #workspaceContext;
     #contentKey;
+    /**
+     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
+     */
+    set label(value) {
+        if (value !== undefined && value !== this._label) {
+            if (!hasWarnedLabelDeprecation) {
+                hasWarnedLabelDeprecation = true;
+                new UmbDeprecation({
+                    deprecated: 'umb-inline-list-block.label property',
+                    solution: 'Project a `<umb-ufm-render>` into the `name` slot instead.',
+                    removeInVersion: '19.0.0',
+                }).warn();
+            }
+        }
+        this._label = value;
+    }
+    get label() {
+        return this._label;
+    }
+    #onNameSlotChange;
     constructor() {
         super();
         this._isOpen = false;
+        this._hasNameSlotContent = false;
+        this.#onNameSlotChange = (event) => {
+            const slot = event.target;
+            this._hasNameSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
+        };
         this.#onBlockInserted = (event) => {
             const blockEvent = event;
             if (blockEvent.detail.layout.contentKey === this.#contentKey) {
@@ -127,7 +155,8 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 					<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>
+					<slot name="name" @slotchange=${this.#onNameSlotChange}></slot>
+					${when(!this._hasNameSlotContent && this._label !== undefined, () => html `<umb-ufm-render id="name" inline .markdown=${this._label} .value=${blockValue}></umb-ufm-render>`)}
 				</div>
 			</span>
 			${when(this.unpublished, () => html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
@@ -262,14 +291,16 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 			:host(:not([disabled])) #open-part:hover #icon {
 				color: var(--uui-color-interactive-emphasis);
 			}
-			:host(:not([disabled])) #open-part:hover #name {
+			:host(:not([disabled])) #open-part:hover #name,
+			:host(:not([disabled])) #open-part:hover ::slotted([slot='name']) {
 				color: var(--uui-color-interactive-emphasis);
 			}
 
 			:host([disabled]) #icon {
 				color: var(--uui-color-disabled-contrast);
 			}
-			:host([disabled]) #name {
+			:host([disabled]) #name,
+			:host([disabled]) ::slotted([slot='name']) {
 				color: var(--uui-color-disabled-contrast);
 			}
 		`,
@@ -277,7 +308,10 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 };
 __decorate([
     property({ type: String, reflect: false })
-], UmbInlineListBlockElement.prototype, "label", void 0);
+], UmbInlineListBlockElement.prototype, "label", null);
+__decorate([
+    state()
+], UmbInlineListBlockElement.prototype, "_label", void 0);
 __decorate([
     property({ type: String, reflect: false })
 ], UmbInlineListBlockElement.prototype, "icon", void 0);
@@ -305,6 +339,9 @@ __decorate([
 __decorate([
     state()
 ], UmbInlineListBlockElement.prototype, "_variantName", void 0);
+__decorate([
+    state()
+], UmbInlineListBlockElement.prototype, "_hasNameSlotContent", void 0);
 UmbInlineListBlockElement = __decorate([
     customElement('umb-inline-list-block')
 ], UmbInlineListBlockElement);

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

@@ -1,15 +1,25 @@
 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';
+/**
+ * @element umb-ref-list-block
+ * @slot name - Content rendered in the block's primary label area (the `name` slot of the inner `uui-ref-node`). The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
+ */
 export declare class UmbRefListBlockElement extends UmbLitElement {
-    label?: string;
+    #private;
+    /**
+     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
+     */
+    set label(value: string | undefined);
+    get label(): string | undefined;
+    private _label?;
     icon?: string;
     index?: number;
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;
     config?: UmbBlockEditorCustomViewConfiguration;
+    private _hasNameSlotContent;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

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

@@ -4,10 +4,44 @@ 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 { css, customElement, html, property, when } from '../../../../../external/lit/index.js';
+import { css, customElement, html, property, state, when } from '../../../../../external/lit/index.js';
+import { UmbDeprecation } from '../../../../core/utils/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import '../../../../ufm/index.js';
+let hasWarnedLabelDeprecation = false;
+/**
+ * @element umb-ref-list-block
+ * @slot name - Content rendered in the block's primary label area (the `name` slot of the inner `uui-ref-node`). The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
+ */
 let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._hasNameSlotContent = false;
+        this.#onNameSlotChange = (event) => {
+            const slot = event.target;
+            this._hasNameSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
+        };
+    }
+    //
+    /**
+     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
+     */
+    set label(value) {
+        if (value !== undefined && value !== this._label) {
+            if (!hasWarnedLabelDeprecation) {
+                hasWarnedLabelDeprecation = true;
+                new UmbDeprecation({
+                    deprecated: 'umb-ref-list-block.label property',
+                    solution: 'Project a `<umb-ufm-render>` into the `name` slot instead.',
+                    removeInVersion: '19.0.0',
+                }).warn();
+            }
+        }
+        this._label = value;
+    }
+    get label() {
+        return this._label;
+    }
+    #onNameSlotChange;
     render() {
         const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
@@ -16,7 +50,8 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 				.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>
+				<slot name="name" slot="name" @slotchange=${this.#onNameSlotChange}></slot>
+				${when(!this._hasNameSlotContent && this._label !== undefined, () => html `<umb-ufm-render slot="name" inline .markdown=${this._label} .value=${blockValue}></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>
@@ -43,12 +78,14 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 				vertical-align: text-top;
 			}
 
-			umb-ufm-render {
+			umb-ufm-render,
+			::slotted([slot='name']) {
 				user-select: none;
 			}
 
 			:host([unpublished]) umb-icon,
-			:host([unpublished]) umb-ufm-render {
+			:host([unpublished]) umb-ufm-render,
+			:host([unpublished]) ::slotted([slot='name']) {
 				opacity: 0.6;
 			}
 
@@ -72,7 +109,10 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 };
 __decorate([
     property({ type: String, reflect: false })
-], UmbRefListBlockElement.prototype, "label", void 0);
+], UmbRefListBlockElement.prototype, "label", null);
+__decorate([
+    state()
+], UmbRefListBlockElement.prototype, "_label", void 0);
 __decorate([
     property({ type: String, reflect: false })
 ], UmbRefListBlockElement.prototype, "icon", void 0);
@@ -91,6 +131,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], UmbRefListBlockElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbRefListBlockElement.prototype, "_hasNameSlotContent", void 0);
 UmbRefListBlockElement = __decorate([
     customElement('umb-ref-list-block')
 ], UmbRefListBlockElement);

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

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

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

@@ -19,6 +19,11 @@ export class UmbBlockListEntryContext extends UmbBlockEntryContext {
         this.#isSortMode = new UmbBooleanState(undefined);
         this.isSortMode = this.#isSortMode.asObservable();
     }
+    _needsLegacyLabelRenderer() {
+        // Block List entry element owns the canonical `<umb-ufm-render>` and pushes
+        // resolved text via `setName()`. No hidden virtual renderer is needed here.
+        return false;
+    }
     _gotManager() {
         if (!this._manager)
             return;

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

@@ -4,12 +4,14 @@ 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-list-editor/value-summary/manifests.js';
 export const manifests = [
     ...clipboardManifests,
     ...propertyEditorManifests,
     ...propertyValueClonerManifests,
     ...validationManifests,
     ...workspaceManifests,
+    ...valueSummaryManifests,
     {
         type: 'propertyAction',
         kind: 'clear',

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

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

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

@@ -1,2 +1,3 @@
 export const UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS = 'Umbraco.BlockList';
 export const UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.BlockList';
+export * from './value-type/constants.js';

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

@@ -11,7 +11,7 @@ const propertyEditorUi = {
         label: 'Block List',
         propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
         icon: 'icon-thumbnail-list',
-        group: 'richContent',
+        group: '#propertyEditorUIGroups_richContent',
         keywords: ['component', 'list', 'items', 'blocks', 'cards', 'faq', 'testimonials', 'features', 'services'],
         supportsReadOnly: true,
         settings: {

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

@@ -348,6 +348,10 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
     }
     static { this.styles = [
         css `
+			:host {
+				display: block;
+			}
+
 			uui-button-group {
 				margin-top: 1px;
 				display: grid;

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

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

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

@@ -0,0 +1,11 @@
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_VALUE_TYPE } from '../value-type/constants.js';
+export const manifests = [
+    {
+        type: 'valueSummary',
+        kind: 'default',
+        alias: 'Umb.ValueSummary.PropertyEditor.BlockList',
+        name: 'Block List Property Editor Value Summary',
+        forValueType: UMB_BLOCK_LIST_PROPERTY_EDITOR_VALUE_TYPE,
+        element: () => import('./value-summary.element.js'),
+    },
+];