@umbraco-cms/backoffice 17.6.2 → 17.7.0-rc

package/dist-cms/libs/observable-api/utils/push-at-to-unique-array.function.d.ts

@@ -1,9 +1,10 @@
 /**
  * @function pushToUniqueArray
+ * @template T
  * @param {T[]} data - An array of objects.
- * @param index
  * @param {T} entry - The object to insert or replace with.
- * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {(entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {number} index - The index to insert the entry at, if it doesn't already exist.
  * @description - Append or replaces an item of an Array.
  * @returns {T[]} - Returns a new array with the updated entry.
  * @example <caption>Example append new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>

package/dist-cms/libs/observable-api/utils/push-at-to-unique-array.function.js

@@ -1,9 +1,10 @@
 /**
  * @function pushToUniqueArray
+ * @template T
  * @param {T[]} data - An array of objects.
- * @param index
  * @param {T} entry - The object to insert or replace with.
- * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {(entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {number} index - The index to insert the entry at, if it doesn't already exist.
  * @description - Append or replaces an item of an Array.
  * @returns {T[]} - Returns a new array with the updated entry.
  * @example <caption>Example append new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>

package/dist-cms/libs/observable-api/utils/push-to-unique-array.function.d.ts

@@ -1,8 +1,10 @@
 /**
  * @function pushToUniqueArray
+ * @template T
  * @param {T[]} data - An array of objects.
  * @param {T} entry - The object to insert or replace with.
- * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {(entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @returns {T[]} - Returns a new array with the updated entry.
  * @description - Append or replaces an item of an Array.
  * @example <caption>Example append new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>
  * const entry = {key: 'myKey', value: 'myValue'};

package/dist-cms/libs/observable-api/utils/push-to-unique-array.function.js

@@ -1,8 +1,10 @@
 /**
  * @function pushToUniqueArray
+ * @template T
  * @param {T[]} data - An array of objects.
  * @param {T} entry - The object to insert or replace with.
- * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {(entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @returns {T[]} - Returns a new array with the updated entry.
  * @description - Append or replaces an item of an Array.
  * @example <caption>Example append new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>
  * const entry = {key: 'myKey', value: 'myValue'};

package/dist-cms/libs/observable-api/utils/replace-in-unique-array.function.d.ts

@@ -1,8 +1,10 @@
 /**
  * @function replaceInUniqueArray
+ * @template T
  * @param {T[]} data - An array of objects.
  * @param {T} entry - The object to replace with.
- * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {(entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @returns {T[]} - Returns a new array with the updated entry.
  * @description - Replaces an item of an Array.
  * @example <caption>Example replace an entry of an Array. Where the key is unique and the item will only be replaced if matched with existing.</caption>
  * const data = [{key: 'myKey', value:'initialValue'}];

package/dist-cms/libs/observable-api/utils/replace-in-unique-array.function.js

@@ -1,8 +1,10 @@
 /**
  * @function replaceInUniqueArray
+ * @template T
  * @param {T[]} data - An array of objects.
  * @param {T} entry - The object to replace with.
- * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @param {(entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @returns {T[]} - Returns a new array with the updated entry.
  * @description - Replaces an item of an Array.
  * @example <caption>Example replace an entry of an Array. Where the key is unique and the item will only be replaced if matched with existing.</caption>
  * const data = [{key: 'myKey', value:'initialValue'}];

package/dist-cms/packages/block/block/action/default/block-action.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, customElement, html, ifDefined, nothing, property, state, when } from '../../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, nothing, property, state, when, } from '../../../../../external/lit/index.js';
 import { UmbActionExecutedEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';

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

@@ -16,7 +16,7 @@ export declare abstract class UmbBlockEntriesContext<BlockManagerContextTokenTyp
     workspacePath: Observable<string | undefined>;
     protected _dataPath?: string;
     abstract readonly canCreate: Observable<boolean>;
-    protected _layoutEntries: UmbArrayState<BlockLayoutType, unknown>;
+    protected _layoutEntries: UmbArrayState<BlockLayoutType, unknown, BlockLayoutType[]>;
     readonly layoutEntries: Observable<BlockLayoutType[]>;
     readonly layoutEntriesLength: Observable<number>;
     getLength(): number;
@@ -32,7 +32,7 @@ export declare abstract class UmbBlockEntriesContext<BlockManagerContextTokenTyp
     layoutOf(contentKey: string): Observable<BlockLayoutType | undefined>;
     getLayoutOf(contentKey: string): BlockLayoutType | undefined;
     setLayouts(layouts: Array<BlockLayoutType>): void;
-    setOneLayout(layoutData: BlockLayoutType): UmbArrayState<BlockLayoutType, unknown>;
+    setOneLayout(layoutData: BlockLayoutType): UmbArrayState<BlockLayoutType, unknown, BlockLayoutType[]>;
     abstract getPathForCreateBlock(index: number): string | undefined;
     abstract getPathForClipboard(index: number): string | undefined;
     abstract create(contentElementTypeKey: string, layoutEntry?: Omit<BlockLayoutType, 'contentKey'>, originData?: BlockOriginData): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;

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

@@ -102,7 +102,7 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
     protected readonly _settingsValueArray: Observable<UmbBlockDataValueModel<unknown>[] | undefined>;
     private readonly _settingsDataContentTypeKey;
     /**
-     * @deprecated Use {@link _settingsDataContentTypeKey} instead. This will be removed in Umbraco 18.
+     * @deprecated Use {@link UmbBlockEntryContext#_settingsDataContentTypeKey} instead. This will be removed in Umbraco 18.
      */
     private readonly settingsDataContentTypeKey;
     settingsValues(): Promise<Observable<UmbBlockDataType | undefined>>;

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

