Block List: Sort mode

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

@@ -5,7 +5,7 @@
 	UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
 	UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS,
 } from '../../constants.js';
-import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
 import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
@@ -96,6 +96,9 @@
 	@state()
 	private _inlineEditingMode?: boolean;
 
+	@state()
+	private _isSortMode?: boolean;
+
 	// 'content-invalid' attribute is used for styling purpose.
 	@property({ type: Boolean, attribute: 'content-invalid', reflect: true })
 	private _contentInvalid?: boolean;
@@ -122,6 +125,7 @@
 		super();
 		this.#init();
 	}
+
 	#init() {
 		this.observe(
 			this.#context.showContentEdit,
@@ -188,13 +192,9 @@
 			},
 			null,
 		);
-		this.observe(
-			this.#context.inlineEditingMode,
-			(mode) => {
-				this._inlineEditingMode = mode;
-			},
-			null,
-		);
+		this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
+		this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
+
 		// Data props:
 		this.observe(
 			this.#context.layout,
@@ -370,15 +370,19 @@
 	};
 
 	#renderRefBlock() {
-		return html`<umb-ref-list-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-ref-list-block>`;
+		return html`
+			<umb-ref-list-block
+				class=${this._isSortMode ? 'sortable' : ''}
+				.label=${this._label}
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+			</umb-ref-list-block>
+		`;
 	}
 
 	#renderInlineBlock() {
@@ -412,33 +416,42 @@
 	};
 
 	#renderBlock() {
-		return this.contentKey && (this._contentTypeAlias || this._unsupported)
-			? html`
-					<div class="umb-block-list__block">
-						<umb-extension-slot
-							type="blockEditorCustomView"
-							default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
-							.renderMethod=${this.#extensionSlotRenderMethod}
-							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
-							.props=${this._blockViewProps}
-							.filter=${this.#extensionSlotFilterMethod}
-							single></umb-extension-slot>
-						${this.#renderActionBar()}
-						${!this._showContentEdit && this._contentInvalid
-							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-							: nothing}
-					</div>
-				`
-			: nothing;
+		return when(
+			this.contentKey && (this._contentTypeAlias || this._unsupported),
+			() => html`
+				<div class="umb-block-list__block">
+					${when(
+						this._isSortMode,
+						() => this.#renderRefBlock(),
+						() => html`
+							<umb-extension-slot
+								single
+								type="blockEditorCustomView"
+								.filter=${this.#extensionSlotFilterMethod}
+								.renderMethod=${this.#extensionSlotRenderMethod}
+								.fallbackRenderMethod=${this.#renderBuiltinBlockView}
+								.props=${this._blockViewProps}>
+							</umb-extension-slot>
+						`,
+					)}
+					${this.#renderActionBar()}
+					${!this._showContentEdit && this._contentInvalid
+						? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
+						: nothing}
+				</div>
+			`,
+		);
 	}
 
 	#renderActionBar() {
-		return this._showActions
-			? html`<uui-action-bar>
-					${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
-					${this.#renderDeleteAction()}
-				</uui-action-bar>`
-			: nothing;
+		if (this._isSortMode) return nothing;
+		if (!this._showActions) return nothing;
+		return html`
+			<uui-action-bar>
+				${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
+				${this.#renderDeleteAction()}
+			</uui-action-bar>
+		`;
 	}
 
 	#renderEditContentAction() {

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

@@ -40,10 +40,11 @@ export class UmbRefListBlockElement 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>
+					`,
 				)}
 			</uui-ref-node>
 		`;
@@ -54,6 +55,7 @@ export class UmbRefListBlockElement extends UmbLitElement {
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}
+
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;
@@ -69,6 +71,21 @@ export class UmbRefListBlockElement extends UmbLitElement {
 			: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-list/context/block-list-entry.context.ts

@@ -22,18 +22,27 @@ export class UmbBlockListEntryContext extends UmbBlockEntryContext<
 		},
 	);
 
+	#isSortMode = new UmbBooleanState(undefined);
+	readonly isSortMode = this.#isSortMode.asObservable();
+
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_BLOCK_LIST_MANAGER_CONTEXT, UMB_BLOCK_LIST_ENTRIES_CONTEXT);
 	}
 
 	protected override _gotManager() {
+		if (!this._manager) return;
+
 		this.observe(
-			this._manager?.inlineEditingMode,
-			(inlineEditingMode) => {
-				this.#inlineEditingMode.setValue(inlineEditingMode);
-			},
+			this._manager.inlineEditingMode,
+			(inlineEditingMode) => this.#inlineEditingMode.setValue(inlineEditingMode),
 			'observeInlineEditingMode',
 		);
+
+		this.observe(
+			this._manager.isSortMode,
+			(isSortMode) => this.#isSortMode.setValue(isSortMode ?? false),
+			'observeIsSortMode',
+		);
 	}
 
 	protected override _gotEntries() {}

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

@@ -3,6 +3,8 @@ import type { UmbBlockListWorkspaceOriginData } from '../index.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UMB_PROPERTY_SORT_MODE_CONTEXT } from '@umbraco-cms/backoffice/property-sort-mode';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 /**
  * A implementation of the Block Manager specifically for the Block List Editor.
@@ -21,6 +23,28 @@ export class UmbBlockListManagerContext<
 		return this.#inlineEditingMode.getValue();
 	}
 
+	#sortModeContext?: typeof UMB_PROPERTY_SORT_MODE_CONTEXT.TYPE;
+	#isSortMode = new UmbBooleanState(undefined);
+	readonly isSortMode = this.#isSortMode.asObservable();
+
+	setIsSortMode(isSortMode: boolean) {
+		this.#sortModeContext?.setIsSortMode(isSortMode);
+	}
+	getIsSortMode(): boolean | undefined {
+		return this.#sortModeContext?.getIsSortMode();
+	}
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+
+		this.consumeContext(UMB_PROPERTY_SORT_MODE_CONTEXT, (sortPropertyContext) => {
+			this.#sortModeContext = sortPropertyContext;
+			this.observe(this.#sortModeContext?.isSortMode, (isSortMode) => {
+				this.#isSortMode.setValue(isSortMode);
+			});
+		});
+	}
+
 	/**
 	 * @param contentElementTypeKey
 	 * @param partialLayoutEntry

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

@@ -1,14 +1,14 @@
 import { manifests as clipboardManifests } from './clipboard/manifests.js';
-import { manifests as propertValueClonerManifests } from './property-value-cloner/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
+import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
 import { manifests as validationManifests } from './validation/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
 	...clipboardManifests,
-	...propertValueClonerManifests,
 	...propertyEditorManifests,
+	...propertyValueClonerManifests,
 	...validationManifests,
 	...workspaceManifests,
 ];

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

@@ -1,11 +1,12 @@
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
 import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/property-editor';
 
 export const manifest: ManifestPropertyEditorSchema = {
 	type: 'propertyEditorSchema',
 	name: 'Block List',
-	alias: 'Umbraco.BlockList',
+	alias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
 	meta: {
-		defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockList',
+		defaultPropertyEditorUiAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS,
 		settings: {
 			properties: [
 				{