generator

Author: nielslyngsoe

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

@@ -291,7 +291,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/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts

@@ -144,7 +144,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 									.key=${area.key}></umb-block-area-config-entry>`,
 						)}
 					</div>
-					<uui-button id="add-button" look="placeholder" label=${'Add area'} @click=${this.#addNewArea}></uui-button>`
+					<uui-button look="placeholder" label=${'Add area'} @click=${this.#addNewArea}></uui-button>`
 			: '';
 	}
 }

src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.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-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, state, property, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, property, repeat, css } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import {
 	UMB_MANIFEST_VIEWER_MODAL,
@@ -13,6 +13,7 @@ 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;
 
@@ -42,6 +43,7 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
 					this.observe(
 						asObservable(),
 						(model) => {
+							this.#contentTypeName = model?.name;
 							this.#contentTypeAlias = model?.alias;
 							this.#loadManifests();
 						},
@@ -54,7 +56,6 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
 	}
 
 	#loadManifests() {
-		console.log('this.#blockEditorType', this.#blockEditorType, 'this.#contentTypeAlias', this.#contentTypeAlias);
 		if (!this.#blockEditorType || !this.#contentTypeAlias) return;
 		new UmbExtensionsManifestInitializer(
 			this,
@@ -87,6 +88,20 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
 		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>
@@ -98,8 +113,23 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
 						`,
 					)}
 				</div>`
-			: html`No custom view matches the current block editor type and content type.`;
+			: 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;

src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.element.ts

@@ -2,18 +2,27 @@ import type { UmbManifestViewerModalData, UmbManifestViewerModalValue } from './
 import { css, html, customElement, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 
+// JSON parser for the manifest viewer modal
+// Enabling us to view JS code, but it is not optimal, but currently better than nothing [NL]
+// Ideally we should have a JS code stringify that can print the manifest as JS. [NL]
+function JsonParser(key: string, value: any) {
+	if (typeof value === 'function' && value !== null && value.toString) {
+		return Function.prototype.toString.call(value);
+	}
+	return value;
+}
+
 @customElement('umb-manifest-viewer-modal')
 export class UmbManifestViewerModalElement extends UmbModalBaseElement<
 	UmbManifestViewerModalData,
 	UmbManifestViewerModalValue
 > {
 	override render() {
-		console.log('data', this.data);
 		return html`
 			<umb-body-layout headline="${this.localize.term('general_manifest')}" main-no-padding>
 				${this.data
 					? html`<umb-code-block language="json" copy style="height:100%; border: none;"
-							>${JSON.stringify(this.data, null, 2)}</umb-code-block
+							>${JSON.stringify(this.data, JsonParser, 2)}</umb-code-block
 						>`
 					: nothing}
 				<div slot="actions">