UFM: Adds $index support to Block editors (fixes #20470) (#20488)

* Block List: adds `$index` support for UFM labels * Block Grid: adds `$index` support for UFM labels * Block RTE: adds `$index` support for UFM labels Which is always zero `0`. But has been wired up if we do implement the index order in future.
2025-10-14 07:46:48 +01:00
parent 65798b5722
commit f82c0a90e7
10 changed files with 48 additions and 28 deletions
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -38,6 +38,9 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	@property({ type: String, reflect: false })
 	icon?: string;

+	@property({ type: Number, attribute: false })
+	index?: number;
+
 	@property({ type: Boolean, reflect: true })
 	unpublished?: boolean;

@@ -173,7 +176,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	}

 	#renderBlockInfo() {
-		const blockValue = { ...this.content, $settings: this.settings };
+		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
 			<span id="content">
 				<span id="icon">
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
@@ -14,6 +14,9 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	@property({ type: String, reflect: false })
 	icon?: string;

+	@property({ type: Number, attribute: false })
+	index?: number;
+
 	@property({ attribute: false })
 	config?: UmbBlockEditorCustomViewConfiguration;

@@ -27,7 +30,7 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	settings?: UmbBlockDataType;

 	override render() {
-		const blockValue = { ...this.content, $settings: this.settings };
+		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
 			<umb-ref-grid-block
 				standalone
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
@@ -392,13 +392,13 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
 				${repeat(
 					this._layoutEntries,
-					(x) => x.contentKey,
-					(layoutEntry, index) =>
+					(layout, index) => `${index}_${layout.contentKey}`,
+					(layout, index) =>
 						html`<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
-							.contentKey=${layoutEntry.contentKey}
-							.layout=${layoutEntry}>
+							.contentKey=${layout.contentKey}
+							.layout=${layout}>
 						</umb-block-grid-entry>`,
 				)}
 			</div>
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
@@ -190,7 +190,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
-		// TODO: Implement index.
+		this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
 		this.observe(
 			this.#context.label,
 			(label) => {
@@ -517,6 +517,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			class="umb-block-grid__block--view"
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
@@ -529,6 +530,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			class="umb-block-grid__block--view"
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
@@ -29,19 +29,15 @@ import '../unsupported-list-block/index.js';
 */
@customElement('umb-block-list-entry')
 export class UmbBlockListEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	//
 	@property({ type: Number })
-	public get index(): number | undefined {
-		return this.#context.getIndex();
-	}
 	public set index(value: number | undefined) {
 		this.#context.setIndex(value);
 	}
+	public get index(): number | undefined {
+		return this.#context.getIndex();
+	}

 	@property({ attribute: false })
-	public get contentKey(): string | undefined {
-		return this._contentKey;
-	}
 	public set contentKey(value: string | undefined) {
 		if (!value) return;
 		this._contentKey = value;
@@ -57,6 +53,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			'observeMessagesForContent',
 		);
 	}
+	public get contentKey(): string | undefined {
+		return this._contentKey;
+	}
 	private _contentKey?: string | undefined;

 	#context = new UmbBlockListEntryContext(this);
@@ -147,7 +146,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
-		// TODO: Implement index.
+		this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
 		this.observe(
 			this.#context.label,
 			(label) => {
@@ -374,6 +373,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		return html`<umb-ref-list-block
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
@@ -385,6 +385,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		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}
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts
@@ -30,6 +30,9 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	@property({ type: String, reflect: false })
 	icon?: string;

+	@property({ type: Number, attribute: false })
+	index?: number;
+
 	@property({ type: Boolean, reflect: true })
 	unpublished?: boolean;

@@ -153,7 +156,7 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	}

 	#renderBlockInfo() {
-		const blockValue = { ...this.content, $settings: this.settings };
+		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
 			<span id="content">
 				<span id="icon">
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
@@ -14,6 +14,9 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	@property({ type: String, reflect: false })
 	icon?: string;

+	@property({ type: Number, attribute: false })
+	index?: number;
+
 	@property({ type: Boolean, reflect: true })
 	unpublished?: boolean;

@@ -27,7 +30,7 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	config?: UmbBlockEditorCustomViewConfiguration;

 	override render() {
-		const blockValue = { ...this.content, $settings: this.settings };
+		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
 			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
@@ -378,12 +378,13 @@ export class UmbPropertyEditorUIBlockListElement
 		return html`
 			${repeat(
 				this._layouts,
-				(x) => x.contentKey,
-				(layoutEntry, index) => html`
+				(layout, index) => `${index}_${layout.contentKey}`,
+				(layout, index) => html`
 					${this.#renderInlineCreateButton(index)}
 					<umb-block-list-entry
-						.contentKey=${layoutEntry.contentKey}
-						.layout=${layoutEntry}
+						index=${index}
+						.contentKey=${layout.contentKey}
+						.layout=${layout}
 						${umbDestroyOnDisconnect()}>
 					</umb-block-list-entry>
 				`,
@@ -396,7 +397,7 @@ export class UmbPropertyEditorUIBlockListElement
 		if (this.readonly && this._layouts.length > 0) {
 			return nothing;
 		} else {
-			return html` <uui-button-group> ${this.#renderCreateButton()} ${this.#renderPasteButton()} </uui-button-group> `;
+			return html`<uui-button-group>${this.#renderCreateButton()}${this.#renderPasteButton()}</uui-button-group>`;
 		}
 	}

--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
@@ -22,9 +22,6 @@ import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/ext
@customElement('umb-rte-block')
 export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: String, attribute: 'data-content-key', reflect: true })
-	public get contentKey(): string | undefined {
-		return this._contentKey;
-	}
 	public set contentKey(value: string | undefined) {
 		if (!value) return;
 		this._contentKey = value;
@@ -40,6 +37,9 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			'observeMessagesForContent',
 		);
 	}
+	public get contentKey(): string | undefined {
+		return this._contentKey;
+	}
 	private _contentKey?: string | undefined;

 	#context = new UmbBlockRteEntryContext(this);
@@ -138,7 +138,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			},
 			null,
 		);
-		// TODO: Implement index.
+		this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
 		this.observe(
 			this.#context.label,
 			(label) => {
@@ -292,7 +292,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert

 	#renderActionBar() {
 		return this._showActions
-			? html` <uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()}</uui-action-bar> `
+			? html`<uui-action-bar>${this.#renderEditAction()}${this.#renderEditSettingsAction()}</uui-action-bar>`
 			: nothing;
 	}

@@ -308,6 +308,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		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}
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts
@@ -16,6 +16,9 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	@property({ type: String })
 	icon?: string;

+	@property({ type: Number, attribute: false })
+	index?: number;
+
 	@property({ type: Boolean, reflect: true })
 	unpublished?: boolean;

@@ -46,7 +49,7 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	}

 	override render() {
-		const blockValue = { ...this.content, $settings: this.settings };
+		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
 			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this._workspaceEditPath : undefined) ?? ''}>
 				<div class="selection-background" aria-hidden="true">&emsp;</div>