@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/manifests.js

@@ -1,78 +1,86 @@
-import { manifest as blockGridSchemaManifest } from './Umbraco.BlockGrid.js';
+import { manifest as propertyEditorSchema } from './Umbraco.BlockGrid.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
-import { manifests as propertyActionManifests } from './property-actions/manifests.js';
 import { UmbStandardBlockValueResolver } from '../../../block/index.js';
-export const manifests = [
-    {
-        type: 'propertyEditorUi',
-        alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
-        name: 'Block Grid Property Editor UI',
-        element: () => import('./property-editor-ui-block-grid.element.js'),
-        meta: {
-            label: 'Block Grid',
-            propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
-            icon: 'icon-layout',
-            group: 'richContent',
-            supportsReadOnly: true,
-            settings: {
-                properties: [
-                    {
-                        alias: 'blockGroups',
-                        label: '',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
-                        weight: 1,
-                    },
-                    {
-                        alias: 'useLiveEditing',
-                        label: 'Live editing mode',
-                        description: 'Live update content when editing in overlay',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-                    },
-                    {
-                        alias: 'maxPropertyWidth',
-                        label: 'Editor width',
-                        description: 'Optional css overwrite. (example: 1200px or 100%)',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
-                    },
-                    {
-                        alias: 'createLabel',
-                        label: 'Create Button Label',
-                        description: 'Override the label text for adding a new block, Example Add Widget',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
-                    },
-                    {
-                        alias: 'gridColumns',
-                        label: 'Grid Columns',
-                        description: 'Set the number of columns for the layout.',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
-                        config: [
-                            { alias: 'min', value: 0 },
-                            { alias: 'placeholder', value: '12' },
-                        ],
-                    },
-                    {
-                        alias: 'layoutStylesheet',
-                        label: 'Layout Stylesheet',
-                        description: 'Override default stylesheet for backoffice layout.',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
-                        config: [
-                            {
-                                alias: 'singleItemMode',
-                                value: true,
-                            },
-                        ],
-                    },
-                ],
-            },
+const propertyEditorUi = {
+    type: 'propertyEditorUi',
+    alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
+    name: 'Block Grid Property Editor UI',
+    element: () => import('./property-editor-ui-block-grid.element.js'),
+    meta: {
+        label: 'Block Grid',
+        propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
+        icon: 'icon-layout',
+        group: 'richContent',
+        supportsReadOnly: true,
+        settings: {
+            properties: [
+                {
+                    alias: 'blockGroups',
+                    label: '',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
+                    weight: 1,
+                },
+                {
+                    alias: 'useLiveEditing',
+                    label: 'Live editing mode',
+                    description: 'Live update content when editing in overlay',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                },
+                {
+                    alias: 'maxPropertyWidth',
+                    label: 'Editor width',
+                    description: 'Optional css overwrite. (example: 1200px or 100%)',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+                },
+                {
+                    alias: 'createLabel',
+                    label: 'Create Button Label',
+                    description: 'Override the label text for adding a new block, Example Add Widget',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+                },
+                {
+                    alias: 'gridColumns',
+                    label: 'Grid Columns',
+                    description: 'Set the number of columns for the layout.',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                    config: [
+                        { alias: 'min', value: 0 },
+                        { alias: 'placeholder', value: '12' },
+                    ],
+                },
+                {
+                    alias: 'layoutStylesheet',
+                    label: 'Layout Stylesheet',
+                    description: 'Override default stylesheet for backoffice layout.',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
+                    config: [
+                        {
+                            alias: 'singleItemMode',
+                            value: true,
+                        },
+                    ],
+                },
+            ],
         },
     },
-    {
-        type: 'propertyValueResolver',
-        alias: 'Umb.PropertyValueResolver.BlockGrid',
-        name: 'Block Value Resolver',
-        api: UmbStandardBlockValueResolver,
-        forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
-    },
-    blockGridSchemaManifest,
-    ...propertyActionManifests,
+};
+const propertyValueResolver = {
+    type: 'propertyValueResolver',
+    alias: 'Umb.PropertyValueResolver.BlockGrid',
+    name: 'Block Grid Value Resolver',
+    api: UmbStandardBlockValueResolver,
+    forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
+};
+const sortModePropertyContext = {
+    type: 'propertyContext',
+    kind: 'sortMode',
+    alias: 'Umb.PropertyContext.BlockGrid.SortMode',
+    name: 'Block Grid Sort Mode Property Context',
+    forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+};
+export const manifests = [
+    propertyEditorSchema,
+    propertyEditorUi,
+    propertyValueResolver,
+    sortModePropertyContext,
 ];

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.d.ts

@@ -1,6 +1,7 @@
 import type { UmbBlockGridValueModel } from '../../types.js';
+import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { type PropertyValueMap, nothing } from '../../../../../external/lit/index.js';
+import type { PropertyValueMap } from '../../../../../external/lit/index.js';
 import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import '../../local-components.js';
 declare const UmbPropertyEditorUIBlockGridElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbBlockGridValueModel | undefined>> & typeof UmbLitElement;
@@ -9,6 +10,9 @@ declare const UmbPropertyEditorUIBlockGridElement_base: import("../../../../../l
  */
 export declare class UmbPropertyEditorUIBlockGridElement extends UmbPropertyEditorUIBlockGridElement_base implements UmbPropertyEditorUiElement {
     #private;
+    private _layoutColumns?;
+    private _notSupportedVariantSetting?;
+    private _isSortMode;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -17,10 +21,10 @@ export declare class UmbPropertyEditorUIBlockGridElement extends UmbPropertyEdit
      */
     set readonly(value: boolean);
     get readonly(): boolean;
-    private _layoutColumns?;
+    mandatory?: boolean;
+    mandatoryMessage: string;
     set value(value: UmbBlockGridValueModel | undefined);
     get value(): UmbBlockGridValueModel | undefined;
-    private _notSupportedVariantSetting?;
     constructor();
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.js

@@ -6,24 +6,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbBlockGridManagerContext } from '../../block-grid-manager/index.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
+import { css, customElement, html, nothing, property, ref, state } from '../../../../../external/lit/index.js';
+import { debounceTime } from '../../../../../external/rxjs/index.js';
+import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
+import { UmbFormControlMixin, UmbValidationContext, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, } from '../../../../core/validation/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { html, customElement, property, state, css, ref, nothing, } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
-import { UmbFormControlMixin, UmbValidationContext } from '../../../../core/validation/index.js';
-import { debounceTime } from '../../../../../external/rxjs/index.js';
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../../../content/content/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
+import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
 // TODO: consider moving the components to the property editor folder as they are only used here
 import '../../local-components.js';
-import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../../../content/content/index.js';
 /**
  * @element umb-property-editor-ui-block-grid
  */
 let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElement extends UmbFormControlMixin(UmbLitElement) {
-    #validationContext = new UmbValidationContext(this);
-    #managerContext = new UmbBlockGridManagerContext(this);
-    //
-    #lastValue = undefined;
+    #lastValue;
+    #managerContext;
+    #validationContext;
     set config(config) {
         if (!config)
             return;
@@ -54,7 +54,7 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
     get readonly() {
         return this.#readonly;
     }
-    #readonly = false;
+    #readonly;
     set value(value) {
         this.#lastValue = value;
         if (!value) {
@@ -77,6 +77,18 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
     }
     constructor() {
         super();
+        this.#lastValue = undefined;
+        this.#managerContext = new UmbBlockGridManagerContext(this);
+        this.#validationContext = new UmbValidationContext(this);
+        this._isSortMode = false;
+        this.#readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+        this.addValidator('valueMissing', () => this.mandatoryMessage, () => {
+            if (!this.mandatory || this.readonly)
+                return false;
+            const count = this.value?.layout?.[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.length ?? 0;
+            return count === 0;
+        });
         this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (context) => {
             if (context) {
                 this.observe(observeMultiple([
@@ -158,9 +170,12 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
                 this.#managerContext.setPropertyAlias(alias);
             }, 'observePropertyAlias');
         });
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (context) => {
-            this.#managerContext.setVariantId(context?.getVariantId());
+        this.consumeContext(UMB_VARIANT_CONTEXT, async (context) => {
+            this.observe(context?.displayVariantId, (variantId) => {
+                this.#managerContext.setVariantId(variantId);
+            }, 'observeContextualVariantId');
         });
+        this.observe(this.#managerContext.isSortMode, (isSortMode) => (this._isSortMode = isSortMode ?? false));
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -184,31 +199,29 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
         }
     }
     render() {
-        if (this._notSupportedVariantSetting) {
+        if (this._notSupportedVariantSetting)
             return nothing;
-        }
-        return html ` <umb-block-grid-entries
-			${ref(this.#gotRootEntriesElement)}
-			.areaKey=${null}
-			.layoutColumns=${this._layoutColumns}></umb-block-grid-entries>`;
+        return html `
+			${this.#renderSortModeToolbar()}
+			<umb-block-grid-entries
+				${ref(this.#gotRootEntriesElement)}
+				.areaKey=${null}
+				.layoutColumns=${this._layoutColumns}>
+			</umb-block-grid-entries>
+		`;
+    }
+    #renderSortModeToolbar() {
+        if (!this._isSortMode)
+            return nothing;
+        return html `<umb-property-sort-mode-toolbar></umb-property-sort-mode-toolbar>`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
 			:host {
-				display: grid;
-				gap: 1px;
-			}
-			> div {
 				display: flex;
 				flex-direction: column;
-				align-items: stretch;
-			}
-
-			uui-button-group {
-				padding-top: 1px;
-				display: grid;
-				grid-template-columns: 1fr auto;
+				gap: var(--uui-size-1);
 			}
 		`,
     ]; }
@@ -216,12 +229,21 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockGridElement.prototype, "_layoutColumns", void 0);
-__decorate([
-    property({ attribute: false })
-], UmbPropertyEditorUIBlockGridElement.prototype, "value", null);
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockGridElement.prototype, "_notSupportedVariantSetting", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridElement.prototype, "_isSortMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIBlockGridElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIBlockGridElement.prototype, "mandatoryMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUIBlockGridElement.prototype, "value", null);
 UmbPropertyEditorUIBlockGridElement = __decorate([
     customElement('umb-property-editor-ui-block-grid')
 ], UmbPropertyEditorUIBlockGridElement);

package/dist-cms/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.js

@@ -14,7 +14,10 @@ let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceV
         this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
             this.observe(await context?.propertyValueByAlias('gridColumns'), (value) => {
                 const dataTypeGridColumns = value ? parseInt(value, 10) : 12;
-                this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }, { alias: 'min', value: 1 }];
+                this._areaColumnsConfigurationObject = [
+                    { alias: 'placeholder', value: dataTypeGridColumns },
+                    { alias: 'min', value: 1 },
+                ];
                 this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
             }, 'observeGridColumns');
         }).passContextAliasMatches();

package/dist-cms/packages/block/block-list/components/block-list-entry/block-list-entry.element.d.ts

@@ -1,4 +1,3 @@
-import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 import '../ref-list-block/index.js';
@@ -26,13 +25,14 @@ export declare class UmbBlockListEntryElement extends UmbLitElement implements U
     private _workspaceEditContentPath?;
     private _workspaceEditSettingsPath?;
     private _inlineEditingMode?;
+    private _isSortMode?;
     private _contentInvalid?;
     private _settingsInvalid?;
     private _blockViewProps;
     private _isReadOnly;
     constructor();
     connectedCallback(): void;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
     static styles: import("lit").CSSResult[];
 }
 export default UmbBlockListEntryElement;

package/dist-cms/packages/block/block-list/components/block-list-entry/block-list-entry.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbBlockListEntryContext } from '../../context/block-list-entry.context.js';
 import { UMB_BLOCK_LIST, 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 '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
@@ -133,9 +133,8 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         this.observe(this.#context.actionsVisibility, (showActions) => {
             this._showActions = showActions;
         }, 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, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -195,8 +194,8 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         if (!propertyDatasetContext || !propertyContext || !clipboardContext) {
             throw new Error('Could not get required contexts to copy.');
         }
-        const workspaceName = propertyDatasetContext?.getName();
-        const propertyLabel = propertyContext?.getLabel();
+        const workspaceName = this.localize.string(propertyDatasetContext?.getName());
+        const propertyLabel = this.localize.string(propertyContext?.getLabel());
         const blockLabel = this.#context.getName();
         const entryName = workspaceName
             ? `${workspaceName} - ${propertyLabel} - ${blockLabel}`
@@ -223,15 +222,19 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
     #extensionSlotFilterMethod;
     #extensionSlotRenderMethod;
     #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() {
         return html `<umb-inline-list-block
@@ -253,32 +256,36 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
     }
     #renderBuiltinBlockView;
     #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() {
         return this._showContentEdit && this._workspaceEditContentPath
@@ -465,6 +472,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_inlineEditingMode", void 0);
+__decorate([
+    state()
+], UmbBlockListEntryElement.prototype, "_isSortMode", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'content-invalid', reflect: true })
 ], UmbBlockListEntryElement.prototype, "_contentInvalid", void 0);

package/dist-cms/packages/block/block-list/components/inline-list-block/inline-list-block.element.js

@@ -228,10 +228,6 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 				padding-left: var(--uui-size-2, 6px);
 			}
 
-			#name {
-				font-weight: 700;
-			}
-
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;

package/dist-cms/packages/block/block-list/components/ref-list-block/ref-list-block.element.js

@@ -11,12 +11,17 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
     render() {
         const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
-			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
+			<uui-ref-node
+				standalone
+				.readonly=${!(this.config?.showContentEdit ?? false)}
+				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 				<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>`)}
+				${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>
+					`)}
 			</uui-ref-node>
 		`;
     }
@@ -25,16 +30,38 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}
+
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;
 				margin-top: -0.3em;
 				vertical-align: text-top;
 			}
+
+			umb-ufm-render {
+				user-select: none;
+			}
+
 			: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;
+				}
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/block/block-list/context/block-list-entry.context.d.ts

@@ -7,6 +7,7 @@ export declare class UmbBlockListEntryContext extends UmbBlockEntryContext<typeo
     readonly inlineEditingMode: import("rxjs").Observable<boolean | undefined>;
     readonly forceHideContentEditorInOverlay: import("rxjs").Observable<boolean | undefined>;
     readonly showContentEdit: import("rxjs").Observable<boolean>;
+    readonly isSortMode: import("rxjs").Observable<boolean | undefined>;
     constructor(host: UmbControllerHost);
     protected _gotManager(): void;
     protected _gotEntries(): void;

package/dist-cms/packages/block/block-list/context/block-list-entry.context.js

@@ -4,6 +4,7 @@ import { UmbBlockEntryContext } from '../../block/index.js';
 import { UmbBooleanState, mergeObservables } from '../../../../libs/observable-api/index.js';
 export class UmbBlockListEntryContext extends UmbBlockEntryContext {
     #inlineEditingMode;
+    #isSortMode;
     constructor(host) {
         super(host, UMB_BLOCK_LIST_MANAGER_CONTEXT, UMB_BLOCK_LIST_ENTRIES_CONTEXT);
         this.#inlineEditingMode = new UmbBooleanState(undefined);
@@ -12,11 +13,14 @@ export class UmbBlockListEntryContext extends UmbBlockEntryContext {
         this.showContentEdit = mergeObservables([this._contentStructureHasProperties, this.forceHideContentEditorInOverlay, this.inlineEditingMode], ([a, b, c]) => {
             return a === true && b === false && c === false;
         });
+        this.#isSortMode = new UmbBooleanState(undefined);
+        this.isSortMode = this.#isSortMode.asObservable();
     }
     _gotManager() {
-        this.observe(this._manager?.inlineEditingMode, (inlineEditingMode) => {
-            this.#inlineEditingMode.setValue(inlineEditingMode);
-        }, 'observeInlineEditingMode');
+        if (!this._manager)
+            return;
+        this.observe(this._manager.inlineEditingMode, (inlineEditingMode) => this.#inlineEditingMode.setValue(inlineEditingMode), 'observeInlineEditingMode');
+        this.observe(this._manager.isSortMode, (isSortMode) => this.#isSortMode.setValue(isSortMode ?? false), 'observeIsSortMode');
     }
     _gotEntries() { }
     _gotContentType() { }

package/dist-cms/packages/block/block-list/context/block-list-manager.context.d.ts

@@ -2,6 +2,7 @@ import type { UmbBlockListLayoutModel, UmbBlockListTypeModel } from '../types.js
 import type { UmbBlockListWorkspaceOriginData } from '../index.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 /**
  * A implementation of the Block Manager specifically for the Block List Editor.
  */
@@ -10,6 +11,10 @@ export declare class UmbBlockListManagerContext<BlockLayoutType extends UmbBlock
     readonly inlineEditingMode: import("rxjs").Observable<boolean | undefined>;
     setInlineEditingMode(inlineEditingMode: boolean | undefined): void;
     getInlineEditingMode(): boolean | undefined;
+    readonly isSortMode: import("rxjs").Observable<boolean | undefined>;
+    setIsSortMode(isSortMode: boolean): void;
+    getIsSortMode(): boolean | undefined;
+    constructor(host: UmbControllerHost);
     /**
      * @param contentElementTypeKey
      * @param partialLayoutEntry