From a2b2ecb22140b2c2ecd88a2bdf19e826861e2f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 27 Aug 2025 13:11:58 +0200 Subject: [PATCH] Fix: rename and implement fallbackRenderMethod (#20005) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rename and implement fallbackRender * re introducing method as part of the name * rename impls --------- Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Co-authored-by: Andrej Davidovič --- .../block-grid-entry/block-grid-entry.element.ts | 2 +- .../block-list-entry/block-list-entry.element.ts | 9 ++++----- .../block-rte-entry/block-rte-entry.element.ts | 13 ++++++++++--- .../extension-slot/extension-slot.element.ts | 11 +++++++---- .../extension-with-api-slot.element.ts | 15 ++++++++++++++- 5 files changed, 36 insertions(+), 14 deletions(-) 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 e0b4528101..5fb10c3349 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 @@ -467,7 +467,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper `; } - #renderBuiltinBlockView() { + #renderBuiltinBlockView = () => { if (this._unsupported) { return this.#renderUnsupportedBlock(); } @@ -407,7 +407,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper return this.#renderInlineBlock(); } return this.#renderRefBlock(); - } + }; #renderBlock() { return this.contentKey && (this._contentTypeAlias || this._unsupported) @@ -417,11 +417,10 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper type="blockEditorCustomView" default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'} .renderMethod=${this.#extensionSlotRenderMethod} + .fallbackRenderMethod=${this.#renderBuiltinBlockView} .props=${this._blockViewProps} .filter=${this.#extensionSlotFilterMethod} - single - >${this.#renderBuiltinBlockView()} + single> ${this.#renderActionBar()} ${!this._showContentEdit && this._contentInvalid ? html`!` 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 92129a97f2..63d79ac8f8 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 @@ -277,11 +277,10 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert type="blockEditorCustomView" default-element="umb-ref-rte-block" .renderMethod=${this.#extensionSlotRenderMethod} + .fallbackRenderMethod=${this.#renderBuiltinBlockView} .props=${this._blockViewProps} .filter=${this.#filterBlockCustomViews} - single> - ${this.#renderRefBlock()} - + single> ${this.#renderActionBar()} ${!this._showContentEdit && this._contentInvalid ? html`!` @@ -297,6 +296,14 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert : nothing; } + #renderBuiltinBlockView = () => { + // TODO: Missing unsupported rendering [NL] + /*if (this._unsupported) { + return this.#renderUnsupportedBlock(); + }*/ + return this.#renderRefBlock(); + }; + #renderRefBlock() { return html` TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing; @property({ attribute: false }) - public defaultRenderMethod?: () => + public fallbackRenderMethod?: () => | TemplateResult | TemplateResult<1> | HTMLElement @@ -142,15 +142,18 @@ export class UmbExtensionSlotElement extends UmbLitElement { } override render() { + // First renders something once _permitted is set, this is to avoid flickering. [NL] return this._permitted ? this._permitted.length > 0 ? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension) - : this.defaultRenderMethod - ? this.defaultRenderMethod() - : html`` + : this.#renderNoting() : nothing; } + #renderNoting() { + return this.fallbackRenderMethod ? this.fallbackRenderMethod() : html``; + } + #renderExtension = (ext: UmbExtensionElementInitializer, i: number) => { return this.renderMethod ? this.renderMethod(ext, i) : ext.component; }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts index 9b299c1b9c..9f2e56413f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts @@ -143,6 +143,15 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement { index: number, ) => TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing; + @property({ attribute: false }) + public fallbackRenderMethod?: () => + | TemplateResult + | TemplateResult<1> + | HTMLElement + | null + | undefined + | typeof nothing; + override connectedCallback(): void { super.connectedCallback(); this.#attached = true; @@ -185,10 +194,14 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement { return this._permitted ? this._permitted.length > 0 ? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension) - : html`` + : this.#renderNoting() : nothing; } + #renderNoting() { + return this.fallbackRenderMethod ? this.fallbackRenderMethod() : html``; + } + #renderExtension = (ext: UmbExtensionElementAndApiInitializer, i: number) => { return this.renderMethod ? this.renderMethod(ext, i) : ext.component; };