@@ -1,6 +1,6 @@
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbBooleanState, UmbClassState, UmbNumberState, UmbObjectState, UmbStringState, mergeObservables, observeMultiple, } from '../../../../libs/observable-api/index.js';
-import { encodeFilePath, UmbDeprecation, UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
+import { encodeFilePath, escapeHTML, UmbDeprecation, UmbReadOnlyVariantGuardManager, } from '../../../core/utils/index.js';
 import { umbConfirmModal } from '../../../core/modal/index.js';
 import { UmbLocalizationController } from '../../../../libs/localization-api/index.js';
 import { UmbRoutePathAddendumContext } from '../../../core/router/index.js';
@@ -244,7 +244,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
         this._settingsValueArray = this.#settings.asObservablePart((x) => x?.values);
         this._settingsDataContentTypeKey = this.#settings.asObservablePart((x) => x ? (x.contentTypeKey ?? undefined) : null);
         /**
-         * @deprecated Use {@link _settingsDataContentTypeKey} instead. This will be removed in Umbraco 18.
+         * @deprecated Use {@link UmbBlockEntryContext#_settingsDataContentTypeKey} instead. This will be removed in Umbraco 18.
          */
         // eslint-disable-next-line
         this.settingsDataContentTypeKey = this._settingsDataContentTypeKey;
@@ -272,7 +272,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
                 if (this.#labelRender) {
                     this.#labelRender.markdown = label;
                 }
-            });
+            }, null);
             this.#watchContentForLabelRender();
         }
         // Consume block manager:
@@ -570,7 +570,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
         const blockName = this.getName();
         await umbConfirmModal(this, {
             headline: this.localize.term('blockEditor_confirmDeleteBlockTitle', blockName),
-            content: this.localize.term('blockEditor_confirmDeleteBlockMessage', blockName),
+            content: this.localize.term('blockEditor_confirmDeleteBlockMessage', escapeHTML(blockName)),
             confirmLabel: '#general_delete',
             color: 'danger',
         });

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

@@ -26,7 +26,7 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     readonly editorConfiguration: import("rxjs").Observable<UmbPropertyEditorConfigCollection | undefined>;
     protected _liveEditingMode: UmbBooleanState<undefined>;
     readonly liveEditingMode: import("rxjs").Observable<boolean | undefined>;
-    protected _layouts: UmbArrayState<BlockLayoutType, string>;
+    protected _layouts: UmbArrayState<BlockLayoutType, string, BlockLayoutType[]>;
     readonly layouts: import("rxjs").Observable<BlockLayoutType[]>;
     readonly contents: import("rxjs").Observable<UmbBlockDataModel[]>;
     readonly settings: import("rxjs").Observable<UmbBlockDataModel[]>;
@@ -130,5 +130,10 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     abstract insert(layoutEntry: BlockLayoutType, content: UmbBlockDataModel, settings: UmbBlockDataModel | undefined, originData: BlockOriginDataType): boolean;
     protected insertBlockData(layoutEntry: BlockLayoutType, content: UmbBlockDataModel, settings: UmbBlockDataModel | undefined, _originData: BlockOriginDataType): void;
     protected notifyBlockInserted(layoutEntry: BlockLayoutType, originData: BlockOriginDataType): Promise<void>;
