@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/libs/localization-api/localization.controller.js

@@ -75,53 +75,102 @@ export class UmbLocalizationController {
         return { locale, language, region, primary, secondary };
     }
     /**
-     * Outputs a translated term.
-     * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
-     * @param {...any} args - the arguments to parse for this localization entry.
-     * @returns {string} - the translated term as a string.
-     * @example
-     * Retrieving a term without any arguments:
-     * ```ts
-     * this.localize.term('area_term');
-     * ```
-     * Retrieving a term with arguments:
-     * ```ts
-     * this.localize.term('general_greeting', ['John']);
-     * ```
+     * Looks up a localization entry for the given key.
+     * Searches in order: primary (regional) → secondary (language) → fallback (en).
+     * Also tracks the key usage for reactive updates.
+     * @param {string} key - the localization key to look up.
+     * @returns {any} - the localization entry (string or function), or null if not found.
      */
-    term(key, ...args) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #lookupTerm(key) {
         if (!this.#usedKeys.includes(key)) {
             this.#usedKeys.push(key);
         }
         const { primary, secondary } = this.#getLocalizationData(this.lang());
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let term;
         // Look for a matching term using regionCode, code, then the fallback
         if (primary?.[key]) {
-            term = primary[key];
+            return primary[key];
         }
         else if (secondary?.[key]) {
-            term = secondary[key];
+            return secondary[key];
         }
         else if (umbLocalizationManager.fallback?.[key]) {
-            term = umbLocalizationManager.fallback[key];
-        }
-        else {
-            return String(key);
+            return umbLocalizationManager.fallback[key];
         }
