Fix: custom block view rendering (#19962)

* Fix: custom block view rendering

* chore: formatting

* chore: formatting

* chore: marks render method as class property to bind it properly to the class so it can run private methods and does not lose its context

see also #extensionSlotRenderMethod

---------

Co-authored-by: Andrej Davidovič <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -467,12 +467,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 						<umb-extension-slot
 							.filter=${this.#extensionSlotFilterMethod}
 							.renderMethod=${this.#extensionSlotRenderMethod}
+							.defaultRenderMethod=${this.#renderBuiltinBlockView}
 							.props=${this._blockViewProps}
 							default-element=${this._inlineEditingMode ? 'umb-block-grid-block-inline' : 'umb-block-grid-block'}
 							type="blockEditorCustomView"
-							single
-							>${this.#renderBuiltinBlockView()}</umb-extension-slot
-						>
+							single></umb-extension-slot>
 						${this.#renderActionBar()}
 						${!this._showContentEdit && this._contentInvalid
 							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
@@ -494,15 +493,15 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			: nothing;
 	}
 
-	#renderBuiltinBlockView() {
+	#renderBuiltinBlockView = () => {
 		if (this._unsupported) {
 			return this.#renderUnsupportedBlock();
 		}
 		if (this._inlineEditingMode) {
 			return this.renderInlineBlock();
 		}
 		return this.#renderRefBlock();
-	}
+	};
 
 	#renderUnsupportedBlock() {
 		return html`<umb-block-grid-block-unsupported

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts

@@ -97,6 +97,15 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 		index: number,
 	) => TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing;
 
+	@property({ attribute: false })
+	public defaultRenderMethod?: () =>
+		| TemplateResult
+		| TemplateResult<1>
+		| HTMLElement
+		| null
+		| undefined
+		| typeof nothing;
+
 	override connectedCallback(): void {
 		super.connectedCallback();
 		this.#attached = true;
@@ -136,7 +145,9 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 		return this._permitted
 			? this._permitted.length > 0
 				? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension)
-				: html`<slot></slot>`
+				: this.defaultRenderMethod
+					? this.defaultRenderMethod()
+					: html`<slot></slot>`
 			: nothing;
 	}