Merge pull request #2167 from umbraco/v14/feature/block-type-custom-view-guide

Block type custom view guide

Author: nielslyngsoe

package-lock.json

@@ -254,7 +254,7 @@
 		"eslint-plugin-wc": "^2.1.0",
 		"glob": "^11.0.0",
 		"globals": "^15.8.0",
-		"lucide-static": "^0.408.0",
+		"lucide-static": "^0.424.0",
 		"msw": "^1.3.2",
 		"playwright-msw": "^3.0.1",
 		"prettier": "3.3.3",

package.json

@@ -820,6 +820,7 @@ export default {
 		logout: 'Logout',
 		macro: 'Macro',
 		mandatory: 'Mandatory',
+		manifest: 'Manifest',
 		media: 'Media',
 		message: 'Message',
 		move: 'Move',
@@ -2403,6 +2404,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-us.ts

@@ -831,6 +831,7 @@ export default {
 		logout: 'Logout',
 		macro: 'Macro',
 		mandatory: 'Mandatory',
+		manifest: 'Manifest',
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',
@@ -2471,6 +2472,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

@@ -292,7 +292,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 		if (this._areaKey === null || this._layoutEntries.length === 0) {
 			return html`<uui-button-group>
 				<uui-button
-					id="add-button"
 					look="placeholder"
 					label=${this._singleBlockTypeName
 						? this.localize.term('blockEditor_addThis', [this._singleBlockTypeName])

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

@@ -128,7 +128,6 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 						)}
 					</div>
 					<uui-button
-						id="add-button"
 						look="placeholder"
 						label=${'Add area'}
 						href=${this._workspacePath + 'create'}></uui-button>`

src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.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-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

@@ -175,11 +175,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 						</umb-block-list-entry> `,
 			)}
 			<uui-button-group>
-				<uui-button
-					id="add-button"
-					look="placeholder"
-					label=${this._createButtonLabel}
-					href=${createPath ?? ''}></uui-button>
+				<uui-button look="placeholder" label=${this._createButtonLabel} href=${createPath ?? ''}></uui-button>
 				<uui-button
 					label=${this.localize.term('content_createFromClipboard')}
 					look="placeholder"

src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -0,0 +1,138 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { html, customElement, state, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import {
+	UMB_MANIFEST_VIEWER_MODAL,
+	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';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+
+@customElement('umb-block-type-custom-view-guide')
+export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
+	#contentTypeName?: string;
+	#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.#contentTypeName = model?.name;
+							this.#contentTypeAlias = model?.alias;
+							this.#loadManifests();
+						},
+						'observeContentType',
+					);
+				},
+				'observeContentElementTypeKey',
+			);
+		});
+	}
+
+	#loadManifests() {
+		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;
+	};
+
+	async #viewManifest(manifest: ManifestBlockEditorCustomView) {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		modalManager.open(this, UMB_MANIFEST_VIEWER_MODAL, { data: manifest });
+	}
+
+	async #generateManifest() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+
+		const manifest = {
+			type: 'blockEditorCustomView',
+			alias: 'Local.blockEditorCustomView.' + this.#contentTypeAlias,
+			name: 'Block Editor Custom View for ' + this.#contentTypeName,
+			element: '[replace with path to your web component js file...]',
+			forContentTypeAlias: this.#contentTypeAlias,
+			forBlockEditor: this.#blockEditorType,
+		};
+		modalManager.open(this, UMB_MANIFEST_VIEWER_MODAL, { data: manifest });
+	}
+
+	override render() {
+		return this._manifests && this._manifests.length > 0
+			? html` <div>
+					<umb-ref-manifest
+						standalone
+						@open=${() => this.#viewManifest(this._manifests![0])}
+						.manifest=${this._manifests[0]}></umb-ref-manifest>
+				</div>`
+			: html`<uui-button
+					id="add-button"
+					look="placeholder"
+					label="Generate manifest for this Block Type"
+					type="button"
+					color="default"
+					@click=${() => this.#generateManifest()}></uui-button>`;
+	}
+
+	static override styles = [
+		css`
+			#add-button {
+				text-align: center;
+				width: 100%;
+			}
+		`,
+	];
+}
+
+export default UmbBlockTypeCustomViewGuideElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-type-custom-view-guide': UmbBlockTypeCustomViewGuideElement;
+	}
+}

src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.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';