Feature: Block workspace modal size from block type (#17501)

* correct ctrl alias

* move types

* undefined as an overlay size option

* make modal size an observable

* change set size order

* remove log

Author: nielslyngsoe

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

@@ -25,6 +25,7 @@ import {
 	UMB_BLOCK_ENTRY_CONTEXT,
 } from '@umbraco-cms/backoffice/block';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 
 export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings';
 export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel>
@@ -44,6 +45,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	setOriginData(data: UmbBlockWorkspaceOriginData) {
 		this.#originData = data;
 	}
+	#modalContext?: typeof UMB_MODAL_CONTEXT.TYPE;
 	#retrieveModalContext;
 
 	#entityType: string;
@@ -83,6 +85,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		this.addValidationContext(this.settings.validation);
 
 		this.#retrieveModalContext = this.consumeContext(UMB_MODAL_CONTEXT, (context) => {
+			this.#modalContext = context;
 			this.#originData = context?.data.originData;
 			context.onSubmit().catch(this.#modalRejected);
 		}).asPromise();
@@ -116,7 +119,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 					this.#variantId.setValue(variantId);
 				},
-				'observeBlockType',
+				'observeVariantIds',
 			);
 
 			this.removeUmbControllerByAlias('observeHasExpose');
@@ -156,6 +159,22 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 				},
 				'observeIsReadOnly',
 			);
+
+			this.observe(
+				this.content.contentTypeId,
+				(contentTypeId) => {
+					this.observe(
+						contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined,
+						(blockType) => {
+							if (blockType?.editorSize) {
+								this.setEditorSize(blockType.editorSize);
+							}
+						},
+						'observeBlockType',
+					);
+				},
+				'observeContentTypeId',
+			);
 		});
 
 		this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
@@ -197,6 +216,10 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		]);
 	}
 
+	setEditorSize(editorSize: UUIModalSidebarSize) {
+		this.#modalContext?.setModalSize(editorSize);
+	}
+
 	protected override resetState() {
 		super.resetState();
 		this.#name.setValue(undefined);

src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts

@@ -13,6 +13,7 @@ import {
 	type UUIDialogElement,
 	type UUIModalDialogElement,
 	type UUIModalSidebarElement,
+	type UUIModalSidebarSize,
 } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_ROUTE_CONTEXT, type UmbRouterSlotElement } from '@umbraco-cms/backoffice/router';
 import { createExtensionElement, loadManifestElement } from '@umbraco-cms/backoffice/extension-api';
@@ -117,7 +118,13 @@ export class UmbModalElement extends UmbLitElement {
 
 	#createSidebarElement() {
 		const sidebarElement = document.createElement('uui-modal-sidebar');
-		sidebarElement.size = this.#modalContext!.size;
+		this.observe(
+			this.#modalContext!.size,
+			(size) => {
+				sidebarElement.size = size as UUIModalSidebarSize;
+			},
+			'observeSize',
+		);
 		return sidebarElement;
 	}
 

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

@@ -1,29 +1,9 @@
 import type { UmbModalToken } from '../token/modal-token.js';
 import { UmbModalContext, type UmbModalContextClassArgs } from './modal.context.js';