+    /**
+     * @deprecated Use `removeOneContent` instead. Scheduled for removal in Umbraco 20.
+     * @param {string} contentKey - The content key of the layout element to delete.
+     * @internal
+     */
     protected removeBlockKey(contentKey: string): void;
 }

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

@@ -6,7 +6,7 @@ import { UmbDocumentTypeDetailRepository } from '../../../documents/document-typ
 import { UmbContentTypeStructureManager } from '../../../content/content-type/index.js';
 import { UmbId } from '../../../core/id/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
-import { UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
+import { UmbDeprecation, UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
 import { UmbPropertyValuePresetVariantBuilderController, } from '../../../core/property/index.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from '../../../language/index.js';
 import { UmbDataTypeDetailRepository } from '../../../data-type/index.js';
@@ -487,7 +487,17 @@ export class UmbBlockManagerContext extends UmbContextBase {
             });
         }
     }
+    /**
+     * @deprecated Use `removeOneContent` instead. Scheduled for removal in Umbraco 20.
+     * @param {string} contentKey - The content key of the layout element to delete.
+     * @internal
+     */
     removeBlockKey(contentKey) {
-        this.#contents.removeOne(contentKey);
+        new UmbDeprecation({
+            deprecated: 'removeBlockKey is deprecated.',
+            removeInVersion: '20.0.0',
+            solution: 'Use removeOneContent instead.',
+        }).warn();
+        this.removeOneContent(contentKey);
     }
 }

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

