diff --git 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 index f1dc585342..6a515902f1 100644 --- 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` diff --git 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 index c6406db6bf..92e27823e7 100644 --- 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` ${repeat( this._layoutEntries, - (x) => x.contentKey, - (layoutEntry, index) => + (layout, index) => `${index}_${layout.contentKey}`, + (layout, index) => html` + .contentKey=${layout.contentKey} + .layout=${layout}> `, )} diff --git 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 index 5fb10c3349..ac93c62bff 100644 --- 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} diff --git 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 index 5e3a68e444..554dfd36b5 100644 --- 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` diff --git 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 index 1be1ace010..574f72143c 100644 --- 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` diff --git 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 index 246256e629..76b7e263ba 100644 --- 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)} `, @@ -396,7 +397,7 @@ export class UmbPropertyEditorUIBlockListElement if (this.readonly && this._layouts.length > 0) { return nothing; } else { - return html` ${this.#renderCreateButton()} ${this.#renderPasteButton()} `; + return html`${this.#renderCreateButton()}${this.#renderPasteButton()}`; } } diff --git 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 index 63d79ac8f8..e9624ed2eb 100644 --- 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` ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ` + ? html`${this.#renderEditAction()}${this.#renderEditSettingsAction()}` : nothing; } @@ -308,6 +308,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert return html`