Block Grid: Sort mode

src/Umbraco.Web.UI.Client/package.json

@@ -105,7 +105,7 @@
 		"./server": "./dist-cms/packages/core/server/index.js",
 		"./settings": "./dist-cms/packages/settings/index.js",
 		"./shortcut": "./dist-cms/packages/core/shortcut/index.js",
-		"./sorter": "./dist-cms/packages/core/sorter/index.js",
+		"./sorter": "./dist-cms/packages/sorter/index.js",
 		"./static-file": "./dist-cms/packages/static-file/index.js",
 		"./store": "./dist-cms/packages/core/store/index.js",
 		"./style": "./dist-cms/packages/core/style/index.js",

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -38,6 +38,7 @@ const CORE_PACKAGES = [
 	import('../../packages/relations/umbraco-package.js'),
 	import('../../packages/rte/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
+	import('../../packages/sorter/umbraco-package.js'),
 	import('../../packages/static-file/umbraco-package.js'),
 	import('../../packages/sysinfo/umbraco-package.js'),
 	import('../../packages/tags/umbraco-package.js'),

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

@@ -9,12 +9,13 @@ import {
 } from '@umbraco-cms/backoffice/observable-api';
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 import type { UmbBlockDataModel } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 /**
  * A implementation of the Block Manager specifically for the Block Grid Editor.
@@ -33,6 +34,18 @@ export class UmbBlockGridManagerContext<
 		return this.#inlineEditingMode.getValue();
 	}
 
+	#sortPropertyContext?: typeof UMB_SORT_PROPERTY_CONTEXT.TYPE;
+	#sortingMode = new UmbBooleanState(undefined);
+	readonly sortingMode = this.#sortingMode.asObservable();
+
+	setSortingMode(sortingMode: boolean) {
+		this.#sortPropertyContext?.setSortingMode(sortingMode);
+	}
+	getSortingMode(): boolean | undefined {
+		//return this.#sortingMode.getValue();
+		return this.#sortPropertyContext?.getSortingMode();
+	}
+
 	#initAppUrl: Promise<unknown>;
 
 	#serverUrl?: string;
@@ -90,7 +103,15 @@ export class UmbBlockGridManagerContext<
 		this.#initAppUrl = this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
 			this.#serverUrl = instance?.getServerUrl();
 		}).asPromise({ preventTimeout: true });
+
+		this.consumeContext(UMB_SORT_PROPERTY_CONTEXT, (sortPropertyContext) => {
+			this.#sortPropertyContext = sortPropertyContext;
+			this.observe(this.#sortPropertyContext?.sortingMode, (sortingMode) => {
+				this.#sortingMode.setValue(sortingMode);
+			});
+		});
 	}
+
 	/**
 	 * @param contentElementTypeKey
 	 * @param partialLayoutEntry

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

@@ -1,8 +1,8 @@
 import type { UmbBlockGridTypeAreaType } from '../../types.js';
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../block-grid-entry/constants.js';
 import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../block-grid-manager/constants.js';
+import { css, customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 
 /**
  * @description
@@ -56,24 +56,27 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 	}
 
 	override render() {
-		return this._areas && this._areas.length > 0
-			? html` ${this._styleElement}
-					<div
-						class="umb-block-grid__area-container"
-						part="area-container"
-						style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
-						${repeat(
-							this._areas,
-							(area) => area.key,
-							(area) =>
-								html`<umb-block-grid-entries
-									part="area"
-									class="umb-block-grid__area"
-									.areaKey=${area.key}
-									.layoutColumns=${area.columnSpan}></umb-block-grid-entries>`,
-						)}
-					</div>`
-			: '';
+		if (!this._areas?.length) return nothing;
+		return html`
+			${this._styleElement}
+			<div
+				class="umb-block-grid__area-container"
+				part="area-container"
+				style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
+				${repeat(
+					this._areas!,
+					(area) => area.key,
+					(area) => html`
+						<umb-block-grid-entries
+							part="area"
+							class="umb-block-grid__area"
+							.areaKey=${area.key}
+							.layoutColumns=${area.columnSpan}>
+						</umb-block-grid-entries>
+					`,
+				)}
+			</div>
+		`;
 	}
 
 	static override styles = [

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

@@ -76,10 +76,12 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 				'observeContentKey',
 			);
 		});
+
 		this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (entriesContext) => {
 			this.#parentUnique = entriesContext?.getParentUnique();
 			this.#areaKey = entriesContext?.getAreaKey();
 		});
+
 		new UmbExtensionApiInitializer(
 			this,
 			umbExtensionsRegistry,
@@ -188,33 +190,44 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			</span>
 			${when(
 				this.unpublished,
-				() =>
-					html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-					></uui-tag>`,
+				() => html`
+					<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+						<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+					</uui-tag>
+				`,
 			)}
 		`;
 	}
 
 	#renderInside() {
 		if (this.unpublished === true) {
-			return html`<uui-button id="exposeButton" @click=${this.#expose}
-				><uui-icon name="icon-add"></uui-icon>
-				<umb-localize
-					key="blockEditor_createThisFor"
-					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
-			></uui-button>`;
+			return html`
+				<uui-button id="exposeButton" @click=${this.#expose}>
+					<uui-icon name="icon-add"></uui-icon>
+					<umb-localize
+						key="blockEditor_createThisFor"
+						.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize>
+				</uui-button>
+			`;
 		} else {
-			return html`<div id="inside" draggable="false">
-				<umb-property-type-based-property
-					.property=${this._inlineProperty}
-					.dataPath=${this._inlinePropertyDataPath ?? ''}
-					slot="areas"></umb-property-type-based-property>
-				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
-			</div>`;
+			return html`
+				<div id="inside" draggable="false">
+					<umb-property-type-based-property
+						.property=${this._inlineProperty}
+						.dataPath=${this._inlinePropertyDataPath ?? ''}
+						slot="areas"></umb-property-type-based-property>
+					<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
+				</div>
+			`;
 		}
 	}
 
+	override destroy(): void {
+		super.destroy();
+		this.#blockContext?.destroy();
+		this.#workspaceContext?.destroy();
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`

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

@@ -31,10 +31,12 @@ export class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
 	}
 
 	#renderInside() {
-		return html`<div id="inside" draggable="false">
-			${this.localize.term('blockEditor_unsupportedBlockDescription')}
-			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
-		</div>`;
+		return html`
+			<div id="inside" draggable="false">
+				${this.localize.term('blockEditor_unsupportedBlockDescription')}
+				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
+			</div>
+		`;
 	}
 
 	static override styles = [

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

@@ -39,10 +39,11 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 				${when(
 					this.unpublished,
-					() =>
-						html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-							><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-						></uui-tag>`,
+					() => html`
+						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+						</uui-tag>
+					`,
 				)}
 				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
 			</umb-ref-grid-block>
@@ -51,9 +52,6 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 
 	static override styles = [
 		css`
-			umb-block-grid-areas-container {
-				margin-top: calc(var(--uui-size-2) + 1px);
-			}
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
@@ -64,10 +62,27 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 				margin-top: -0.3em;
 				vertical-align: text-top;
 			}
+
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;
 			}
+
+			@keyframes umb-icon-jiggle {
+				0%,
+				100% {
+					transform: rotate(6deg);
+				}
+				50% {
+					transform: rotate(-6deg);
+				}
+			}
+
+			:host(.sortable) {
+				umb-icon {
+					animation: umb-icon-jiggle 500ms infinite ease-in-out;
+				}
+			}
 		`,
 	];
 }

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

@@ -401,6 +401,7 @@ export class UmbBlockGridEntriesContext
 		this.#allowedBlockTypes.setValue(this.#retrieveAllowedElementTypes());
 		this.#setupAllowedBlockTypesLimits();
 	}
+
 	#setupRangeLimits() {
 		if (!this._manager) return;
 		//const range = this.#retrieveRangeLimits();