@@ -51,7 +51,7 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         });
         this.observe(this.#itemManager.items, async (items) => {
             this.#observeBlockTypes(items);
-        });
+        }, null);
     }
     connectedCallback() {
         super.connectedCallback();

package/dist-cms/packages/block/block/property-value-resolver/block-value-resolver.api.d.ts

@@ -1,9 +1,10 @@
 import type { UmbBlockDataValueModel, UmbBlockExposeModel, UmbBlockValueDataPropertiesBaseType } from '../types.js';
 import type { UmbElementValueModel } from '../../../content/content/index.js';
 import type { UmbPropertyValueResolver } from '../../../core/property/index.js';
+export type UmbBlockValuesCallback = (values: Array<UmbBlockDataValueModel>, identifier?: string) => Promise<Array<UmbBlockDataValueModel> | undefined>;
 export declare abstract class UmbBlockValueResolver<ValueType> implements UmbPropertyValueResolver<UmbElementValueModel<ValueType>, UmbBlockDataValueModel, UmbBlockExposeModel> {
-    abstract processValues(property: UmbElementValueModel<ValueType>, valuesCallback: (values: Array<UmbBlockDataValueModel>) => Promise<Array<UmbBlockDataValueModel> | undefined>): Promise<UmbElementValueModel<ValueType>>;
-    protected _processValueBlockData<ValueType extends UmbBlockValueDataPropertiesBaseType>(value: ValueType, valuesCallback: (values: Array<UmbBlockDataValueModel>) => Promise<Array<UmbBlockDataValueModel> | undefined>): Promise<ValueType & {
+    abstract processValues(property: UmbElementValueModel<ValueType>, valuesCallback: UmbBlockValuesCallback): Promise<UmbElementValueModel<ValueType>>;
+    protected _processValueBlockData<ValueType extends UmbBlockValueDataPropertiesBaseType>(value: ValueType, valuesCallback: UmbBlockValuesCallback): Promise<ValueType & {
         contentData: {
             values: UmbBlockDataValueModel<unknown>[];
             key: string;

package/dist-cms/packages/block/block/property-value-resolver/block-value-resolver.api.js

@@ -2,11 +2,13 @@ export class UmbBlockValueResolver {
     async _processValueBlockData(value, valuesCallback) {
         const contentData = await Promise.all((value.contentData ?? []).map(async (entry) => ({
             ...entry,
-            values: (await valuesCallback(entry.values)) ?? [],
+            // We do not know for sure if the same key could be used for both content and settings data, so we prefix the key with the type to ensure uniqueness.
+            values: (await valuesCallback(entry.values, `contentData:${entry.key}`)) ?? [],
         })));
         const settingsData = await Promise.all((value.settingsData ?? []).map(async (entry) => ({
             ...entry,
-            values: (await valuesCallback(entry.values)) ?? [],
+            // We do not know for sure if the same key could be used for both content and settings data, so we prefix the key with the type to ensure uniqueness.
+            values: (await valuesCallback(entry.values, `settingsData:${entry.key}`)) ?? [],
         })));
         return { ...value, contentData, settingsData };
     }

package/dist-cms/packages/block/block/property-value-resolver/standard-block-value-resolver.api.d.ts

@@ -1,7 +1,7 @@
-import type { UmbBlockDataValueModel, UmbBlockExposeModel, UmbBlockValueType } from '../types.js';
-import { UmbBlockValueResolver } from './block-value-resolver.api.js';
+import type { UmbBlockExposeModel, UmbBlockValueType } from '../types.js';
+import { UmbBlockValueResolver, type UmbBlockValuesCallback } from './block-value-resolver.api.js';
 import type { UmbElementValueModel } from '../../../content/content/index.js';
 export declare class UmbStandardBlockValueResolver extends UmbBlockValueResolver<UmbBlockValueType> {
-    processValues(property: UmbElementValueModel<UmbBlockValueType>, valuesCallback: (values: Array<UmbBlockDataValueModel>) => Promise<Array<UmbBlockDataValueModel> | undefined>): Promise<UmbElementValueModel<UmbBlockValueType<import("../types.js").UmbBlockLayoutBaseModel>>>;
+    processValues(property: UmbElementValueModel<UmbBlockValueType>, valuesCallback: UmbBlockValuesCallback): Promise<UmbElementValueModel<UmbBlockValueType<import("../types.js").UmbBlockLayoutBaseModel>>>;
     processVariants(property: UmbElementValueModel<UmbBlockValueType>, variantsCallback: (values: Array<UmbBlockExposeModel>) => Promise<Array<UmbBlockExposeModel> | undefined>): Promise<UmbElementValueModel<UmbBlockValueType<import("../types.js").UmbBlockLayoutBaseModel>>>;
 }

package/dist-cms/packages/block/block/validation/data-path-element-data-query.function.d.ts

@@ -2,8 +2,7 @@ import type { UmbBlockDataModel } from '../types.js';
 /**
  * Validation Data Path Query generator for Block Element Data.
  * write a JSON-Path filter similar to `?(@.key == 'my-key://1234')`
- * @param key {string} - The key of the block Element data.
- * @param data {{key: string}} - A data object with the key property.
- * @returns
+ * @param {{key: string}} data - A data object with the key property.
+ * @returns {string} The JSON-Path filter query.
  */
 export declare function UmbDataPathBlockElementDataQuery(data: Pick<UmbBlockDataModel, 'key'>): string;

package/dist-cms/packages/block/block/validation/data-path-element-data-query.function.js

@@ -1,9 +1,8 @@
 /**
  * Validation Data Path Query generator for Block Element Data.
  * write a JSON-Path filter similar to `?(@.key == 'my-key://1234')`
- * @param key {string} - The key of the block Element data.
- * @param data {{key: string}} - A data object with the key property.
- * @returns
+ * @param {{key: string}} data - A data object with the key property.
+ * @returns {string} The JSON-Path filter query.
  */
 export function UmbDataPathBlockElementDataQuery(data) {
     // write a array of strings for each property, where alias must be present and culture and segment are optional

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

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

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

@@ -174,7 +174,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         }, null);
         this.observe(observeMultiple([this.content.variantValues, this.settings.variantValues]), async ([contentValues, settingsValues]) => {
             this.#renderLabel(contentValues, settingsValues);
-        }, 'observeContentForLabelRender');
+        }, null);
         this.routes.setRoutes([
             {
                 path: 'create/:elementTypeKey',
@@ -238,6 +238,10 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
                     }
                 }
                 await this.content.structure.whenLoaded();
+                // Have we been destroyed while awaiting the structure? then back out, otherwise reading from
+                // the now-destroyed content type structure or element states throws:
+                if (!this.#blockManager)
+                    return;
                 this.#gotLabel(blockType?.label ?? this.content.structure.getOwnerContentTypeName());
             }, 'observeBlockType');
         }, 'observeContentTypeId');
@@ -271,7 +275,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
      * @protected
      * @param {string | URL} newUrl The new url that the workspace is navigating to.
      * @returns {boolean} true if the workspace is navigating away.
-     * @memberof UmbEntityWorkspaceContextBase
+     * @memberof UmbBlockWorkspaceContext
      */
     _checkWillNavigateAway(newUrl) {
         return umbWorkspaceWillNavigateAway(this.routes, this.getUnique(), newUrl);

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js

@@ -13,8 +13,8 @@ import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UmbViewController } from '../../../../../core/view/index.js';
 import { encodeFolderName } from '../../../../../core/router/index.js';
 /**
- * @internal only for use inside this class.
  * Gets the view alias for a given tab. This is used to create a unique view context for each tab in the block workspace.
+ * @internal
  * @param {UmbPropertyTypeContainerMergedModel} tab - The tab to get the view alias for.
  * @returns {string} The view alias for the tab.
  */
@@ -31,29 +31,56 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
     #blockManager;
     #tabsStructureHelper;
     #tabViewContexts;
+    #hintObservers;
     constructor() {
         super();
         this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         this._hintMap = new Map();
         this.#tabViewContexts = [];
+        this.#hintObservers = [];
         this.#tabsStructureHelper.setIsRoot(true);
         this.#tabsStructureHelper.setContainerChildType('Tab');
-        this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
-            this._tabs = tabs;
-            this.#setupViewContexts();
-        });
-        this.observe(this.#tabsStructureHelper.hasProperties, (hasRootProperties) => {
-            this._hasRootProperties = hasRootProperties;
-            this.#setupViewContexts();
-        }, 'observeRootProperties');
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
+            this.#resetViewContexts();
             this.#blockWorkspace = context;
             this.#blockManager = context?.content;
             // block manager does not need to be setup this in file as that it being done by the implementation of this element.
             this.#tabsStructureHelper.setStructureManager(context?.content.structure);
