unsupported block list

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

@@ -10,12 +10,6 @@ import '../ref-grid-block/index.js';
 
 @customElement('umb-block-grid-block-unsupported')
 export class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
-	@property({ attribute: false })
-	config?: UmbBlockEditorCustomViewConfiguration;
-
-	@property({ attribute: false })
-	content?: UmbBlockDataType;
-
 	override render() {
 		return html`
 			<div id="host">

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
 			return this.#renderUnsupportedBlock();
 		}
 		if (this._inlineEditingMode) {
-			return this.#renderInlineEditBlock();
+			return this.renderInlineBlock();
 		}
 		return this.#renderRefBlock();
 	}
@@ -481,7 +481,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
 	}
 
-	#renderInlineEditBlock() {
+	renderInlineBlock() {
 		return html`<umb-block-grid-block-inline
 			class="umb-block-grid__block--view"
 			.label=${this._label}

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

@@ -8,8 +8,6 @@ import {
 import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
 import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
-import '../ref-list-block/index.js';
-import '../inline-list-block/index.js';
 import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
@@ -22,6 +20,9 @@ import { UUIBlinkAnimationValue } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/clipboard';
 
+import '../ref-list-block/index.js';
+import '../inline-list-block/index.js';
+import '../unsupported-list-block/index.js';
 /**
  * @element umb-block-list-entry
  */
@@ -79,6 +80,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	_exposed?: boolean;
 
+	@state()
+	_unsupported?: boolean;
+
 	@state()
 	_workspaceEditContentPath?: string;
 
@@ -161,6 +165,16 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
+		this.observe(
+			this.#context.unsupported,
+			(unsupported) => {
+				if (unsupported === undefined) return;
+				this.#updateBlockViewProps({ unsupported: unsupported });
+				this._unsupported = unsupported;
+				this.toggleAttribute('unsupported', unsupported);
+			},
+			null,
+		);
 		this.observe(
 			this.#context.inlineEditingMode,
 			(mode) => {
@@ -308,6 +322,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	}
 
 	#extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
+		if (this._unsupported) {
+			// If the block is unsupported, we should not allow any custom views to render.
+			return false;
+		}
+
 		if (
 			manifest.forContentTypeAlias &&
 			!stringOrStringArrayContains(manifest.forContentTypeAlias, this._contentTypeAlias!)
@@ -355,8 +374,26 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			${umbDestroyOnDisconnect()}></umb-inline-list-block>`;
 	}
 
+	#renderUnsupportedBlock() {
+		return html`<umb-unsupported-list-block
+			.config=${this._blockViewProps.config}
+			.content=${this._blockViewProps.content}
+			.settings=${this._blockViewProps.settings}
+			${umbDestroyOnDisconnect()}></umb-unsupported-list-block>`;
+	}
+
+	#renderBuiltinBlockView() {
+		if (this._unsupported) {
+			return this.#renderUnsupportedBlock();
+		}
+		if (this._inlineEditingMode) {
+			return this.#renderInlineBlock();
+		}
+		return this.#renderRefBlock();
+	}
+
 	#renderBlock() {
-		return this.contentKey && this._contentTypeAlias
+		return this.contentKey
 			? html`
 					<div class="umb-block-list__block">
 						<umb-extension-slot
@@ -366,7 +403,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 							.props=${this._blockViewProps}
 							.filter=${this.#extensionSlotFilterMethod}
 							single
-							>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
+							>${this.#renderBuiltinBlockView()}</umb-extension-slot
 						>
 						<uui-action-bar>
 							${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()}

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/index.ts

@@ -0,0 +1 @@
+export * from './unsupported-list-block.element.js';

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/unsupported-list-block.element.ts

@@ -0,0 +1,159 @@
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+/**
+ * @element umb-unsupported-list-block
+ */
+@customElement('umb-unsupported-list-block')
+export class UmbUnsupportedListBlockElement extends UmbLitElement {
+	override render() {
+		return html`
+			<div id="host">
+				<div id="open-part">
+					${this.#renderBlockInfo()}
+					<slot></slot>
+					<slot name="tag"></slot>
+				</div>
+				<div id="inside">${this.localize.term('blockEditor_unsupportedBlockDescription')}</div>
+			</div>
+		`;
+	}
+
+	#renderBlockInfo() {
+		return html`
+			<span id="content">
+				<span id="icon">
+					<umb-icon name="icon-alert"></umb-icon>
+				</span>
+				<div id="info">
+					<span id="name">${this.localize.term('blockEditor_unsupportedBlockName')}</span>
+				</div>
+			</span>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			#host {
+				position: relative;
+				display: block;
+				width: 100%;
+
+				box-sizing: border-box;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface);
+
+				border: 1px solid var(--uui-color-border);
+				transition: border-color 80ms;
+
+				min-width: 250px;
+			}
+
+			#open-part + * {
+				border-top: 1px solid var(--uui-color-border);
+			}
+			:host([disabled]) #open-part {
+				cursor: default;
+				transition: border-color 80ms;
+			}
+			:host([disabled]) #host {
+				border-color: var(--uui-color-disabled-standalone);
+			}
+
+			:host([unpublished]) #open-part #content {
+				opacity: 0.6;
+			}
+
+			slot[name='tag'] {
+				flex-grow: 1;
+
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+
+			button {
+				font-size: inherit;
+				font-family: inherit;
+				border: 0;
+				padding: 0;
+				background-color: transparent;
+				text-align: left;
+				color: var(--uui-color-text);
+			}
+
+			#content {
+				align-self: stretch;
+				line-height: normal;
+				display: flex;
+				position: relative;
+				align-items: center;
+			}
+
+			#open-part {
+				color: inherit;
+				text-decoration: none;
+
+				display: flex;
+				text-align: left;
+				align-items: center;
+				justify-content: flex-start;
+				width: 100%;
+				border: none;
+				background: none;
+
+				min-height: var(--uui-size-16);
+				padding: calc(var(--uui-size-2) + 1px);
+			}
+
+			#icon {
+				font-size: 1.2em;
+				margin-left: var(--uui-size-2);
+				margin-right: var(--uui-size-1);
+			}
+
+			#info {
+				display: flex;
+				flex-direction: column;
+				align-items: start;
+				justify-content: center;
+				height: 100%;
+				padding-left: var(--uui-size-2, 6px);
+			}
+
+			#name {
+				font-weight: 700;
+			}
+
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
+
+			:host([disabled]) #icon {
+				color: var(--uui-color-disabled-contrast);
+			}
+			:host([disabled]) #name {
+				color: var(--uui-color-disabled-contrast);
+			}
+
+			#inside {
+				position: relative;
+				display: block;
+				padding: calc(var(--uui-size-layout-1));
+			}
+		`,
+	];
+}
+
+export default UmbUnsupportedListBlockElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-unsupported-list-block': UmbUnsupportedListBlockElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -35,6 +35,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockListLayoutModel, UmbBlockListEntryE
 	},
 	//identifier: 'block-list-editor',
 	itemSelector: 'umb-block-list-entry',
+	disabledItemSelector: '[unsupported]',
 	//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
 };
 

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts

@@ -517,7 +517,9 @@ export abstract class UmbBlockEntryContext<
 		this.observe(
 			this._manager.contentOf(this.#contentKey),
 			(content) => {
-				this.#unsupported.setValue(!content);
+				if (this.#unsupported.getValue() !== true) {
+					this.#unsupported.setValue(!content);
+				}
 				this.#content.setValue(content);
 			},
 			'observeContent',
@@ -602,6 +604,8 @@ export abstract class UmbBlockEntryContext<
 		this.#contentStructure = this._manager.getStructure(contentTypeKey);
 		this.#contentStructurePromiseResolve?.();
 
+		this.#unsupported.setValue(!this.#contentStructure);
+
 		this.observe(
 			this.#contentStructure?.ownerContentType,
 			(contentType) => {