Feature: Block Custom Views

src/external/router-slot/router-slot.ts

@@ -48,7 +48,7 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 	/**
 	 * Method to cancel navigation if changed.
 	 */
-	private _cancelNavigation ?:() => void;
+	private _cancelNavigation?: () => void;
 
 	/**
 	 * Listeners on the router.
@@ -208,7 +208,7 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 				if (this.isConnected) {
 					const newMatch = this.getRouteMatch();
 					// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
-					if(newMatch) {
+					if (newMatch) {
 						navigate = shouldNavigate(this.match, newMatch);
 					}
 				}
@@ -318,7 +318,6 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 	 * Returns true if a navigation was made to a new page.
 	 */
 	protected async renderPath(path: string | PathFragment): Promise<boolean> {
-
 		// Notice: Since this is never called from any other place than one higher in this file(when writing this...), we could just retrieve the path and find a match by using this.getRouteMatch() [NL]
 		// Find the corresponding route.
 		const match = matchRoutes(this._routes, path);
@@ -336,7 +335,6 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 			// Only change route if its a new route.
 			const navigate = shouldNavigate(this.match, match);
 			if (navigate) {
-
 				// If another navigation is still begin resolved in this very moment, then we need to cancel that so it does not end up overriding this new navigation.[NL]
 				this._cancelNavigation?.();
 				// Listen for another push state event. If another push state event happens
@@ -412,7 +410,7 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 					// We have some routes that share the same component instance, those should not be removed and re-appended [NL]
 					const isTheSameComponent = this.firstChild === page;
 
-					if(!isTheSameComponent) {
+					if (!isTheSameComponent) {
 						// Remove the old page by clearing the slot
 						this.clearChildren();
 					}
@@ -421,7 +419,7 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 					// We do this to ensure that we can find the match in the connectedCallback of the page.
 					this._routeMatch = match;
 
-					if(!isTheSameComponent) {
+					if (!isTheSameComponent) {
 						if (page) {
 							// Append the new page
 							this.appendChild(page);

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-area-config-entry/block-grid-area-config-entry.element.ts

@@ -1,7 +1,7 @@
-import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
 import '../block-grid-block/index.js';
 import '../block-scale-handler/index.js';
 

src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace-editor.element.ts

@@ -1,7 +1,7 @@
-import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_CONTEXT } from './block-grid-area-type-workspace.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { customElement, css, html, state, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_CONTEXT } from './block-grid-area-type-workspace.context.js';
 
 @customElement('umb-block-grid-area-type-workspace-editor')
 export class UmbBlockGridAreaTypeWorkspaceEditorElement extends UmbLitElement {

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

@@ -1,6 +1,6 @@
-import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../context/block-grid-manager.context-token.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../context/block-grid-manager.context-token.js';
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT, type UmbBlockGridTypeAreaType } from '@umbraco-cms/backoffice/block-grid';
 
 import '../block-grid-entries/index.js';

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

@@ -1,9 +1,9 @@
-import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
-import { UmbBlockGridInlinePropertyDatasetContext } from './block-grid-inline-property-dataset.context.js';
 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 { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
+import { UmbBlockGridInlinePropertyDatasetContext } from './block-grid-inline-property-dataset.context.js';
 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>`;