+            this.#observeStructure();
             this.#observeRootGroups();
         });
     }
+    /**
+     * Observes the structure the view contexts are derived from. Must be re-established whenever that
+     * state is cleared: the observed states deduplicate, so an unchanged value never reaches an existing
+     * subscription — only a new subscription replays it.
+     */
+    #observeStructure() {
+        this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
+            this._tabs = tabs;
+            this.#setupViewContexts();
+        }, 'observeTabs');
+        this.observe(this.#tabsStructureHelper.hasProperties, (hasRootProperties) => {
+            this._hasRootProperties = hasRootProperties;
+            this.#setupViewContexts();
+        }, 'observeRootProperties');
+    }
+    /**
+     * Destroys all view contexts and the state derived from them, so they can be re-established
+     * against the block manager of a newly consumed workspace context.
+     */
+    #resetViewContexts() {
+        this.#tabViewContexts.forEach((context) => context.destroy());
+        this.#tabViewContexts = [];
+        this.#currentProvidedView = undefined;
+        this.#hintObservers.forEach((observer) => observer.destroy());
+        this.#hintObservers = [];
+        this._hintMap = new Map();
+        this._tabs = undefined;
+        this._hasRootGroups = undefined;
+        this._hasRootProperties = undefined;
+        this._activeTabKey = undefined;
+    }
     async #observeRootGroups() {
         if (!this.#blockWorkspace)
             return;
@@ -63,8 +90,27 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
         }, 'observeGroups');
     }
     #setupViewContexts() {
-        if (!this._tabs || !this.#blockManager)
+        if (!this._tabs ||
+            !this.#blockManager ||
+            !this.#blockWorkspace ||
+            this._hasRootGroups === undefined ||
+            this._hasRootProperties === undefined) {
             return;
+        }
+        // remove any view contexts that are no longer needed
+        this.#tabViewContexts = this.#tabViewContexts.filter((context) => {
+            const stillNeeded = context.viewAlias === null
+                ? this._hasRootGroups || this._hasRootProperties
+                : this._tabs?.some((tab) => getViewAliasForTab(tab) === context.viewAlias);
+            if (!stillNeeded) {
+                if (this.#currentProvidedView === context) {
+                    this.#currentProvidedView = undefined;
+                    this._activeTabKey = undefined;
+                }
+                context.destroy();
+            }
+            return stillNeeded;
+        });
         // Create view contexts for root groups/properties
         if (this._hasRootGroups || this._hasRootProperties) {
             this.#createViewContext(null, '#general_generic');
@@ -74,8 +120,22 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
             const viewAlias = getViewAliasForTab(tab);
             this.#createViewContext(viewAlias, tab.name ?? '');
         });
