props update approach

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -15,7 +15,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
 		return modelEntry.contentUdi;
 	},
 	identifier: 'block-grid-editor',
-	itemSelector: '.umb-block-grid__layout-item',
+	itemSelector: 'umb-block-grid-entry',
 	//ignorerSelector: '', // No ignorerSelector, as we want to ignore nothing.
 	//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
 };

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -64,6 +64,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	_blockViewProps: UmbBlockViewPropsType<UmbBlockGridLayoutModel> = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
 
+	#updateBlockViewProps(incoming: Partial<UmbBlockViewPropsType<UmbBlockGridLayoutModel>>) {
+		this._blockViewProps = { ...this._blockViewProps, ...incoming };
+		this.requestUpdate('_blockViewProps');
+	}
+
 	constructor() {
 		super();
 
@@ -75,19 +80,19 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			this._hasSettings = !!settingsElementTypeKey;
 		});
 		this.observe(this.#context.label, (label) => {
-			this._blockViewProps.label = label;
+			this.#updateBlockViewProps({ label });
 			this._label = label;
 		});
 
 		// Data:
 		this.observe(this.#context.layout, (layout) => {
-			this._blockViewProps.layout = layout;
+			this.#updateBlockViewProps({ layout });
 		});
 		this.observe(this.#context.content, (content) => {
-			this._blockViewProps.content = content;
+			this.#updateBlockViewProps({ content });
 		});
 		this.observe(this.#context.settings, (settings) => {
-			this._blockViewProps.settings = settings;
+			this.#updateBlockViewProps({ settings });
 		});
 
 		// Paths:
@@ -98,13 +103,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		});
 		this.observe(this.#context.workspaceEditContentPath, (path) => {
 			this._workspaceEditContentPath = path;
-			this._blockViewProps.urls.editContent = path;
-			this.requestUpdate('_blockViewProps');
+			this.#updateBlockViewProps({ urls: { ...this._blockViewProps.urls, editContent: path } });
 		});
 		this.observe(this.#context.workspaceEditSettingsPath, (path) => {
 			this._workspaceEditSettingsPath = path;
-			this._blockViewProps.urls.editSettings = path;
-			this.requestUpdate('_blockViewProps');
+			this.#updateBlockViewProps({ urls: { ...this._blockViewProps.urls, editSettings: path } });
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts

@@ -51,7 +51,8 @@ function destroyIgnorerElements(element: HTMLElement, ignorerSelectors: string)
 	});
 }
 function setupPreventEvent(element: Element) {
-	(element as HTMLElement).draggable = false;
+	//(element as HTMLElement).draggable = false;
+	(element as HTMLElement).setAttribute('draggable', 'false');
 }
 function destroyPreventEvent(element: Element) {
 	element.removeAttribute('draggable');
@@ -277,7 +278,9 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		}
 
 		if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
-			element.draggable = true;
+			console.log('— setup', element);
+			//element.draggable = true;
+			(element as HTMLElement).setAttribute('draggable', 'true');
 			element.addEventListener('dragstart', this.#handleDragStart);
 			element.addEventListener('dragend', this.#handleDragEnd);
 		}