scaffolded block manager

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

@@ -1,5 +1,7 @@
 import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
 
+export const UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS = 'Umbraco.BlockList';
+
 export const manifest: ManifestPropertyEditorUi = {
 	type: 'propertyEditorUi',
 	alias: 'Umb.PropertyEditorUi.BlockList',
@@ -7,7 +9,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	js: () => import('./property-editor-ui-block-list.element.js'),
 	meta: {
 		label: 'Block List',
-		propertyEditorSchemaAlias: 'Umbraco.BlockList',
+		propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS,
 		icon: 'icon-thumbnail-list',
 		group: 'lists',
 		settings: {

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

@@ -1,47 +1,60 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js';
+import { html, customElement, property, state, styleMap } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbBlockManagerContext, type UmbBlockValueType } from '@umbraco-cms/backoffice/block';
 
 /**
  * @element umb-property-editor-ui-block-list
  */
 @customElement('umb-property-editor-ui-block-list')
 export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	private _value: Array<string> = [];
+	private _value?: UmbBlockValueType;
 
-	@property({ type: Array })
-	public get value(): Array<string> {
+	@property({ attribute: false })
+	public get value(): UmbBlockValueType | undefined {
 		return this._value;
 	}
-	public set value(value: Array<string>) {
-		this._value = value || [];
+	public set value(value: UmbBlockValueType | undefined) {
+		const buildUpValue: Partial<UmbBlockValueType> = value ?? {};
+		buildUpValue.layout ??= {};
+		buildUpValue.contentData ??= [];
+		buildUpValue.settingsData ??= [];
+		this._value = buildUpValue as UmbBlockValueType;
+
+		this.#context.setLayouts(this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS]);
 	}
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		const validationLimit = config['validationLimit'];
+		if (!config) return;
+		const validationLimit = config.find((x) => x.alias === 'validationLimit')?.value;
 
-		this._limitMin = (validationLimit?.value as any)?.min;
-		this._limitMax = (validationLimit?.value as any)?.max;
+		this._limitMin = validationLimit?.min;
+		this._limitMax = validationLimit?.max;
 
-		//config.blocks
+		const blocks = config.find((x) => x.alias === 'blocks')?.value;
+		this.#context.setBlockTypes(blocks);
 		//config.useSingleBlockMode
 		//config.useLiveEditing
 		//config.useInlineEditingAsDefault
-		this._maxPropertyWidth = config.maxPropertyWidth;
+		this.inlineStyles.width = config.find((x) => x.alias === 'maxPropertyWidth')?.value;
 	}
 
 	@state()
 	private _limitMin?: number;
 	@state()
 	private _limitMax?: number;
+
+	#context = new UmbBlockManagerContext(this);
+
 	@state()
-	private _maxPropertyWidth?: string;
+	inlineStyles = { width: undefined };
 
 	render() {
-		return html`<div>umb-property-editor-ui-block-list</div>`;
+		return html`<div style=${styleMap(this.inlineStyles)}>umb-property-editor-ui-block-list</div>`;
 	}
 
 	static styles = [UmbTextStyles];

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

@@ -0,0 +1,62 @@
+import type { UmbBlockTypeBase } from '../block-type/types.js';
+import type { UmbBlockLayoutBaseModel, UmbBlockDataType } from './types.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+
+export class UmbBlockManagerContext<
+	BlockType extends UmbBlockTypeBase = UmbBlockTypeBase,
+	BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel,
+> extends UmbContextBase<UmbBlockManagerContext> {
+	//
+	#blockTypes = new UmbArrayState(<Array<BlockType>>[], (x) => x.contentElementTypeKey);
+	public readonly blockTypes = this.#blockTypes.asObservable();
+
+	#layouts = new UmbArrayState(<Array<BlockLayoutType>>[], (x) => x.contentUdi);
+	public readonly layouts = this.#layouts.asObservable();
+
+	#contents = new UmbArrayState(<Array<UmbBlockDataType>>[], (x) => x.udi);
+	public readonly contents = this.#contents.asObservable();
+
+	#settings = new UmbArrayState(<Array<UmbBlockDataType>>[], (x) => x.udi);
+	public readonly settings = this.#settings.asObservable();
+
+	setBlockTypes(blockTypes: Array<BlockType>) {
+		this.#blockTypes.next(blockTypes);
+	}
+
+	setLayouts(layouts: Array<BlockLayoutType>) {
+		this.#layouts.next(layouts);
+	}
+
+	setContents(contents: Array<UmbBlockDataType>) {
+		this.#contents.next(contents);
+	}
+	setSettings(settings: Array<UmbBlockDataType>) {
+		this.#settings.next(settings);
+	}
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_BLOCK_MANAGER_CONTEXT_TOKEN);
+	}
+
+	blockTypeOf(contentElementTypeKey: string) {
+		return this.#blockTypes.asObservablePart((source) =>
+			source.find((x) => x.contentElementTypeKey === contentElementTypeKey),
+		);
+	}
+	layoutOf(contentUdi: string) {
+		return this.#layouts.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi));
+	}
+	contentOf(udi: string) {
+		return this.#contents.asObservablePart((source) => source.find((x) => x.udi === udi));
+	}
+	settingsOf(udi: string) {
+		return this.#settings.asObservablePart((source) => source.find((x) => x.udi === udi));
+	}
+}
+
+export const UMB_BLOCK_MANAGER_CONTEXT_TOKEN = new UmbContextToken<UmbBlockManagerContext, UmbBlockManagerContext>(
+	'UmbBlockManagerContext',
+);

src/Umbraco.Web.UI.Client/src/packages/block/block-manager/index.ts

@@ -0,0 +1,2 @@
+export * from './block-manager.context.js';
+export * from './types.js';

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

@@ -0,0 +1,15 @@
+export interface UmbBlockLayoutBaseModel {
+	contentUdi: string;
+	settingsUdi?: string;
+}
+
+export interface UmbBlockDataType {
+	udi: string;
+	contentTypeKey: string;
+}
+
+export interface UmbBlockValueType {
+	layout: { [key: string]: Array<UmbBlockLayoutBaseModel> };
+	contentData: Array<UmbBlockDataType>;
+	settingsData: Array<UmbBlockDataType>;
+}

src/Umbraco.Web.UI.Client/src/packages/block/index.ts

@@ -1 +1,2 @@
 export * from './block-type/index.js';
+export * from './block-manager/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts

@@ -4,7 +4,7 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbBasicState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export type UmbModalType = 'dialog' | 'sidebar';