+        this.#observeHints();
         this.#checkDefaultTabName();
     }
+    #observeHints() {
+        this.#hintObservers.forEach((observer) => observer.destroy());
+        this._hintMap = new Map();
+        this.#hintObservers = this.#tabViewContexts.map((context) => this.observe(context.firstHintOfVariant, (hint) => {
+            if (hint) {
+                this._hintMap.set(context.viewAlias, hint);
+            }
+            else {
+                this._hintMap.delete(context.viewAlias);
+            }
+            this.requestUpdate('_hintMap');
+        }, 'umbObserveHint_' + context.viewAlias));
+    }
     #createViewContext(viewAlias, tabName) {
         if (!this.#blockManager) {
             throw new Error('Block Manager not found');
@@ -96,15 +156,6 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
             }
             view.setTitle(tabName);
             view.inheritFrom(this.#blockManager.view);
-            this.observe(view.firstHintOfVariant, (hint) => {
-                if (hint) {
-                    this._hintMap.set(viewAlias, hint);
-                }
-                else {
-                    this._hintMap.delete(viewAlias);
-                }
-                this.requestUpdate('_hintMap');
-            }, 'umbObserveState_' + viewAlias);
         }
     }
     #checkDefaultTabName() {

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

@@ -10,14 +10,13 @@ export declare class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
     set containerId(value: string | null | undefined);
     private _containerId?;
     /**
-     * If true, the group box will be hidden, if we are to only represents one group.
-     * This is used by Inline Editing Mode of Block List Editor.
+     * This is used by Inline Editing Mode of Block Editors, to simplify the visuals when possible.
      */
     hideSingleGroup: boolean;
-    private _groups;
-    private _hasProperties;
+    private _groups?;
+    private _hasProperties?;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
     renderGroup(group: UmbPropertyTypeContainerMergedModel): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

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

@@ -32,12 +32,9 @@ let UmbBlockWorkspaceViewEditTabElement = class UmbBlockWorkspaceViewEditTabElem
         super();
         this.#groupStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         /**
-         * If true, the group box will be hidden, if we are to only represents one group.
-         * This is used by Inline Editing Mode of Block List Editor.
+         * This is used by Inline Editing Mode of Block Editors, to simplify the visuals when possible.
          */
         this.hideSingleGroup = false;
-        this._groups = [];
-        this._hasProperties = false;
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#blockWorkspace = workspaceContext;
             this.#setStructureManager();
