Fix: 17533

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

@@ -107,9 +107,6 @@
  */
 @customElement('umb-block-grid-entries')
 export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
-	//
-	// TODO: Make sure Sorter callbacks handles columnSpan when retrieving a new entry.
-
 	//
 	#sorter = new UmbSorterController<UmbBlockGridLayoutModel, UmbBlockGridEntryElement>(this, {
 		...SORTER_CONFIG,
@@ -197,62 +194,71 @@
 				//this.requestUpdate('layoutEntries', oldValue);
 			},
 			null,
 		);
-
 		this.observe(
 			this.#context.amountOfAllowedBlockTypes,
 			(length) => {
 				this._canCreate = length > 0;
 				if (length === 1) {
 					this.observe(
 						this.#context.firstAllowedBlockTypeName(),
 						(firstAllowedName) => {
 							this._createLabel = this.localize.term('blockEditor_addThis', this.localize.string(firstAllowedName));
 						},
 						'observeSingleBlockTypeName',
 					);
 				} else {
 					this.removeUmbControllerByAlias('observeSingleBlockTypeName');
 					this._createLabel = this.localize.term('blockEditor_addBlock');
 				}
 			},
 			null,
 		);
 
 		this.observe(
 			this.#context.rangeLimits,
 			(rangeLimits) => {
 				this.#setupRangeValidation(rangeLimits);
 			},
 			null,
 		);
 
 		this.observe(
 			this.#context.hasTypeLimits,
 			(hasTypeLimits) => {
 				this.#setupBlockTypeLimitValidation(hasTypeLimits);
 			},
 			null,
 		);
 
 		this.#context.getManager().then((manager) => {
 			this.observe(
 				manager.layoutStylesheet,
 				(stylesheet) => {
 					if (!stylesheet || this._styleElement?.href === stylesheet) return;
 					this._styleElement = document.createElement('link');
 					this._styleElement.rel = 'stylesheet';
 					this._styleElement.href = stylesheet;
 				},
 				'observeStylesheet',
 			);
 
 			this.observe(
 				manager.readOnlyState.isReadOnly,
 				(isReadOnly) => (this._isReadOnly = isReadOnly),
 				'observeIsReadOnly',
 			);
 
+			this.observe(
+				manager.variantId,
+				(variantId) => {
+					if (variantId) {
+						this.#sorter.identifier = 'umb-block-grid-' + variantId.toString();
+					}
+				},
+				'observeVariantId',
+			);
+
 			if (this.areaKey) {
 				this.observe(
 					this.#context.areaTypeCreateLabel,

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

@@ -555,13 +555,31 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				display: block;
 				--umb-block-grid-entry-actions-opacity: 0;
 			}
+
 			:host([settings-invalid]),
 			:host([content-invalid]),
 			:host(:hover),
 			:host(:focus-within) {
 				--umb-block-grid-entry-actions-opacity: 1;
 			}
 
+			:host::after {
+				content: '';
+				position: absolute;
+				z-index: 1;
+				pointer-events: none;
+				inset: 0;
+				border: 1px solid transparent;
+				border-radius: var(--uui-border-radius);
+
+				transition: border-color 240ms ease-in;
+			}
+
+			:host([settings-invalid])::after,
+			:host([content-invalid])::after {
+				border-color: var(--uui-color-danger);
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
@@ -591,17 +609,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				height: 100%;
 			}
 
-			:host::after {
-				content: '';
-				position: absolute;
-				z-index: 1;
-				pointer-events: none;
-				inset: 0;
-				border: 1px solid transparent;
-				border-radius: var(--uui-border-radius);
-
-				transition: border-color 240ms ease-in;
-			}
 			:host(:hover):not(:drop)::after {
 				display: block;
 				border-color: var(--uui-color-interactive-emphasis);
@@ -630,15 +637,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				opacity: 0;
 			}
 
-			:host([settings-invalid])::after,
-			:host([content-invalid])::after {
-				border-color: var(--uui-color-danger);
-			}
-			:host([settings-invalid])::before,
-			:host([content-invalid])::before {
-				background-color: var(--uui-color-danger);
-			}
-
 			uui-badge {
 				z-index: 2;
 			}

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

@@ -31,6 +31,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 			}
 
 			#open-part {
+				display: flex;
 				min-height: var(
 					--uui-size-layout-2
 				); /* TODO: We should not do this, but it is a quick fix for now to ensure that the top part of a block gets a minimum height. */

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

@@ -13,6 +13,7 @@ import type {
 	ManifestBlockEditorCustomView,
 	UmbBlockEditorCustomViewProperties,
 } from '@umbraco-cms/backoffice/block-custom-view';
