Merge pull request #2065 from umbraco/v14/feature/block-custom-views

Feature: Block Custom Views

Author: nielslyngsoe

src/libs/extension-api/controller/base-extensions-initializer.controller.ts

@@ -33,7 +33,7 @@ export abstract class UmbBaseExtensionsInitializer<
 	#onChange?: (permittedManifests: Array<MyPermittedControllerType>) => void;
 	protected _extensions: Array<ControllerType> = [];
 	#permittedExts: Array<MyPermittedControllerType> = [];
-	#exposedPermittedExts: Array<MyPermittedControllerType> = [];
+	#exposedPermittedExts?: Array<MyPermittedControllerType>;
 	#changeDebounce?: number;
 
 	asPromise(): Promise<void> {
@@ -90,6 +90,12 @@ export abstract class UmbBaseExtensionsInitializer<
 			return;
 		}
 
+		// If we get no manifests and we have not exposed any extensions yet, then we should notify to let the listener know that we have our first response. [NL]
+		if (manifests.length === 0 && this.#exposedPermittedExts === undefined) {
+			this.#exposedPermittedExts = [];
+			this.#onChange?.(this.#exposedPermittedExts);
+		}
+
 		// Clean up extensions that are no longer.
 		this._extensions = this._extensions.filter((extension) => {
 			if (!manifests.find((manifest) => manifest.alias === extension.alias)) {
@@ -114,6 +120,7 @@ export abstract class UmbBaseExtensionsInitializer<
 
 	protected _extensionChanged = (isPermitted: boolean, controller: ControllerType) => {
 		let hasChanged = false;
+
 		// This might be called after this is destroyed, so we need to check if the _permittedExts is still available:
 		const existingIndex = this.#permittedExts?.indexOf(controller as unknown as MyPermittedControllerType);
 		if (isPermitted) {
@@ -149,7 +156,7 @@ export abstract class UmbBaseExtensionsInitializer<
 			// if so, look up the extension it overwrites, and remove it from the list. and check that for if it overwrites another extension and so on.
 			if (extCtrl.overwrites.length > 0) {
 				extCtrl.overwrites.forEach((overwrite) => {
-					this.#removeOverwrittenExtensions(this.#exposedPermittedExts, overwrite);
+					this.#removeOverwrittenExtensions(this.#exposedPermittedExts!, overwrite);
 				});
 			}
 		});
@@ -193,16 +200,16 @@ export abstract class UmbBaseExtensionsInitializer<
 		// The this.#extensionRegistry is an indication of wether this is already destroyed.
 		if (!this.#extensionRegistry) return;
 
-		const oldPermittedExtsLength = this.#exposedPermittedExts.length;
+		const oldPermittedExtsLength = this.#exposedPermittedExts?.length ?? 0;
 		(this._extensions as any) = undefined;
 		(this.#permittedExts as any) = undefined;
-		this.#exposedPermittedExts.length = 0;
+		this.#exposedPermittedExts = undefined;
 		if (this.#changeDebounce) {
 			cancelAnimationFrame(this.#changeDebounce);
 			this.#changeDebounce = undefined;
 		}
 		if (oldPermittedExtsLength > 0) {
-			this.#onChange?.(this.#exposedPermittedExts);
+			this.#onChange?.([]);
 		}
 		this.#promiseResolvers.length = 0;
 		this.#filter = undefined;

src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts

@@ -3,7 +3,7 @@ import { UmbBlockGridInlinePropertyDatasetContext } from './block-grid-inline-pr
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
-import type { UmbBlockViewUrlsPropType } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/extension-registry';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
 
@@ -17,7 +17,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	label?: string;
 
 	@property({ attribute: false })
-	urls?: UmbBlockViewUrlsPropType;
+	config?: UmbBlockEditorCustomViewConfiguration;
 
 	@state()
 	_inlineProperty: UmbPropertyTypeModel | undefined;
@@ -39,7 +39,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.urls?.editContent ?? ''}>
+		return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.config?.editContentPath ?? ''}>
 			<umb-property-type-based-property
 				.property=${this._inlineProperty}
 				slot="areas"></umb-property-type-based-property>

src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts

@@ -1,7 +1,8 @@
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbBlockDataType, UmbBlockViewUrlsPropType } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 
 import '@umbraco-cms/backoffice/ufm';
 import '../block-grid-areas-container/index.js';
@@ -17,7 +18,7 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	label?: string;
 
 	@property({ attribute: false })
-	urls?: UmbBlockViewUrlsPropType;
+	config?: UmbBlockEditorCustomViewConfiguration;
 
 	@state()
 	_content?: UmbBlockDataType;
@@ -37,7 +38,7 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<umb-ref-grid-block standalone href=${this.urls?.editContent ?? ''}>
+		return html`<umb-ref-grid-block standalone href=${this.config?.editContentPath ?? ''}>
 			<umb-ufm-render inline .markdown=${this.label} .value=${this._content}></umb-ufm-render>
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 		</umb-ref-grid-block>`;