@@ -55,19 +52,34 @@ let UmbBlockWorkspaceViewEditTabElement = class UmbBlockWorkspaceViewEditTabElem
         }, 'observeHasProperties');
     }
     render() {
-        return html `
-			${this._hasProperties
-            ? html `<uui-box>
-						<umb-block-workspace-view-edit-properties
-							.managerName=${this.#managerName}
-							data-mark="property-group:root"
-							.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>
-					</uui-box>`
-            : ''}
-			${this.hideSingleGroup && this._groups.length === 1
-            ? this.renderGroup(this._groups[0])
-            : repeat(this._groups, (group) => group.key, (group) => html `<uui-box .headline=${this.localize.string(group.name)}>${this.renderGroup(group)}</uui-box>`)}
-		`;
+        if (this._containerId === undefined)
+            return;
+        return html `${this.#renderRootProperties()}${this.#renderGroups()}`;
+    }
+    #renderRootProperties() {
+        // Only render the root properties if we have loaded both root properties and groups.
+        if (!this._hasProperties || this._groups === undefined)
+            return;
+        if (this.hideSingleGroup && (!this._groups || this._groups.length === 0)) {
+            return html `<umb-block-workspace-view-edit-properties
+				.managerName=${this.#managerName}
+				data-mark="property-group:root"
+				.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>`;
+        }
+        return html `<uui-box>
+			<umb-block-workspace-view-edit-properties
+				.managerName=${this.#managerName}
+				data-mark="property-group:root"
+				.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>
+		</uui-box>`;
+    }
+    #renderGroups() {
+        if (!this._groups || this._groups.length === 0)
+            return;
+        if (this.hideSingleGroup && this._hasProperties === false && this._groups?.length === 1) {
+            return this.renderGroup(this._groups[0]);
+        }
+        return repeat(this._groups, (group) => group.key, (group) => html `<uui-box .headline=${this.localize.string(group.name)}>${this.renderGroup(group)}</uui-box>`);
     }
     renderGroup(group) {
         return html `

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

@@ -42,7 +42,7 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         this.observe(this.#tabsStructureHelper.hasProperties, (hasRootProperties) => {
             this._hasRootProperties = hasRootProperties;
             this.#createRoutes();
-        }, 'observeRootProperties');
+        }, null);
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#blockWorkspace = workspaceContext;
             this.#setStructureManager();

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

@@ -27,9 +27,11 @@ export declare class UmbBlockGridManagerContext<BlockLayoutType extends UmbBlock
     getBlockGroupName(unique: string): string | undefined;
     constructor(host: UmbControllerHost);
     /**
-     * @param contentElementTypeKey
-     * @param partialLayoutEntry
-     * @param originData
+     * Creates block data with default presets for the given content element type.
+     * @param {string} contentElementTypeKey - The key of the content element type to create.
+     * @param {Omit<BlockLayoutType, 'contentKey'>} [partialLayoutEntry] - Partial layout entry to merge into the created layout entry.
+     * @param {UmbBlockGridWorkspaceOriginData} [originData] - Origin data, unused by this implementation.
+     * @returns {Promise<{ layout: BlockLayoutType; content: UmbBlockDataModel; settings: UmbBlockDataModel | undefined }>} the created block data.
      */
     createWithPresets(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, originData?: UmbBlockGridWorkspaceOriginData): Promise<{
         layout: UmbBlockGridLayoutModel;

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

@@ -85,9 +85,11 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
         });
     }
     /**
-     * @param contentElementTypeKey
-     * @param partialLayoutEntry
-     * @param originData
+     * Creates block data with default presets for the given content element type.
+     * @param {string} contentElementTypeKey - The key of the content element type to create.
+     * @param {Omit<BlockLayoutType, 'contentKey'>} [partialLayoutEntry] - Partial layout entry to merge into the created layout entry.
+     * @param {UmbBlockGridWorkspaceOriginData} [originData] - Origin data, unused by this implementation.
+     * @returns {Promise<{ layout: BlockLayoutType; content: UmbBlockDataModel; settings: UmbBlockDataModel | undefined }>} the created block data.
      */
     async createWithPresets(contentElementTypeKey, partialLayoutEntry, 
     // This property is used by some implementations, but not used in this.
@@ -97,14 +99,12 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     }
     /**
      * Inserts a layout entry into an area of a layout entry.
-     * @param layoutEntry The layout entry to insert.
-     * @param insert
-     * @param entries The layout entries to search within.
-     * @param parentUnique The parentUnique to search for.
-     * @param parentId
-     * @param areaKey The areaKey to insert the layout entry into.
-     * @param index The index to insert the layout entry at.
-     * @returns a updated layout entries array if the insert was successful.
+     * @param {UmbBlockGridLayoutModel} insert The layout entry to insert.
+     * @param {Array<UmbBlockGridLayoutModel>} entries The layout entries to search within.
+     * @param {string} parentId The parentId to search for.
+     * @param {string} areaKey The areaKey to insert the layout entry into.
+     * @param {number} index The index to insert the layout entry at.
+     * @returns {Array<UmbBlockGridLayoutModel> | undefined} a updated layout entries array if the insert was successful.
      * @remarks
      * This method is recursive and will search for the parentUnique in the layout entries.
      * If the parentUnique is found, the layout entry will be inserted into the items of the area that matches the areaKey.

package/dist-cms/packages/block/block-grid/clipboard/grid-block/paste/grid-block-to-block-grid-paste-translator.d.ts

@@ -14,8 +14,8 @@ export declare class UmbGridBlockToBlockGridClipboardPastePropertyValueTranslato
     /**
      * Checks if the clipboard entry value is compatible with the config.
      * @param {UmbGridBlockClipboardEntryValueModel} propertyValue - The grid block clipboard entry value.
-     * @param {*} config - The Property Editor config.
-     * @param {(value, config) => Promise<boolean>} filter - The filter function.
+     * @param {UmbBlockGridPropertyEditorConfig} config - The Property Editor config.
+     * @param {(propertyValue: UmbBlockGridValueModel, config: UmbBlockGridPropertyEditorConfig) => Promise<boolean>} filter - The filter function.
      * @returns {Promise<boolean>} {Promise<boolean>}
      * @memberof UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator
      */