+import { UUIBlinkAnimationValue } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-block-list-entry
@@ -302,20 +303,22 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	#renderBlock() {
 		return this.contentKey && this._contentTypeAlias
 			? html`
-					<umb-extension-slot
-						type="blockEditorCustomView"
-						default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
-						.props=${this._blockViewProps}
-						.filter=${this.#extensionSlotFilterMethod}
-						single
-						>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
-					>
-					<uui-action-bar>
-						${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
-					</uui-action-bar>
-					${!this._showContentEdit && this._contentInvalid
-						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
-						: nothing}
+					<div class="umb-block-list__block">
+						<umb-extension-slot
+							type="blockEditorCustomView"
+							default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
+							.props=${this._blockViewProps}
+							.filter=${this.#extensionSlotFilterMethod}
+							single
+							>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
+						>
+						<uui-action-bar>
+							${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}
+						</uui-action-bar>
+						${!this._showContentEdit && this._contentInvalid
+							? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+							: nothing}
+					</div>
 				`
 			: nothing;
 	}
@@ -385,6 +388,23 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 				--umb-block-list-entry-actions-opacity: 1;
 			}
 
+			:host::after {
+				content: '';
+				position: absolute;
+				z-index: 1;
+				pointer-events: none;
+				inset: 0;
+				border: 1px solid transparent;
+				border-radius: var(--uui-border-radius);
+
+				transition: border-color 240ms ease-in;
+			}
+
+			:host([settings-invalid])::after,
+			:host([content-invalid])::after {
+				border-color: var(--uui-color-danger);
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
@@ -393,23 +413,47 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 				transition: opacity 120ms;
 			}
 
-			:host([drag-placeholder]) {
-				opacity: 0.2;
-				--umb-block-list-entry-actions-opacity: 0;
+			uui-badge {
+				z-index: 2;
 			}
 
-			:host([settings-invalid])::after,
-			:host([content-invalid])::after {
+			:host::after {
 				content: '';
 				position: absolute;
-				inset: 0;
+				z-index: 1;
 				pointer-events: none;
-				border: 1px solid var(--uui-color-danger);
+				inset: 0;
+				border: 1px solid transparent;
 				border-radius: var(--uui-border-radius);
+
+				transition: border-color 240ms ease-in;
+			}
+			:host(:hover):not(:drop)::after {
+				display: block;
+				border-color: var(--uui-color-interactive-emphasis);
+				box-shadow:
+					0 0 0 1px rgba(255, 255, 255, 0.7),
+					inset 0 0 0 1px rgba(255, 255, 255, 0.7);
 			}
 
-			uui-badge {
-				z-index: 2;
+			:host([drag-placeholder])::after {
+				display: block;
+				border-width: 2px;
+				border-color: var(--uui-color-interactive-emphasis);
+				animation: ${UUIBlinkAnimationValue};
+			}
+			:host([drag-placeholder])::before {
+				content: '';
+				position: absolute;
+				pointer-events: none;
+				inset: 0;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-interactive-emphasis);
+				opacity: 0.12;
+			}
+			:host([drag-placeholder]) .umb-block-list__block {
+				transition: opacity 50ms 16ms;
+				opacity: 0;
 			}
 		`,
 	];

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

@@ -1,4 +1,4 @@
 import { isWithinRect } from '@umbraco-cms/backoffice/utils';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 
@@ -203,7 +203,7 @@
 	Partial<Pick<INTERNAL_UmbSorterConfig<T, ElementType>, 'ignorerSelector' | 'containerSelector' | 'identifier'>>;
 
 /**
- 
+
  * @class UmbSorterController
  * @implements {UmbControllerInterface}
  * @description This controller can make user able to sort items.
@@ -265,6 +265,12 @@
 	public get identifier() {
 		return this.#config.identifier;
 	}
+	public set identifier(identifier: UniqueType) {
+		this.#config.identifier = identifier;
+	}
+	#isActiveIdentifier() {
+		return UmbSorterController.activeSorter?.identifier === this.identifier;
+	}
 
 	constructor(host: UmbControllerHostElement, config: UmbSorterConfig<T, ElementType>) {
 		super(host);
@@ -460,7 +466,7 @@
 		}
 
 		// If we have a currentItem and the element matches, we should set the currentElement to this element.
-		if (UmbSorterController.activeItem) {
+		if (UmbSorterController.activeItem && this.#isActiveIdentifier()) {
 			const elUnique = this.#config.getUniqueOfElement(element);
 			const modelUnique = this.#config.getUniqueOfModel(UmbSorterController.activeItem);
 			if (elUnique === modelUnique && elUnique !== undefined) {
@@ -587,12 +593,12 @@
 	};
 
 	#handleDragEnd = async (event?: DragEvent) => {
-		// If not good drop, revert model?
-
 		if (!UmbSorterController.activeElement || !UmbSorterController.activeItem) {
 			return;
 		}
 
+		// If browser thinks this was a cancelled move, we should revert the move. (based on dropEffect === 'none') [NL]
+		// But notice, this also count when releasing the mouse outside the sorters element, this i'm not sure if I agree on, would be ideal only to revert if ESC was pressed. [NL]
 		if (UmbSorterController.originalSorter && event?.dataTransfer != null && event.dataTransfer.dropEffect === 'none') {
 			// Revert move, to start position.
 			UmbSorterController.originalSorter.moveItemInModel(