+        return null;
+    }
+    /**
+     * Processes a localization entry (string or function) with the provided arguments.
+     * @param {any} term - the localization entry to process.
+     * @param {unknown[]} args - the arguments to apply to the term.
+     * @returns {string} - the processed term as a string.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #processTerm(term, args) {
         if (typeof term === 'function') {
             return term(...args);
         }
         if (typeof term === 'string') {
             if (args.length) {
                 // Replace placeholders of format "%index%" and "{index}" with provided values
-                term = term.replace(/(%(\d+)%|\{(\d+)\})/g, (match, _p1, p2, p3) => {
+                return term.replace(/(%(\d+)%|\{(\d+)\})/g, (match, _p1, p2, p3) => {
                     const index = p2 || p3;
                     return typeof args[index] !== 'undefined' ? String(args[index]) : match;
                 });
             }
         }
-        return term;
+        return String(term);
+    }
+    /**
+     * Outputs a translated term.
+     * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
+     * @param {unknown[]} args - the arguments to parse for this localization entry.
+     * @returns {string} - the translated term as a string.
+     * @example
+     * Retrieving a term without any arguments:
+     * ```ts
+     * this.localize.term('area_term');
+     * ```
+     * Retrieving a term with arguments:
+     * ```ts
+     * this.localize.term('general_greeting', ['John']);
+     * ```
+     */
+    term(key, ...args) {
+        const term = this.#lookupTerm(key);
+        if (term === null) {
+            return String(key);
+        }
+        return this.#processTerm(term, args);
+    }
+    /**
+     * Returns the localized term for the given key, or the default value if not found.
+     * This method follows the same resolution order as term() (primary → secondary → fallback),
+     * but returns the provided defaultValue instead of the key when no translation is found.
+     * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
+     * @param {string | null} defaultValue - the value to return if the key is not found in any localization set.
+     * @param {unknown[]} args - the arguments to parse for this localization entry.
+     * @returns {string | null} - the translated term or the default value.
+     * @example
+     * Retrieving a term with fallback:
+     * ```ts
+     * this.localize.termOrDefault('general_close', 'X');
+     * ```
+     * Retrieving a term with fallback and arguments:
+     * ```ts
+     * this.localize.termOrDefault('general_greeting', 'Hello!', userName);
+     * ```
+     * Retrieving a term with null as fallback:
+     * ```ts
+     * this.localize.termOrDefault('general_close', null);
+     * ```
+     */
+    termOrDefault(key, defaultValue, ...args) {
+        const term = this.#lookupTerm(key);
+        if (term === null) {
+            return defaultValue;
+        }
+        return this.#processTerm(term, args);
     }
     /**
      * Outputs a localized date in the specified format.
@@ -205,7 +254,7 @@ export class UmbLocalizationController {
      * If the term is found in the localization set, it will be replaced with the localized term.
      * If the term is not found, the original term will be returned.
      * @param {string | undefined} text The text to translate.
-     * @param {...any} args The arguments to parse for this localization entry.
+     * @param {unknown[]} args The arguments to parse for this localization entry.
      * @returns {string} The translated text.
      */
     string(text, ...args) {
@@ -216,14 +265,12 @@ export class UmbLocalizationController {
         const regex = /#\w+/g;
         const localizedText = text.replace(regex, (match) => {
             const key = match.slice(1);
-            if (!this.#usedKeys.includes(key)) {
-                this.#usedKeys.push(key);
-            }
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const localized = this.term(key, ...args);
+            const term = this.#lookupTerm(key);
             // we didn't find a localized string, so we return the original string with the #
-            return localized === key ? match : localized;
+            if (term === null) {
+                return match;
+            }
+            return this.#processTerm(term, args);
         });
         return localizedText;
     }

package/dist-cms/libs/observable-api/states/array-state.d.ts

@@ -160,6 +160,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
     /**
      * @function replace
      * @param {Partial<T>} entires - data of entries to be replaced.
+     * @param entries
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Replaces one or more entries, requires the ArrayState to be constructed with a getUnique method.
      * @example <caption>Example append some data.</caption>

package/dist-cms/libs/observable-api/states/array-state.js

@@ -259,6 +259,7 @@ export class UmbArrayState extends UmbDeepState {
     /**
      * @function replace
      * @param {Partial<T>} entires - data of entries to be replaced.
+     * @param entries
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Replaces one or more entries, requires the ArrayState to be constructed with a getUnique method.
      * @example <caption>Example append some data.</caption>

package/dist-cms/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.js

@@ -12,12 +12,14 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
  */
 let UmbBlockOverlayExposeButtonElement = class UmbBlockOverlayExposeButtonElement extends UmbLitElement {
     render() {
-        return this.contentTypeName
-            ? html `<uui-button look="secondary"
-					><uui-icon name="icon-add"></uui-icon>
-					<umb-localize key="blockEditor_createThisFor" .args=${[this.contentTypeName]}></umb-localize
-				></uui-button>`
-            : nothing;
+        if (!this.contentTypeName)
+            return nothing;
+        return html `
+			<uui-button look="secondary">
+				<uui-icon name="icon-add"></uui-icon>
+				<umb-localize key="blockEditor_createThisFor" .args=${[this.contentTypeName]}></umb-localize>
+			</uui-button>
+		`;
     }
     static { this.styles = [
         css `

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

@@ -114,7 +114,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
     async settingsPropertyValueByAlias(propertyAlias) {
         await this.#settingsStructurePromise;
         return mergeObservables([
-            this.#content.asObservablePart((data) => data?.values?.filter((x) => x?.alias === propertyAlias)),
+            this.#settings.asObservablePart((data) => data?.values?.filter((x) => x?.alias === propertyAlias)),
             await this.propertyVariantId(this.#settingsStructure, propertyAlias),
         ], ([propertyValues, propertyVariantId]) => {
             if (!propertyValues || !propertyVariantId)
@@ -516,7 +516,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
         if (!variantId || !this.#contentKey)
             return;
         this.observe(this._manager?.hasExposeOf(this.#contentKey, variantId), (hasExpose) => {
-            this.#hasExpose.setValue(hasExpose);
+            this.#hasExpose.setValue(hasExpose ?? false);
         }, 'observeExpose');
     }
     // Public methods:

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

@@ -88,7 +88,7 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     layoutOf(contentKey: string): import("rxjs").Observable<BlockLayoutType | undefined>;
     contentOf(key: string): import("rxjs").Observable<UmbBlockDataModel | undefined>;
     settingsOf(key: string): import("rxjs").Observable<UmbBlockDataModel | undefined>;
-    currentExposeOf(contentKey: string): import("rxjs").Observable<UmbBlockExposeModel | undefined> | undefined;
+    currentExposeOf(contentKey: string): import("rxjs").Observable<false | UmbBlockExposeModel | undefined>;
     hasExposeOf(contentKey: string, variantId: UmbVariantId): import("rxjs").Observable<boolean> | undefined;
     getBlockTypeOf(contentTypeKey: string): BlockType | undefined;
     getContentOf(contentKey: string): UmbBlockDataModel | undefined;

package/dist-cms/packages/block/block/context/block-manager.context.js

@@ -191,15 +191,47 @@ export class UmbBlockManagerContext extends UmbContextBase {
         return this.#settings.asObservablePart((source) => source.find((x) => x.key === key));
     }
     currentExposeOf(contentKey) {
-        const variantId = this.getVariantId();
-        if (!variantId)
-            return;
-        return mergeObservables([this.#exposes.asObservablePart((source) => source.filter((x) => x.contentKey === contentKey)), this.variantId], ([exposes, variantId]) => (variantId ? exposes.find((x) => variantId.compare(x)) : undefined));
+        return mergeObservables([this.#exposes.asObservablePart((source) => source.filter((x) => x.contentKey === contentKey)), this.variantId], ([exposes, variantId]) => {
+            if (!variantId) {
+                return undefined;
+            }
+            const contentTypeKey = this.getContentTypeKeyOfContentKey(contentKey);
+            if (!contentTypeKey) {
+                return false;
+            }
+            const contentStructure = this.getStructure(contentTypeKey);
+            if (!contentStructure) {
+                throw new Error(`Cannot lookup expose of block, missing content structure for ${contentTypeKey}`);
+            }
+            const varyByCulture = contentStructure.getVariesByCulture();
+            const varyBySegment = contentStructure.getVariesBySegment();
+            const blockVariantId = variantId.toVariant(varyByCulture, varyBySegment);
+            return exposes.find((x) => blockVariantId.compare(x));
+        });
     }
     hasExposeOf(contentKey, variantId) {
         if (!variantId)
             return;
-        return this.#exposes.asObservablePart((source) => source.some((x) => x.contentKey === contentKey && variantId.compare(x)));
+        const contentTypeKey = this.getContentTypeKeyOfContentKey(contentKey);
+        if (!contentTypeKey) {
+            // Not created yet and therefor not exposed.
+            // (This currently does not give any trouble,
+            // but this is not returning a observable,
+            // meaning one trying to observe this would
+            // not be updated when it is exposed. But it
+            // is not a problem currently. [NL])
+            return;
+        }
+        const contentStructure = this.getStructure(contentTypeKey);
+        if (!contentStructure) {
+            throw new Error(`Cannot lookup expose of block, missing content structure for ${contentTypeKey}`);
+        }
+        const varyByCulture = contentStructure.getVariesByCulture();
+        const varyBySegment = contentStructure.getVariesBySegment();
+        const blockVariantId = variantId.toVariant(varyByCulture, varyBySegment);
+        return this.#exposes.asObservablePart((exposes) => {
+            return exposes.some((x) => x.contentKey === contentKey && blockVariantId.compare(x));
+        });
     }
     getBlockTypeOf(contentTypeKey) {
         return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey);
@@ -211,7 +243,6 @@ export class UmbBlockManagerContext extends UmbContextBase {
         return this.#settings.value.find((x) => x.key === settingsKey);
     }
     // originData param is used by some implementations. [NL] should be here, do not remove it.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setOneLayout(layoutData, _originData) {
         this._layouts.appendOne(layoutData);
     }
@@ -354,9 +385,7 @@ export class UmbBlockManagerContext extends UmbContextBase {
             settings,
         };
     }
-    insertBlockData(layoutEntry, content, settings, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _originData) {
+    insertBlockData(layoutEntry, content, settings, _originData) {
         // Create content entry:
         if (layoutEntry.contentKey) {
             this.#contents.appendOne(content);

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.js

@@ -64,7 +64,11 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         if (!items?.length)
             return;
         const lookup = items.reduce((acc, item) => {
-            acc[item.unique] = item;
+            acc[item.unique] = {
+                ...item,
+                name: this.localize.string(item.name),
+                description: this.localize.string(item.description),
+            };
             return acc;
         }, {});
         const blocks = this.data?.blocks?.map((block) => ({ ...(lookup[block.contentElementTypeKey] ?? {}), ...block })) ?? [];
@@ -135,11 +139,9 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
     }
     #renderClipboard() {
         return html `
-			<uui-box>
-				<umb-clipboard-entry-picker
-					.config=${{ multiple: true, asyncFilter: this.data?.clipboardFilter }}
-					@selection-change=${this.#onClipboardPickerSelectionChange}></umb-clipboard-entry-picker>
-			</uui-box>
+			<umb-clipboard-entry-picker
+				.config=${{ multiple: true, asyncFilter: this.data?.clipboardFilter }}
+				@selection-change=${this.#onClipboardPickerSelectionChange}></umb-clipboard-entry-picker>
 		`;
     }
     #renderCreateEmpty() {
@@ -172,8 +174,8 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         return html `
 			<uui-card-block-type
 				href=${ifDefined(href)}
-				name=${this.localize.string(block.name)}
-				description=${this.localize.string(block.description)}
+				name=${block.name}
+				description=${ifDefined(block.description)}
 				.background=${block.backgroundColor}
 				@open=${() => this.#chooseBlock(block.contentElementTypeKey)}>
 				${when(imgSrc, (src) => html `<img src=${src} alt="" />`, () => html `<umb-icon name=${block.icon ?? ''} color=${ifDefined(block.iconColor)}></umb-icon>`)}

package/dist-cms/packages/block/block/workspace/block-workspace-editor.element.js

@@ -5,19 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from './index.js';
-import { UmbTextStyles } from '../../../core/style/index.js';
-import { customElement, css, html, state } from '../../../../external/lit/index.js';
+import { css, customElement, html, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { observeMultiple } from '../../../../libs/observable-api/index.js';
 let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extends UmbLitElement {
     constructor() {
         super();
         this._headline = '';
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
             if (context) {
-                this.observe(observeMultiple([context.isNew, context.name]), ([isNew, name]) => {
-                    this._headline =
-                        this.localize.term(isNew ? 'general_add' : 'general_edit') + ' ' + this.localize.string(name);
+                this.observe(context.name, (name) => {
+                    this._headline = this.localize.string(name);
                 }, 'observeOwnerContentElementTypeName');
             }
             else {
@@ -26,10 +23,9 @@ let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extend
         });
     }
     render() {
-        return html `<umb-workspace-editor headline=${this._headline}> </umb-workspace-editor> `;
+        return html `<umb-workspace-editor headline=${this._headline}></umb-workspace-editor>`;
     }
     static { this.styles = [
-        UmbTextStyles,
         css `
 			:host {
 				display: block;

package/dist-cms/packages/block/block/workspace/block-workspace.context.d.ts

@@ -26,11 +26,11 @@ export declare class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLay
     /**
      * Check if the workspace is about to navigate away.
      * @protected
-     * @param {string} newUrl The new url that the workspace is navigating to.
-     * @returns { boolean} true if the workspace is navigating away.
+     * @param {string | URL} newUrl The new url that the workspace is navigating to.
+     * @returns {boolean} true if the workspace is navigating away.
      * @memberof UmbEntityWorkspaceContextBase
      */
-    protected _checkWillNavigateAway(newUrl: string): boolean;
+    protected _checkWillNavigateAway(newUrl: string | URL): boolean;
     setEditorSize(editorSize: UUIModalSidebarSize): void;
     protected resetState(): void;
     load(unique: string): Promise<void>;

package/dist-cms/packages/block/block/workspace/block-workspace.context.js

@@ -127,8 +127,8 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             this.content.setVariantId(variantId);
             this.settings.setVariantId(variantId);
         }, null);
-        this.observe(observeMultiple([this.content.values, this.settings.values]), async ([contentValues]) => {
-            this.#renderLabel(contentValues);
+        this.observe(observeMultiple([this.content.values, this.settings.values]), async ([contentValues, settingsValues]) => {
+            this.#renderLabel(contentValues, settingsValues);
         }, 'observeContentForLabelRender');
         this.routes.setRoutes([
             {
@@ -180,7 +180,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             if (!contentKey || !variantId)
                 return;
             this.observe(manager.hasExposeOf(contentKey, variantId), (exposed) => {
-                this.#exposed.setValue(exposed);
+                this.#exposed.setValue(exposed ?? false);
             }, 'observeHasExpose');
         }, 'observeContentKeyAndVariantId');
         this.observe(
@@ -215,33 +215,45 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     #gotLabel(label) {
         if (label) {
             this.#labelRender.markdown = label;
-            this.#renderLabel(this.content.getValues());
+            this.#renderLabel(this.content.getValues(), this.settings.getValues());
         }
     }
-    async #renderLabel(contentValues) {
+    async #renderLabel(contentValues, settingsValues) {
         const valueObject = {};
         if (contentValues) {
             for (const property of contentValues) {
                 valueObject[property.alias] = property.value;
             }
         }
+        if (settingsValues) {
+            valueObject['$settings'] = settingsValues;
+        }
+        // TODO: Look to add support for `$index`, requires wiring up the block-entry with the workspace. [LK]
+        //valueObject['$index'] = 0;
         this.#labelRender.value = valueObject;
         // Await one animation frame:
         await new Promise((resolve) => requestAnimationFrame(() => resolve(true)));
-        const result = this.#labelRender.toString();
-        this.#name.setValue(result);
-        this.view.setTitle(result);
+        const prefix = this.getIsNew() === true ? '#general_add' : '#general_edit';
+        const label = this.#labelRender.toString();
+        const title = `${prefix} ${label}`;
+        this.#name.setValue(title);
+        if (this.#modalContext) {
+            this.view.setTitle(title);
+        }
     }
     #allowNavigateAway;
     #onWillNavigate;
     /**
      * Check if the workspace is about to navigate away.
      * @protected
-     * @param {string} newUrl The new url that the workspace is navigating to.
-     * @returns { boolean} true if the workspace is navigating away.
+     * @param {string | URL} newUrl The new url that the workspace is navigating to.
+     * @returns {boolean} true if the workspace is navigating away.
      * @memberof UmbEntityWorkspaceContextBase
      */
     _checkWillNavigateAway(newUrl) {
+        if (newUrl instanceof URL) {
+            newUrl = newUrl.href;
+        }
         return !newUrl.includes(this.routes.getActiveLocalPath());
     }
     setEditorSize(editorSize) {

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.js

@@ -66,7 +66,7 @@ let UmbBlockWorkspaceViewEditTabElement = class UmbBlockWorkspaceViewEditTabElem
             : ''}
 			${this.hideSingleGroup && this._groups.length === 1
             ? this.renderGroup(this._groups[0])
-            : repeat(this._groups, (group) => group.key, (group) => html ` <uui-box .headline=${group.name}>${this.renderGroup(group)}</uui-box>`)}
+            : repeat(this._groups, (group) => group.key, (group) => html `<uui-box .headline=${this.localize.string(group.name)}>${this.renderGroup(group)}</uui-box>`)}
 		`;
     }
     renderGroup(group) {

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

@@ -13,6 +13,9 @@ export declare class UmbBlockGridManagerContext<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;
     readonly blockGroups: import("rxjs").Observable<UmbBlockTypeGroup[]>;
     layoutStylesheet: import("rxjs").Observable<string | undefined>;
     gridColumns: import("rxjs").Observable<number>;

package/dist-cms/packages/block/block-grid/block-grid-manager/block-grid-manager.context.js

@@ -3,6 +3,7 @@ import { appendToFrozenArray, pushAtToUniqueArray, UmbArrayState, UmbBooleanStat
 import { transformServerPathToClientPath } from '../../../core/utils/index.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
 import { UMB_SERVER_CONTEXT } from '../../../core/server/index.js';
+import { UMB_PROPERTY_SORT_MODE_CONTEXT } from '../../../core/property-sort-mode/index.js';
 /**
  * A implementation of the Block Manager specifically for the Block Grid Editor.
  */
@@ -15,6 +16,14 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     getInlineEditingMode() {
         return this.#inlineEditingMode.getValue();
     }
+    #sortModeContext;
+    #isSortMode;
+    setIsSortMode(isSortMode) {
+        this.#sortModeContext?.setIsSortMode(isSortMode);
+    }
+    getIsSortMode() {
+        return this.#sortModeContext?.getIsSortMode();
+    }
     #initAppUrl;
     #serverUrl;
     #blockGroups;
@@ -44,6 +53,8 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
         //
         this.#inlineEditingMode = new UmbBooleanState(undefined);
         this.inlineEditingMode = this.#inlineEditingMode.asObservable();
+        this.#isSortMode = new UmbBooleanState(undefined);
+        this.isSortMode = this.#isSortMode.asObservable();
         this.#blockGroups = new UmbArrayState([], (x) => x.key);
         this.blockGroups = this.#blockGroups.asObservable();
         this.layoutStylesheet = this._editorConfiguration.asObservablePart((x) => {
@@ -66,6 +77,12 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
         this.#initAppUrl = this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
             this.#serverUrl = instance?.getServerUrl();
         }).asPromise({ preventTimeout: true });
+        this.consumeContext(UMB_PROPERTY_SORT_MODE_CONTEXT, (sortModeContext) => {
+            this.#sortModeContext = sortModeContext;
+            this.observe(this.#sortModeContext?.isSortMode, (isSortMode) => {
+                this.#isSortMode.setValue(isSortMode);
+            });
+        });
     }
     /**
      * @param contentElementTypeKey

package/dist-cms/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 /**
  * @description
@@ -8,7 +9,7 @@ export declare class UmbBlockGridAreasContainerElement extends UmbLitElement {
     private _areas?;
     private _areaGridColumns?;
     constructor();
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbBlockGridAreasContainerElement;

package/dist-cms/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.js

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 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 '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { css, customElement, html, repeat, state } from '../../../../../external/lit/index.js';
 /**
  * @description
  * This element is used to render the block grid areas.
@@ -37,19 +37,24 @@ let UmbBlockGridAreasContainerElement = class UmbBlockGridAreasContainerElement
         });
     }
     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 { this.styles = [
         css `