poc custom view guide

Author: nielslyngsoe

src/assets/lang/en-us.ts

@@ -2403,6 +2403,7 @@ export default {
 		tabClipboard: 'Clipboard',
 		tabBlockSettings: 'Settings',
 		headlineAdvanced: 'Advanced',
+		headlineCustomView: 'Custom View',
 		forceHideContentEditor: 'Hide content editor',
 		forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay',
 		gridInlineEditing: 'Inline editing',

src/assets/lang/en.ts

@@ -2470,6 +2470,7 @@ export default {
 		tabClipboard: 'Clipboard',
 		tabBlockSettings: 'Settings',
 		headlineAdvanced: 'Advanced',
+		headlineCustomView: 'Custom View',
 		forceHideContentEditor: 'Hide content editor',
 		forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay.',
 		gridInlineEditing: 'Inline editing',

src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

@@ -1,7 +1,10 @@
+import { UMB_BLOCK_GRID } from '../../types.js';
 import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+// Getting umb-block-type-custom-view-guide element
+import '@umbraco-cms/backoffice/block-type';
 
 @customElement('umb-block-grid-type-workspace-view-advanced')
 export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -21,6 +24,13 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
 					alias="hideContentEditor"
 					property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
 			</uui-box>
+			<uui-box headline=${this.localize.term('blockEditor_headlineCustomView')}>
+				<umb-property-layout label=${this.localize.term('blockEditor_labelCustomView')}>
+					<umb-block-type-custom-view-guide
+						slot="editor"
+						block-editor-type=${UMB_BLOCK_GRID}></umb-block-type-custom-view-guide>
+				</umb-property-layout>
+			</uui-box>
 			<uui-box headline=${this.localize.term('blockEditor_headlineCatalogueAppearance')}>
 				<umb-property
 					label=${this.localize.term('blockEditor_labelBackgroundColor')}

src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts

@@ -0,0 +1,103 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { html, customElement, state, property, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { umbExtensionsRegistry, type ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
+import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
+
+@customElement('umb-block-type-custom-view-guide')
+export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
+	#contentTypeAlias?: string;
+	#blockEditorType?: string;
+
+	@property({ type: String, attribute: 'block-editor-type' })
+	get blockEditorType() {
+		return this.#blockEditorType;
+	}
+	set blockEditorType(value) {
+		this.#blockEditorType = value;
+		this.#loadManifests();
+	}
+
+	@state()
+	private _manifests?: Array<ManifestBlockEditorCustomView>;
+
+	#repository = new UmbDocumentTypeDetailRepository(this);
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
+			this.observe(
+				await context.propertyValueByAlias<string | undefined>('contentElementTypeKey'),
+				async (value) => {
+					if (!value) return;
+					const { asObservable } = await this.#repository.requestByUnique(value);
+					this.observe(
+						asObservable(),
+						(model) => {
+							this.#contentTypeAlias = model?.alias;
+							this.#loadManifests();
+						},
+						'observeContentType',
+					);
+				},
+				'observeContentElementTypeKey',
+			);
+		});
+	}
+
+	#loadManifests() {
+		console.log('this.#blockEditorType', this.#blockEditorType, 'this.#contentTypeAlias', this.#contentTypeAlias);
+		if (!this.#blockEditorType || !this.#contentTypeAlias) return;
+		new UmbExtensionsManifestInitializer(
+			this,
+			umbExtensionsRegistry,
+			'blockEditorCustomView',
+			this.#extensionFilterMethod,
+			async (customViews) => {
+				this._manifests = customViews.map((x) => x.manifest);
+			},
+			'manifestInitializer',
+		);
+	}
+
+	#extensionFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
+		if (!this.#blockEditorType || !this.#contentTypeAlias) return false;
+		if (
+			manifest.forContentTypeAlias &&
+			!stringOrStringArrayContains(manifest.forContentTypeAlias, this.#contentTypeAlias!)
+		) {
+			return false;
+		}
+		if (manifest.forBlockEditor && !stringOrStringArrayContains(manifest.forBlockEditor, this.#blockEditorType)) {
+			return false;
+		}
+		return true;
+	};
+
+	override render() {
+		return this._manifests && this._manifests.length > 0
+			? html` <div>
+					${repeat(
+						this._manifests,
+						(x) => x.alias,
+						(x) => html`
+							<uui-ref-node standalone name=${x.name} detail=${x.alias}>
+								<umb-icon slot="icon" name=${'icon-flowerpot'}></umb-icon
+							></uui-ref-node>
+						`,
+					)}
+				</div>`
+			: html`No custom view matches the current block editor type and content type.`;
+	}
+}
+
+export default UmbBlockTypeCustomViewGuideElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-type-custom-view-guide': UmbBlockTypeCustomViewGuideElement;
+	}
+}

src/packages/block/block-type/components/index.ts

@@ -1,2 +1,3 @@
 export * from './block-type-card/index.js';
 export * from './input-block-type/index.js';
+export * from './block-type-custom-view-guide/block-type-custom-view-guide.element.js';

src/packages/block/block-type/index.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
 export * from './types.js';
+export * from './workspace/index.js';

src/packages/block/block-type/manifests.ts

@@ -1,5 +1,4 @@
 import { manifests as workspaceManifests } from './workspace/manifests.js';
-import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-export const manifests: Array<ManifestTypes> = [...workspaceManifests, ...propertyEditorManifests];
+export const manifests: Array<ManifestTypes> = [...workspaceManifests];