-import type { UUIModalElement, 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 type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import type { ElementLoaderProperty } from '@umbraco-cms/backoffice/extension-api';
-
-export type UmbModalType = 'dialog' | 'sidebar' | 'custom';
-
-export interface UmbModalConfig {
-	key?: string;
-	type?: UmbModalType;
-	size?: UUIModalSidebarSize;
-
-	/**
-	 * Used to provide a custom modal element to replace the default uui-modal-dialog or uui-modal-sidebar
-	 */
-	element?: ElementLoaderProperty<UUIModalElement>;
-
-	/**
-	 * Set the background property of the modal backdrop
-	 */
-	backdropBackground?: string;
-}
 
 export class UmbModalManagerContext extends UmbContextBase<UmbModalManagerContext> {
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.

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

@@ -1,10 +1,10 @@
 import { UmbModalToken } from '../token/modal-token.js';
-import type { UmbModalConfig, UmbModalType } from './modal-manager.context.js';
+import type { UmbModalConfig, UmbModalType } from '../types.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { IRouterSlot } from '@umbraco-cms/backoffice/external/router-slot';
 import type { UUIModalElement, UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbId } from '@umbraco-cms/backoffice/id';
-import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { type UmbDeepPartialObject, umbDeepMerge } from '@umbraco-cms/backoffice/utils';
 import type { ElementLoaderProperty } from '@umbraco-cms/backoffice/extension-api';
@@ -38,15 +38,17 @@ export class UmbModalContext<
 	public readonly key: string;
 	public readonly data: ModalData;
 	public readonly type: UmbModalType = 'dialog';
-	public readonly size: UUIModalSidebarSize = 'small';
-	public element?: ElementLoaderProperty<UUIModalElement>;
+	public readonly element?: ElementLoaderProperty<UUIModalElement>;
 	public readonly backdropBackground?: string;
 	public readonly router: IRouterSlot | null = null;
 	public readonly alias: string | UmbModalToken<ModalData, ModalValue>;
 
 	#value;
 	public readonly value;
 
+	#size = new UmbStringState<UUIModalSidebarSize>('small');
+	public readonly size = this.#size.asObservable();
+
 	constructor(
 		host: UmbControllerHost,
 		modalAlias: string | UmbModalToken<ModalData, ModalValue>,
@@ -57,18 +59,24 @@ export class UmbModalContext<
 		this.router = args.router ?? null;
 		this.alias = modalAlias;
 
+		let size = 'small';
+
 		if (this.alias instanceof UmbModalToken) {
 			this.type = this.alias.getDefaultModal()?.type || this.type;
-			this.size = this.alias.getDefaultModal()?.size || this.size;
+			size = this.alias.getDefaultModal()?.size ?? size;
 			this.element = this.alias.getDefaultModal()?.element || this.element;
 			this.backdropBackground = this.alias.getDefaultModal()?.backdropBackground || this.backdropBackground;
 		}
 
 		this.type = args.modal?.type || this.type;
-		this.size = args.modal?.size || this.size;
+		size = args.modal?.size ?? size;
 		this.element = args.modal?.element || this.element;
 		this.backdropBackground = args.modal?.backdropBackground || this.backdropBackground;
 
+		console.log('size', size);
+
+		this.#size.setValue(size);
+
 		const defaultData = this.alias instanceof UmbModalToken ? this.alias.getDefaultData() : undefined;
 		this.data = Object.freeze(
 			// If we have both data and defaultData perform a deep merge
@@ -153,6 +161,16 @@ export class UmbModalContext<
 		this.#value.update(partialValue);
 	}
 
+	/**
+	 * Updates the size this modal.
+	 * @param size
+	 * @public
+	 * @memberof UmbModalContext
+	 */
+	setModalSize(size: UUIModalSidebarSize) {
+		this.#size.setValue(size);
+	}
+
 	public override destroy(): void {
 		this.dispatchEvent(new CustomEvent('umb:destroy'));
 		this.#value.destroy();

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

@@ -1,4 +1,4 @@
-import type { UmbModalConfig } from '../context/modal-manager.context.js';
+import type { UmbModalConfig } from '../types.js';
 
 export interface UmbModalTokenDefaults<
 	ModalDataType extends { [key: string]: any } = { [key: string]: any },

src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts

@@ -1,3 +1,6 @@
+import type { UUIModalElement, UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
+import type { ElementLoaderProperty } from '@umbraco-cms/backoffice/extension-api';
+
 export type * from './extensions/index.js';
 
 export interface UmbPickerModalData<ItemType> {
@@ -15,3 +18,21 @@ export interface UmbPickerModalSearchConfig {
 export interface UmbPickerModalValue {
 	selection: Array<string | null>;
 }
+
+export type UmbModalType = 'dialog' | 'sidebar' | 'custom';
+
+export interface UmbModalConfig {
+	key?: string;
+	type?: UmbModalType;
+	size?: UUIModalSidebarSize;
+
+	/**
+	 * Used to provide a custom modal element to replace the default uui-modal-dialog or uui-modal-sidebar
+	 */
+	element?: ElementLoaderProperty<UUIModalElement>;
+
+	/**
+	 * Set the background property of the modal backdrop
+	 */
+	backdropBackground?: string;
+}

src/Umbraco.Web.UI.Client/src/packages/property-editors/overlay-size/property-editor-ui-overlay-size.element.ts

@@ -15,9 +15,11 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme
 	@property()
 	value: UUIModalSidebarSize | string = '';
 
+	// TODO: Stop having global type of the UUI-SELECT element. And make it possible to have undefined as an option.
 	@state()
 	private _list: Array<Option> = [
-		{ value: 'small', name: 'Small', selected: true },
+		{ value: undefined as any, name: 'Default', selected: true },
+		{ value: 'small', name: 'Small' },
 		{ value: 'medium', name: 'Medium' },
 		{ value: 'large', name: 'Large' },
 		{ value: 'full', name: 'Full' },