Merge pull request #18182 from umbraco/v15/bugfix/18000

Fix: Unsupported Block (18000)

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -2385,6 +2385,9 @@ export default {
 		labelInlineMode: 'Indsæt på linje med tekst',
 		notExposedLabel: 'ikke oprettet',
 		notExposedDescription: 'Denne Block er endnu ikke oprettet for denne variant',
+		unsupportedBlockName: 'Ugyldigt indhold',
+		unsupportedBlockDescription:
+			'Dette indhold er ikke længere understøttet. Hvis du mangler dette indhold bør du kontakte din administrator. Ellers bør du slette dette indhold.',
 	},
 	contentTemplatesDashboard: {
 		whatHeadline: 'Hvad er Indholdsskabeloner?',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -2550,6 +2550,9 @@ export default {
 		labelInlineMode: 'Display inline with text',
 		notExposedLabel: 'Draft',
 		notExposedDescription: 'This Block is not yet created for this variant',
+		unsupportedBlockName: 'Unsupported',
+		unsupportedBlockDescription:
+			'This content is no longer supported in this Editor. If you are missing this content, please contact your administrator. Otherwise delete it.',
 	},
 	contentTemplatesDashboard: {
 		whatHeadline: 'What are Document Blueprints?',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2613,6 +2613,9 @@ export default {
 		labelInlineMode: 'Display inline with text',
 		notExposedLabel: 'Draft',
 		notExposedDescription: 'This Block is not yet created for this variant',
+		unsupportedBlockName: 'Unsupported',
+		unsupportedBlockDescription:
+			'This content is no longer supported in this Editor. If you are missing this content, please contact your administrator. Otherwise delete it.',
 	},
 	contentTemplatesDashboard: {
 		whatHeadline: 'What are Document Blueprints?',

src/Umbraco.Web.UI.Client/src/assets/lang/nb-no.ts

@@ -169,7 +169,8 @@ export default {
 		languagesToPublish: 'Hvilke språk vil du publisere?',
 		languagesToSchedule: 'Hvilke språk vil du planlegge?',
 		languagesToSendForApproval: 'Hvilke språk vil du sende for godkjenning?',
-		languagesToUnpublish: 'Velg språkene som skal avpubliseres. Avpublisering av et obligatorisk språk vil avpublisere alle språk.',
+		languagesToUnpublish:
+			'Velg språkene som skal avpubliseres. Avpublisering av et obligatorisk språk vil avpublisere alle språk.',
 		lastPublished: 'Sist publisert',
 		listViewNoContent: 'Ingen underordnede elementer er lagt til',
 		listViewNoItems: 'Det er ingen elementer å vise i listen.',
@@ -184,7 +185,8 @@ export default {
 		nestedContentDeleteAllItems: 'Er du sikker på at du vil slette alle elementer?',
 		nestedContentDeleteItem: 'Er du sikker på at du vil slette dette elementet?',
 		nestedContentEditorNotSupported: 'Egenskap %0% bruker editor %1% som ikke støttes av Nested Content.',
-		nestedContentGroupHelpText: 'Velg gruppen hvis egenskaper skal vises. Hvis den står tom, vil første gruppe på elementtypen bli brukt.',
+		nestedContentGroupHelpText:
+			'Velg gruppen hvis egenskaper skal vises. Hvis den står tom, vil første gruppe på elementtypen bli brukt.',
 		nestedContentNoContentTypes: 'Ingen innholdstyper er konfigurert for denne egenskapen.',
 		nestedContentNoGroups: 'Den valgte elementtypen inneholder ingen støttede grupper.',
 		nestedContentSelectElementTypeModalTitle: 'Velg elementtype',
@@ -207,7 +209,8 @@ export default {
 		parentNotPublishedAnomaly: 'Intern feil: dokumentet er publisert men finnes ikke i hurtigbuffer',
 		publish: 'Publisert',
 		publishDescendantsHelp: 'Publiser <strong>%0%</strong> og alle undersider, slik at innhold blir tilgjengelig.',
-		publishDescendantsWithVariantsHelp: 'Publiser varianter og undervarianter av samme type, slik at innhold blir tilgjengelig.',
+		publishDescendantsWithVariantsHelp:
+			'Publiser varianter og undervarianter av samme type, slik at innhold blir tilgjengelig.',
 		publishRequiresVariants: 'Følgende varianter er nødvendig for at publisering skal kunne gjennomføres:',
 		publishStatus: 'Publiseringsstatus',
 		published: 'Publisert',
@@ -1174,28 +1177,37 @@ export default {
 		allowanceMaximum: 'Sett et maksimumskrav',
 		allowanceMinimum: 'Sett et minimumskrav',
 		allowBlockInAreas: 'Tillat i områder',
-		allowBlockInAreasHelp: 'Gjør denne blokken tilgjengelig som standard innenfor områdene til andre blokker (med mindre eksplisitte tillatelser er satt for disse områdene).',
+		allowBlockInAreasHelp:
+			'Gjør denne blokken tilgjengelig som standard innenfor områdene til andre blokker (med mindre eksplisitte tillatelser er satt for disse områdene).',
 		allowBlockInRoot: 'Tillat på rot-nivå',
-		allowBlockInRootHelp: 'Gjør denne blokken tilgjengelig på rot-nivå av oppsettet. Hvis dette ikke er valgt, kan denne blokken bare brukes innenfor andre blokkers definerte områder',
+		allowBlockInRootHelp:
+			'Gjør denne blokken tilgjengelig på rot-nivå av oppsettet. Hvis dette ikke er valgt, kan denne blokken bare brukes innenfor andre blokkers definerte områder',
 		allowedBlockColumns: 'Tilgjengelige kolonnestørrelser',
-		allowedBlockColumnsHelp: 'Definer de forskjellige antall kolonner denne blokken kan strekke seg over. Dette hindrer ikke blokker i å plasseres i et mindre område.',
+		allowedBlockColumnsHelp:
+			'Definer de forskjellige antall kolonner denne blokken kan strekke seg over. Dette hindrer ikke blokker i å plasseres i et mindre område.',
 		allowedBlockRows: 'Tilgjengelige radbredder',
 		allowedBlockRowsHelp: 'Definer rekkevidden av layout-rader denne blokken kan strekke seg over.',
-		areaAliasHelp: 'Dette aliaset skrives ut via GetBlockGridHTML(), bruk aliaset til å fange det elementet som representerer dette området. F.eks.. .umb-block-grid__area[data-area-alias="MittOmraadeAlias"] { ... }',
+		areaAliasHelp:
+			'Dette aliaset skrives ut via GetBlockGridHTML(), bruk aliaset til å fange det elementet som representerer dette området. F.eks.. .umb-block-grid__area[data-area-alias="MittOmraadeAlias"] { ... }',
 		areaAliasIsNotUnique: 'Aliaset til dette området må være unikt sammenlignet med de andre områdene i denne blokken.',
 		areaAllowedBlocks: 'Tillatte blokktyper',
-		areaAllowedBlocksEmpty: 'Som standard er alle blokktyper tillatt i et område. Bruk dette alternativet for kun å tillate utvalgte typer.',
-		areaAllowedBlocksHelp: 'Definer typene blokker som er tillatt i dette området, og eventuelt hvor mange av hver type som skal være til stede.',
-		areaCreateLabelHelp: "Overstyr etiketteksten for å legge til en ny blokk i dette området. Eksempel: 'Legg til widget'",
+		areaAllowedBlocksEmpty:
+			'Som standard er alle blokktyper tillatt i et område. Bruk dette alternativet for kun å tillate utvalgte typer.',
+		areaAllowedBlocksHelp:
+			'Definer typene blokker som er tillatt i dette området, og eventuelt hvor mange av hver type som skal være til stede.',
+		areaCreateLabelHelp:
+			"Overstyr etiketteksten for å legge til en ny blokk i dette området. Eksempel: 'Legg til widget'",
 		areaCreateLabelTitle: 'Opprett knappetikett',
 		areaDisallowAllBlocks: 'Tillat kun spesifikke blokktyper',
 		areaIdentification: 'Identifikasjon',
 		areaNumberOfBlocks: 'Antall blokker',
 		areas: 'Områder',
 		areasConfigurations: 'Områder',
-		areasConfigurationsHelp: 'Hvis det skal være mulig å sette nye blokker inni denne blokken, må det oprettes ett eller flere områder for å plassere den nye blokken i.',
+		areasConfigurationsHelp:
+			'Hvis det skal være mulig å sette nye blokker inni denne blokken, må det oprettes ett eller flere områder for å plassere den nye blokken i.',
 		areasLayoutColumns: 'Grid-kolonner for områder',
-		areasLayoutColumnsHelp: 'Definer hvor mange kolonner som skal være tilgjengelige for blokkens områder. Hvis ikke definert, vil antall kolonner definert for hele oppsettet bli brukt.',
+		areasLayoutColumnsHelp:
+			'Definer hvor mange kolonner som skal være tilgjengelige for blokkens områder. Hvis ikke definert, vil antall kolonner definert for hele oppsettet bli brukt.',
 		areaValidation: 'Validering',
 		areaValidationEntriesExceed: '<strong>%0%</strong> må maksimalt være tilstede <strong>%3%</strong> ganger.',
 		areaValidationEntriesShort: '<strong>%0%</strong> må være tilstede minst <strong>%2%</strong> ganger.',
@@ -1207,26 +1219,33 @@ export default {
 		confirmCancelBlockCreationMessage: 'Er du sikker på at du vil avbryte opprettelsen?',
 		confirmDeleteBlockAreaMessage: 'Er du sikker på at du vil slette dette området?',
 		confirmDeleteBlockAreaNotice: 'Alle blokker som for øyeblikket er opprettet i dette området, vil bli slettet.',
-		confirmDeleteBlockGroupMessage: 'Er du sikker på at du vil slette gruppen <strong>%0%</strong> og alle blokk-konfigurasjonene for denne?',
-		confirmDeleteBlockGroupNotice: 'Innholdet i disse blokkene vil fortsatt være tilstede, men redigering av dette innholdet\n      vil ikke lenger være tilgjengelig og vil bli vist som ikke støttet innhold.\n    ',
+		confirmDeleteBlockGroupMessage:
+			'Er du sikker på at du vil slette gruppen <strong>%0%</strong> og alle blokk-konfigurasjonene for denne?',
+		confirmDeleteBlockGroupNotice:
+			'Innholdet i disse blokkene vil fortsatt være tilstede, men redigering av dette innholdet\n      vil ikke lenger være tilgjengelig og vil bli vist som ikke støttet innhold.\n    ',
 		confirmDeleteBlockMessage: 'Er du sikker på at du vil slette innholdet <strong>%0%</strong>?',
 		confirmDeleteBlockTypeMessage: 'Er du sikker på at du vil slette blokk-konfigurasjonen <strong>%0%</strong>?',
-		confirmDeleteBlockTypeNotice: 'Innholdet i denne blokken vil fortsatt være tilstede, men redigering av dette innholdet\n      vil ikke lenger være tilgjengelig og vil bli vist som ikke støttet innhold.\n    ',
+		confirmDeleteBlockTypeNotice:
+			'Innholdet i denne blokken vil fortsatt være tilstede, men redigering av dette innholdet\n      vil ikke lenger være tilgjengelig og vil bli vist som ikke støttet innhold.\n    ',
 		confirmPasteDisallowedNestedBlockHeadline: 'Ikke tillatt innhold ble avvist',
-		confirmPasteDisallowedNestedBlockMessage: 'Det innsatte innholdet inneholdt ikke tillatt innhold, som ikke har blitt opprettet. Vil du beholde resten av dette innholdet likevel?',
+		confirmPasteDisallowedNestedBlockMessage:
+			'Det innsatte innholdet inneholdt ikke tillatt innhold, som ikke har blitt opprettet. Vil du beholde resten av dette innholdet likevel?',
 		defaultLayoutStylesheet: 'Standard oppsett-stilark',
 		deleteArea: 'Slett område',
 		elementTypeDoesNotExist: 'Kan ikke redigeres fordi ElementType ikke eksisterer.',
 		elementTypeDoesNotExistDescription: 'ElementType til denne blokken eksisterer ikke lenger.',
 		elementTypeDoesNotExistHeadline: 'Feil!',
 		focusParentBlock: 'Sett fokus på container-blokken',
 		forceHideContentEditor: 'Skjul innholdsredigerer',
-		forceHideContentEditorHelp: 'Skjul innholdsredigeringsknappen og innholdsredigereren fra blokkredigeringsoverlegget',
+		forceHideContentEditorHelp:
+			'Skjul innholdsredigeringsknappen og innholdsredigereren fra blokkredigeringsoverlegget',
 		getSampleButton: 'Installer',
-		getSampleDescription: 'Dette vil legge til grunnleggende blokker og hjelpe deg å komme i gang med Block Grid Editor.<br/> Du får blokker for overskrift, rik tekst, bilde, samt et oppsett for to kolonner.',
+		getSampleDescription:
+			'Dette vil legge til grunnleggende blokker og hjelpe deg å komme i gang med Block Grid Editor.<br/> Du får blokker for overskrift, rik tekst, bilde, samt et oppsett for to kolonner.',
 		getSampleHeadline: 'Installer eksempelkonfigurasjon',
 		gridInlineEditing: 'Inline-redigering',
-		gridInlineEditingHelp: 'Aktiverer inline-redigering for den første egenskapen. Ytterligere egenskaper kan redigeres i overlegget.',
+		gridInlineEditingHelp:
+			'Aktiverer inline-redigering for den første egenskapen. Ytterligere egenskaper kan redigeres i overlegget.',
 		headlineAddCustomStylesheet: 'Velg stilark',
 		headlineAddCustomView: 'Velg visning',
 		headlineAddSettingsElementType: 'Legg til en innstillings-elementtype',
@@ -1244,7 +1263,8 @@ export default {
 		labelcreateNewElementType: 'Opprett ny ElementType',
 		labelCustomStylesheet: 'Tilpasset stilark',
 		labelCustomView: 'Tilpasset visning',
-		labelCustomViewDescription: 'Overskriv hvordan denne blokken vises i backoffice-grensesnittet. Velg en .html-fil\n      som inneholder presentasjonen din.\n    ',
+		labelCustomViewDescription:
+			'Overskriv hvordan denne blokken vises i backoffice-grensesnittet. Velg en .html-fil\n      som inneholder presentasjonen din.\n    ',
 		labelCustomViewInfoTitle: 'Vis beskrivelse av tilpasset visning',
 		labelEditorSize: 'Overlegg-redigerer størrelse',
 		labelIconColor: 'Ikonfarge',
@@ -1265,6 +1285,6 @@ export default {
 		tabBlockTypeSettings: 'Innstillinger',
 		tabClipboard: 'Utklippstavle',
 		tabCreateEmpty: 'Opprett tomt',
-		thumbnail: 'Miniatyrbilde'
+		thumbnail: 'Miniatyrbilde',
 	},
 } as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/mocks/data/media-type/media-type.db.ts

@@ -3,6 +3,7 @@ import { UmbMockEntityFolderManager } from '../utils/entity/entity-folder.manage
 import { UmbMockEntityTreeManager } from '../utils/entity/entity-tree.manager.js';
 import { UmbMockEntityItemManager } from '../utils/entity/entity-item.manager.js';
 import { UmbMockEntityDetailManager } from '../utils/entity/entity-detail.manager.js';
+import { umbDataTypeMockDb } from '../data-type/data-type.db.js';
 import type { UmbMockMediaTypeModel, UmbMockMediaTypeUnionModel } from './media-type.data.js';
 import { data } from './media-type.data.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
@@ -17,7 +18,6 @@ import type {
 	MediaTypeTreeItemResponseModel,
 	PagedAllowedMediaTypeModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
-import { umbDataTypeMockDb } from '../data-type/data-type.db.js';
 
 class UmbMediaTypeMockDB extends UmbEntityMockDbBase<UmbMockMediaTypeModel> {
 	tree = new UmbMockEntityTreeManager<UmbMockMediaTypeModel>(this, mediaTypeTreeItemMapper);

src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts

@@ -27,6 +27,7 @@ export interface UmbBlockEditorCustomViewProperties<
 	settings?: UmbBlockDataType;
 	contentInvalid?: boolean;
 	settingsInvalid?: boolean;
+	unsupported?: boolean;
 	unpublished?: boolean;
 }
 

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

@@ -0,0 +1,160 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+import '../block-grid-areas-container/index.js';
+import '../ref-grid-block/index.js';
+
+@customElement('umb-block-grid-block-unsupported')
+export class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
+	override render() {
+		return html`
+			<div id="host">
+				<div id="open-part">
+					${this.#renderBlockInfo()}
+					<slot></slot>
+					<slot name="tag"></slot>
+				</div>
+				${this.#renderInside()}
+			</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>
+		`;
+	}
+
+	#renderInside() {
+		return html`<div id="inside">
+			${this.localize.term('blockEditor_unsupportedBlockDescription')}
+			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
+		</div>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			umb-block-grid-areas-container {
+				margin-top: calc(var(--uui-size-2) + 1px);
+			}
+			umb-block-grid-areas-container::part(area) {
+				margin: var(--uui-size-2);
+			}
+
+			#exposeButton {
+				width: 100%;
+				min-height: var(--uui-size-16);
+			}
+
+			#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);
+			}
+			#open-part {
+				cursor: default;
+				transition: border-color 80ms;
+			}
+			#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;
+			}
+
+			#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;
+			}
+
+			#inside {
+				position: relative;
+				display: block;
+				padding: calc(var(--uui-size-layout-1));
+			}
+		`,
+	];
+}
+
+export default UmbBlockGridBlockUnsupportedElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-grid-block-unsupported': UmbBlockGridBlockUnsupportedElement;
+	}
+}

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

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

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

@@ -116,6 +116,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
 	resolvePlacement: resolvePlacementAsBlockGrid,
 	identifier: 'block-grid-editor',
 	itemSelector: 'umb-block-grid-entry',
+	disabledItemSelector: 'umb-block-grid-entry[unsupported]',
 	containerSelector: '.umb-block-grid__layout-container',
 };