@umbraco-cms/backoffice 17.7.0 → 17.8.0-rc

package/dist-cms/libs/localization-api/localization.manager.d.ts

@@ -15,12 +15,21 @@ export declare class UmbLocalizationManager {
     connectedControllers: Set<UmbLocalizationController<UmbLocalizationSetBase>>;
     localizations: Map<string, UmbLocalizationSetBase>;
     /**
-     * The currently active language and direction. Read-only from a consumer perspective —
+     * The direction of the currently active language. Read-only from a consumer perspective —
      * to change the active language, call `umbLocalizationRegistry.loadLanguage(locale)`.
-     * The fields stay publicly writable for the registry's pipeline; consumers writing here
+     * The field stays publicly writable for the registry's pipeline; consumers writing here
      * directly will only sync the field without loading the matching dictionaries.
      */
     documentDirection: 'ltr' | 'rtl';
+    /**
+     * The locale used for locale-sensitive formatting, such as dates and numbers.
+     *
+     * This is not necessarily the locale that was requested. Where the region `Intl` infers from
+     * a language-only tag does not match the dictionary registered under that tag, the registry
+     * corrects it — a bare `en`, for example, is served as `en-gb`.
+     *
+     * Read-only from a consumer perspective, as with {@link documentDirection}.
+     */
     documentLanguage: string;
     get fallback(): UmbLocalizationSet | undefined;
     appendConsumer(consumer: UmbLocalizationController<UmbLocalizationSetBase>): void;

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

@@ -6,12 +6,21 @@ export class UmbLocalizationManager {
         this.#requestUpdateChangedKeysId = undefined;
         this.localizations = new Map();
         /**
-         * The currently active language and direction. Read-only from a consumer perspective —
+         * The direction of the currently active language. Read-only from a consumer perspective —
          * to change the active language, call `umbLocalizationRegistry.loadLanguage(locale)`.
-         * The fields stay publicly writable for the registry's pipeline; consumers writing here
+         * The field stays publicly writable for the registry's pipeline; consumers writing here
          * directly will only sync the field without loading the matching dictionaries.
          */
         this.documentDirection = document.documentElement.dir || 'ltr';
+        /**
+         * The locale used for locale-sensitive formatting, such as dates and numbers.
+         *
+         * This is not necessarily the locale that was requested. Where the region `Intl` infers from
+         * a language-only tag does not match the dictionary registered under that tag, the registry
+         * corrects it — a bare `en`, for example, is served as `en-gb`.
+         *
+         * Read-only from a consumer perspective, as with {@link documentDirection}.
+         */
         this.documentLanguage = document.documentElement.lang || navigator.language;
         this.#registerLocalizationBind = this.registerLocalization.bind(this);
         this.#updateChangedKeys = () => {

package/dist-cms/packages/block/block/action/block-action.interface.d.ts

@@ -1,9 +1,18 @@
 import type { UmbBlockActionArgs } from './types.js';
+import type { Observable } from '../../../../libs/observable-api/index.js';
 import type { UmbAction } from '../../../core/action/index.js';
 export interface UmbBlockAction<ArgsMetaType> extends UmbAction<UmbBlockActionArgs<ArgsMetaType>> {
+    /**
+     * Optional, but recommended, observable for the href location, the action will act as a link.
+     * The `execute` method will not be called.
+     * @returns {Promise<Observable<string | undefined> | undefined> | undefined}
+     */
+    getHrefObservable?: () => Promise<Observable<string | undefined> | undefined> | undefined;
     /**
      * The href location, the action will act as a link.
      * The `execute` method will not be called.
+     * Kept alongside `getHrefObservable` for actions whose href never changes after resolving once;
+     * implement the observable variant instead when the href can change during the action's lifetime.
      * @returns {Promise<string | undefined>}
      */
     getHref(): Promise<string | undefined>;
@@ -13,10 +22,18 @@ export interface UmbBlockAction<ArgsMetaType> extends UmbAction<UmbBlockActionAr
      */
     execute(): Promise<void>;
     /**
+     * @deprecated Use `getValidationDataPathObservable()` instead. Optional validation data path for displaying an invalid badge on the action button.
      * Optional validation data path for displaying an invalid badge on the action button.
      * When provided, the default kind element creates a validation state controller
      * and renders a badge when validation messages exist at the given path.
      * @returns {Promise<string | undefined>}
      */
     getValidationDataPath(): Promise<string | undefined>;
+    /**
+     * Optional validation data path observable for displaying an invalid badge on the action button.
+     * When provided, the default kind element creates a validation state controller
+     * and renders a badge when validation messages exist at the given path.
+     * @returns {Promise<Observable<string | undefined> | undefined> | undefined}
+     */
+    getValidationDataPathObservable?(): Promise<Observable<string | undefined> | undefined> | undefined;
 }

package/dist-cms/packages/block/block/action/common/copy-to-clipboard/copy-to-clipboard-block.action.d.ts

@@ -1,13 +1,9 @@
 import type { MetaBlockActionDefaultKind } from '../../default/types.js';
-import type { UmbBlockActionArgs } from '../../types.js';
 import { UmbBlockActionBase } from '../../block-action-base.js';
-import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
 /**
  * Block action that copies the block entry data to the clipboard via `context.copyToClipboard()`.
  */
 export declare class UmbCopyToClipboardBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
-    #private;
-    constructor(host: UmbControllerHost, args: UmbBlockActionArgs<MetaBlockActionDefaultKind>);
     execute(): Promise<void>;
 }
 export { UmbCopyToClipboardBlockAction as api };

package/dist-cms/packages/block/block/action/common/copy-to-clipboard/copy-to-clipboard-block.action.js

@@ -4,15 +4,9 @@ import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-to
  * Block action that copies the block entry data to the clipboard via `context.copyToClipboard()`.
  */
 export class UmbCopyToClipboardBlockAction extends UmbBlockActionBase {
-    #blockEntryContext;
-    constructor(host, args) {
-        super(host, args);
-        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
-            this.#blockEntryContext = context;
-        });
-    }
     async execute() {
-        await this.#blockEntryContext?.copyToClipboard();
+        const context = await this.getContext(UMB_BLOCK_ENTRY_CONTEXT);
+        await context?.copyToClipboard();
     }
 }
 export { UmbCopyToClipboardBlockAction as api };

package/dist-cms/packages/block/block/action/common/edit-content/edit-content-block.action.d.ts

@@ -2,6 +2,7 @@ import type { MetaBlockActionDefaultKind } from '../../default/types.js';
 import type { UmbBlockActionArgs } from '../../types.js';
 import { UmbBlockActionBase } from '../../block-action-base.js';
 import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
+import { type Observable } from '../../../../../../libs/observable-api/index.js';
 /**
  * Block action that navigates to the block's content editor workspace.
  * Exposes the workspace edit path via `getHref()` and the content validation data path via `getValidationDataPath()`.
@@ -9,7 +10,7 @@ import type { UmbControllerHost } from '../../../../../../libs/controller-api/in
 export declare class UmbEditContentBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
     #private;
     constructor(host: UmbControllerHost, args: UmbBlockActionArgs<MetaBlockActionDefaultKind>);
-    getHref(): Promise<string | undefined>;
-    getValidationDataPath(): Promise<string | undefined>;
+    getHrefObservable(): Promise<Observable<string | undefined> | undefined>;
+    getValidationDataPathObservable(): Promise<Observable<string | undefined> | undefined>;
 }
 export { UmbEditContentBlockAction as api };

package/dist-cms/packages/block/block/action/common/edit-content/edit-content-block.action.js

@@ -1,6 +1,8 @@
 import { UmbBlockActionBase } from '../../block-action-base.js';
-import { UmbDataPathBlockElementDataQuery } from '../../../validation/data-path-element-data-query.function.js';
 import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-token.js';
+import { UmbDataPathGeneratorForBlockElementData } from '../../../validation/index.js';
+import { mergeObservables } from '../../../../../../libs/observable-api/index.js';
+import { UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME } from '../../../constants.js';
 /**
  * Block action that navigates to the block's content editor workspace.
  * Exposes the workspace edit path via `getHref()` and the content validation data path via `getValidationDataPath()`.
@@ -19,17 +21,19 @@ export class UmbEditContentBlockAction extends UmbBlockActionBase {
             this.#resolveContext();
         });
     }
-    async getHref() {
+    async getHrefObservable() {
         await this.#contextReady;
-        const path = await this.observe(this.#context?.workspaceEditContentPath)?.asPromise();
-        return path || undefined;
+        return this.#context?.workspaceEditContentPath;
     }
-    async getValidationDataPath() {
+    async getValidationDataPathObservable() {
         await this.#contextReady;
-        const contentKey = await this.observe(this.#context?.contentKey)?.asPromise();
-        if (!contentKey)
+        if (!this.#context)
             return undefined;
-        return `$.contentData[${UmbDataPathBlockElementDataQuery({ key: contentKey })}]`;
+        return mergeObservables([this.#context.contentKey], ([contentKey]) => {
+            if (!contentKey)
+                return undefined;
+            return UmbDataPathGeneratorForBlockElementData(UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME, { key: contentKey });
+        });
     }
 }
 export { UmbEditContentBlockAction as api };

package/dist-cms/packages/block/block/action/common/edit-settings/edit-settings-block.action.d.ts

@@ -2,6 +2,7 @@ import type { MetaBlockActionDefaultKind } from '../../default/types.js';
 import type { UmbBlockActionArgs } from '../../types.js';
 import { UmbBlockActionBase } from '../../block-action-base.js';
 import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
+import { type Observable } from '../../../../../../libs/observable-api/index.js';
 /**
  * Block action that navigates to the block's settings editor workspace.
  * Exposes the workspace edit path via `getHref()` and the settings validation data path via `getValidationDataPath()`.
@@ -9,7 +10,7 @@ import type { UmbControllerHost } from '../../../../../../libs/controller-api/in
 export declare class UmbEditSettingsBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
     #private;
     constructor(host: UmbControllerHost, args: UmbBlockActionArgs<MetaBlockActionDefaultKind>);
-    getHref(): Promise<string | undefined>;
-    getValidationDataPath(): Promise<string | undefined>;
+    getHrefObservable(): Promise<Observable<string | undefined> | undefined>;
+    getValidationDataPathObservable(): Promise<Observable<string | undefined> | undefined>;
 }
 export { UmbEditSettingsBlockAction as api };

package/dist-cms/packages/block/block/action/common/edit-settings/edit-settings-block.action.js

@@ -1,6 +1,8 @@
 import { UmbBlockActionBase } from '../../block-action-base.js';
-import { UmbDataPathBlockElementDataQuery } from '../../../validation/data-path-element-data-query.function.js';
 import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-token.js';
+import { UmbDataPathGeneratorForBlockElementData } from '../../../validation/index.js';
+import { mergeObservables } from '../../../../../../libs/observable-api/index.js';
+import { UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME } from '../../../constants.js';
 /**
  * Block action that navigates to the block's settings editor workspace.
  * Exposes the workspace edit path via `getHref()` and the settings validation data path via `getValidationDataPath()`.
@@ -19,17 +21,19 @@ export class UmbEditSettingsBlockAction extends UmbBlockActionBase {
             this.#resolveContext();
         });
     }
-    async getHref() {
+    async getHrefObservable() {
         await this.#contextReady;
-        const path = await this.observe(this.#context?.workspaceEditSettingsPath)?.asPromise();
-        return path || undefined;
+        return this.#context?.workspaceEditSettingsPath;
     }
-    async getValidationDataPath() {
+    async getValidationDataPathObservable() {
         await this.#contextReady;
-        const settingsKey = await this.observe(this.#context?.settingsKey)?.asPromise();
-        if (!settingsKey)
+        if (!this.#context)
             return undefined;
-        return `$.settingsData[${UmbDataPathBlockElementDataQuery({ key: settingsKey })}]`;
+        return mergeObservables([this.#context.settingsKey], ([settingsKey]) => {
+            if (!settingsKey)
+                return undefined;
+            return UmbDataPathGeneratorForBlockElementData(UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME, { key: settingsKey });
+        });
     }
 }
 export { UmbEditSettingsBlockAction as api };

package/dist-cms/packages/block/block/action/common/expose-content/expose-content-block.action.d.ts

@@ -1,14 +1,10 @@
 import type { MetaBlockActionDefaultKind } from '../../default/types.js';
-import type { UmbBlockActionArgs } from '../../types.js';
 import { UmbBlockActionBase } from '../../block-action-base.js';
-import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
 /**
  * Block action that exposes (creates) the block for the current variant via `context.expose()`.
  * Shown as an alternative to the Edit Content button when the block has not yet been exposed.
  */
 export declare class UmbExposeContentBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
-    #private;
-    constructor(host: UmbControllerHost, args: UmbBlockActionArgs<MetaBlockActionDefaultKind>);
     execute(): Promise<void>;
 }
 export { UmbExposeContentBlockAction as api };

package/dist-cms/packages/block/block/action/common/expose-content/expose-content-block.action.js

@@ -5,15 +5,9 @@ import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-to
  * Shown as an alternative to the Edit Content button when the block has not yet been exposed.
  */
 export class UmbExposeContentBlockAction extends UmbBlockActionBase {
-    #context;
-    constructor(host, args) {
-        super(host, args);
-        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
-            this.#context = context;
-        });
-    }
     async execute() {
-        this.#context?.expose();
+        const context = await this.getContext(UMB_BLOCK_ENTRY_CONTEXT);
+        context?.expose();
     }
 }
 export { UmbExposeContentBlockAction as api };

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

@@ -8,6 +8,7 @@ import { css, customElement, html, ifDefined, nothing, property, state, when, }
 import { UmbActionExecutedEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
+import { UmbDeprecation } from '../../../../core/utils/index.js';
 /**
  * Default element for the `blockAction` extension type.
  * Renders a `<uui-button>` with icon and validation badge, honoring `href`, `execute`, and `getValidationDataPath` from the action API.
@@ -22,17 +23,51 @@ let UmbBlockActionDefaultElement = class UmbBlockActionDefaultElement extends Um
     set api(api) {
         this.#api = api;
         this._href = undefined;
-        // TODO: getHref() and getValidationDataPath() resolve once. If the underlying observable values
-        // change, the button won't update. Consider making these reactive in a future iteration. [LK]
-        this.#api?.getHref?.().then((href) => {
-            this._href = href;
-        });
-        this.#api?.getValidationDataPath?.().then((path) => {
+        this.#gotApi();
+    }
+    async #gotApi() {
+        // Captured, so we can detect if the api has changed while awaiting async calls.
+        const api = this.#api;
+        // TODO: Ideally the this.observe would accept a Promise<Observable> and handle the async resolution internally, but for now we await it here. [NL]
+        const hrefObservable = await api?.getHrefObservable?.();
+        if (this.#api !== api)
+            return;
+        if (hrefObservable) {
+            this.observe(hrefObservable, (href) => (this._href = href), 'observeHref');
+        }
+        else {
+            this._href = await api?.getHref?.();
+            if (this.#api !== api)
+                return;
+        }
+        let pathObservable = undefined;
+        if (api?.getValidationDataPathObservable) {
+            pathObservable = await api.getValidationDataPathObservable();
+            if (this.#api !== api)
+                return;
+        }
+        this.observe(pathObservable, async (path) => {
             this.removeUmbControllerByAlias('observeValidation');
             if (path) {
                 new UmbObserveValidationStateController(this, path, (hasMessages) => (this._invalid = hasMessages), 'observeValidation');
             }
-        });
+            else {
+                this._invalid = false;
+            }
+        }, 'observeValidationPath');
+        if (api && !pathObservable && !!api.getValidationDataPath) {
+            const path = await api.getValidationDataPath();
+            if (this.#api !== api)
+                return;
+            if (path) {
+                new UmbObserveValidationStateController(this, path, (hasMessages) => (this._invalid = hasMessages), 'observeValidation');
+                new UmbDeprecation({
+                    deprecated: 'Block Action getValidationDataPath is deprecated.',
+                    removeInVersion: '20.0.0',
+                    solution: 'Use getValidationDataPathObservable instead.',
+                }).warn();
+            }
+        }
     }
     async #onClick(event) {
         if (this._href)

package/dist-cms/packages/block/block/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The property name of the Block content data, as used in validation data paths.
+ */
+export declare const UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME = "contentData";
+/**
+ * The property name of the Block settings data, as used in validation data paths.
+ */
+export declare const UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME = "settingsData";

package/dist-cms/packages/block/block/constants.js

@@ -0,0 +1,8 @@
+/**
+ * The property name of the Block content data, as used in validation data paths.
+ */
+export const UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME = 'contentData';
+/**
+ * The property name of the Block settings data, as used in validation data paths.
+ */
+export const UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME = 'settingsData';

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

@@ -51,7 +51,7 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
      * Set all contents.
      * @param {Array<UmbBlockDataModel>} contents - All contents.
      */
-    setContents(contents: Array<UmbBlockDataModel>): void;
+    setContents(contents: Array<UmbBlockDataModel> | undefined): void;
     /**
      * Get all contents.
      * @returns {Array<UmbBlockDataModel>} - All contents.
@@ -61,7 +61,7 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
      * Set all settings.
      * @param {Array<UmbBlockDataModel>} settings - All settings.
      */
-    setSettings(settings: Array<UmbBlockDataModel>): void;
+    setSettings(settings: Array<UmbBlockDataModel> | undefined): void;
     /**
      * Get all settings.
      * @returns {Array<UmbBlockDataModel>} - All settings.
@@ -103,9 +103,21 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     removeManySettings(settingsKeys: Array<string>): void;
     removeExposesOf(contentKey: string): void;
     removeCurrentExpose(contentKey: string): void;
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
     setOneContentProperty(key: string, propertyAlias: string, value: unknown): void;
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
     setOneSettingsProperty(key: string, propertyAlias: string, value: unknown): void;
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
     contentProperty(key: string, propertyAlias: string): void;
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
     settingsProperty(key: string, propertyAlias: string): void;
     abstract createWithPresets(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, originData?: BlockOriginDataType): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
     createBlockSettingsData(contentElementTypeKey: string): Promise<{

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

@@ -1,4 +1,5 @@
 import { UmbBlockInsertedEvent } from '../events/block-inserted.event.js';
+import { UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME, UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME } from '../constants.js';
 import { UMB_BLOCK_MANAGER_CONTEXT } from './block-manager.context-token.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbArrayState, UmbBooleanState, UmbClassState, UmbStringState, mergeObservables, } from '../../../../libs/observable-api/index.js';
@@ -10,6 +11,9 @@ import { UmbDeprecation, UmbReadOnlyVariantGuardManager } from '../../../core/ut
 import { UmbPropertyValuePresetVariantBuilderController, } from '../../../core/property/index.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from '../../../language/index.js';
 import { UmbDataTypeDetailRepository } from '../../../data-type/index.js';
+import { UMB_VALIDATION_CONTEXT, UmbValidationCleanUpByUniqueManager, } from '../../../core/validation/index.js';
+const UMB_CONTENT_VALIDATION_CLEAN_UP_ALIAS = Symbol();
+const UMB_SETTINGS_VALIDATION_CLEAN_UP_ALIAS = Symbol();
 export class UmbBlockManagerContext extends UmbContextBase {
     get contentTypesLoaded() {
         return Promise.all(this.#contentTypeRequests);
@@ -30,7 +34,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
     #structures;
     #blockTypes;
     #contents;
+    #contentKeys;
     #settings;
+    #settingsKeys;
     #exposes;
     setEditorConfiguration(configs) {
         this._editorConfiguration.setValue(configs);
@@ -71,12 +77,13 @@ export class UmbBlockManagerContext extends UmbContextBase {
     setContents(contents) {
         this.#contents.setValue(contents);
     }
+    // TODO: make return undefined when undefined in v.19
     /**
      * Get all contents.
      * @returns {Array<UmbBlockDataModel>} - All contents.
      */
     getContents() {
-        return this.#contents.value;
+        return this.#contents.value ?? [];
     }
     /**
      * Set all settings.
@@ -85,12 +92,13 @@ export class UmbBlockManagerContext extends UmbContextBase {
     setSettings(settings) {
         this.#settings.setValue(settings);
     }
+    // TODO: make return undefined when undefined in v.19
     /**
      * Get all settings.
      * @returns {Array<UmbBlockDataModel>} - All settings.
      */
     getSettings() {
-        return this.#settings.value;
+        return this.#settings.value ?? [];
     }
     /**
      * Set all exposes.
@@ -123,10 +131,14 @@ export class UmbBlockManagerContext extends UmbContextBase {
         this.liveEditingMode = this._liveEditingMode.asObservable();
         this._layouts = new UmbArrayState([], (x) => x.contentKey);
         this.layouts = this._layouts.asObservable();
-        this.#contents = new UmbArrayState([], (x) => x.key);
-        this.contents = this.#contents.asObservable();
-        this.#settings = new UmbArrayState([], (x) => x.key);
-        this.settings = this.#settings.asObservable();
+        this.#contents = new UmbArrayState(undefined, (x) => x.key);
+        // TODO: Remove ?? [] fallback in v.19 (or v.20)
+        this.contents = this.#contents.asObservablePart((x) => x ?? []);
+        this.#contentKeys = this.#contents.asObservablePart((x) => (x ? x.map((y) => y.key) : undefined));
+        this.#settings = new UmbArrayState(undefined, (x) => x.key);
+        // TODO: Remove ?? [] fallback in v.19 (or v.20)
+        this.settings = this.#settings.asObservablePart((x) => x ?? []);
+        this.#settingsKeys = this.#settings.asObservablePart((x) => (x ? x.map((y) => y.key) : undefined));
         // TODO: This is a bad seperation of concerns, this should be self initializing, not defined from the outside. [NL]
         this.readOnlyState = new UmbReadOnlyVariantGuardManager(this);
         this.#exposes = new UmbArrayState([], (x) => x.contentKey + '_' + x.culture + '_' + x.segment);
@@ -134,6 +146,21 @@ export class UmbBlockManagerContext extends UmbContextBase {
         this.observe(this.blockTypes, (blockTypes) => {
             this.#ensureContentTypes(blockTypes);
         }, null);
+        // Clean up validation messages for Block content/settings that are no longer part of this Block
+        // Editor's data. Deliberately does not skip the host: we want the Validation Context of the
+        // Property Editor hosting this Block Manager, which is provided on this very same element. [NL]
+        this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => this.#gotValidationContext(context));
+    }
+    #gotValidationContext(context) {
+        // Only accept a Validation Context that is actually ours — a Block Manager can legitimately be
+        // hosted without one, in which case no clean up happens (silent no-op, not an error). [NL]
+        if (!context || context.getHostElement() !== this.getHostElement()) {
+            this.removeUmbControllerByAlias(UMB_CONTENT_VALIDATION_CLEAN_UP_ALIAS);
+            this.removeUmbControllerByAlias(UMB_SETTINGS_VALIDATION_CLEAN_UP_ALIAS);
+            return;
+        }
+        new UmbValidationCleanUpByUniqueManager(this, context, `$.${UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME}`, this.#contentKeys, (queryParams) => queryParams.key, UMB_CONTENT_VALIDATION_CLEAN_UP_ALIAS);
+        new UmbValidationCleanUpByUniqueManager(this, context, `$.${UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME}`, this.#settingsKeys, (queryParams) => queryParams.key, UMB_SETTINGS_VALIDATION_CLEAN_UP_ALIAS);
     }
     #ensureContentTypes(blockTypes) {
         // Collect all unique content type keys
@@ -227,10 +254,10 @@ export class UmbBlockManagerContext extends UmbContextBase {
         return this._layouts.asObservablePart((source) => source.find((x) => x.contentKey === contentKey));
     }
     contentOf(key) {
-        return this.#contents.asObservablePart((source) => source.find((x) => x.key === key));
+        return this.#contents.asObservablePart((source) => source?.find((x) => x.key === key));
     }
     settingsOf(key) {
-        return this.#settings.asObservablePart((source) => source.find((x) => x.key === key));
+        return this.#settings.asObservablePart((source) => source?.find((x) => x.key === key));
     }
     currentExposeOf(contentKey) {
         return mergeObservables([this.#exposes.asObservablePart((source) => source.filter((x) => x.contentKey === contentKey)), this.variantId], ([exposes, variantId]) => {
@@ -279,10 +306,10 @@ export class UmbBlockManagerContext extends UmbContextBase {
         return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey);
     }
     getContentOf(contentKey) {
-        return this.#contents.value.find((x) => x.key === contentKey);
+        return this.#contents.value?.find((x) => x.key === contentKey);
     }
     getSettingsOf(settingsKey) {
-        return this.#settings.value.find((x) => x.key === settingsKey);
+        return this.#settings.value?.find((x) => x.key === settingsKey);
     }
     // originData param is used by some implementations. [NL] should be here, do not remove it.
     setOneLayout(layoutData, _originData) {
@@ -320,17 +347,33 @@ export class UmbBlockManagerContext extends UmbContextBase {
             return;
         this.#exposes.filter((x) => !(x.contentKey === contentKey && variantId.compare(x)));
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     setOneContentProperty(key, propertyAlias, value) {
         this.#contents.updateOne(key, { [propertyAlias]: value });
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     setOneSettingsProperty(key, propertyAlias, value) {
         this.#settings.updateOne(key, { [propertyAlias]: value });
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     contentProperty(key, propertyAlias) {
-        this.#contents.asObservablePart((source) => source.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
+        this.#contents.asObservablePart((source) => source?.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     settingsProperty(key, propertyAlias) {
-        this.#settings.asObservablePart((source) => source.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
+        this.#settings.asObservablePart((source) => source?.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
     }
     async createBlockSettingsData(contentElementTypeKey) {
         const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey);

package/dist-cms/packages/block/block/index.d.ts

@@ -1,3 +1,4 @@
+export * from './constants.js';
 export * from './action/index.js';
 export * from './clipboard/index.js';
 export * from './conditions/constants.js';

package/dist-cms/packages/block/block/index.js

@@ -1,3 +1,4 @@
+export * from './constants.js';
 export * from './action/index.js';
 export * from './clipboard/index.js';
 export * from './conditions/constants.js';

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

@@ -191,14 +191,14 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
 					label=${this.localize.term('blockEditor_tabCreateEmpty')}
 					?active=${!this._openClipboard}
 					@click=${() => (this._openClipboard = false)}>
-					<umb-localize key=${this.localize.term('blockEditor_tabCreateEmpty')}>Create Empty</umb-localize>
+					<umb-localize key="blockEditor_tabCreateEmpty">Create Empty</umb-localize>
 					<uui-icon slot="icon" name="icon-add"></uui-icon>
 				</uui-tab>
 				<uui-tab
 					label=${this.localize.term('blockEditor_tabClipboard')}
 					?active=${this._openClipboard}
 					@click=${() => (this._openClipboard = true)}>
-					<umb-localize key=${this.localize.term('blockEditor_tabClipboard')}>Clipboard</umb-localize>
+					<umb-localize key="blockEditor_tabClipboard">Clipboard</umb-localize>
 					<uui-icon slot="icon" name="icon-clipboard"></uui-icon>
 				</uui-tab>
 			</uui-tab-group>

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

@@ -0,0 +1,9 @@
+import type { UmbBlockDataModel } from '../types.js';
+/**
+ * Validation Data Path generator for Block Element Data.
+ * Writes a JSON-Path similar to `$.contentData[?(@.key == 'my-key://1234')]`
+ * @param {string} dataPathPropertyName - The property name holding the element data, either `contentData` or `settingsData`.
+ * @param {{key: string}} data - A data object with the key property.
+ * @returns {string} The JSON-Path.
+ */
+export declare function UmbDataPathGeneratorForBlockElementData(dataPathPropertyName: string, data: Pick<UmbBlockDataModel, 'key'>): string;

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

@@ -0,0 +1,11 @@
+import { UmbDataPathBlockElementDataQuery } from './data-path-element-data-query.function.js';
+/**
+ * Validation Data Path generator for Block Element Data.
+ * Writes a JSON-Path similar to `$.contentData[?(@.key == 'my-key://1234')]`
+ * @param {string} dataPathPropertyName - The property name holding the element data, either `contentData` or `settingsData`.
+ * @param {{key: string}} data - A data object with the key property.
+ * @returns {string} The JSON-Path.
+ */
+export function UmbDataPathGeneratorForBlockElementData(dataPathPropertyName, data) {
+    return `$.${dataPathPropertyName}[${UmbDataPathBlockElementDataQuery(data)}]`;
+}

package/dist-cms/packages/block/block/validation/index.d.ts

@@ -1,2 +1,3 @@
 export * from './data-path-element-data-query.function.js';
+export * from './data-path-generator-for-element-data.function.js';
 export * from './block-editor-validation-property-path-translator-base.api.js';

package/dist-cms/packages/block/block/validation/index.js

@@ -1,2 +1,3 @@
 export * from './data-path-element-data-query.function.js';
+export * from './data-path-generator-for-element-data.function.js';
 export * from './block-editor-validation-property-path-translator-base.api.js';

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

@@ -1,3 +1,4 @@
+import { UmbDataPathGeneratorForBlockElementData } from '../validation/data-path-generator-for-element-data.function.js';
 import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
 import { UmbContentTypeStructureManager } from '../../../content/content-type/index.js';
 import { UmbClassState, appendToFrozenArray, mergeObservables, } from '../../../../libs/observable-api/index.js';
@@ -78,7 +79,7 @@ export class UmbBlockElementManager extends UmbControllerBase {
         }, null);
         this.observe(this.unique, (key) => {
             if (key) {
-                this.validation.setDataPath('$.' + dataPathPropertyName + `[?(@.key == '${key}')]`);
+                this.validation.setDataPath(UmbDataPathGeneratorForBlockElementData(dataPathPropertyName, { key }));
             }
         }, null);
         this.observe(this.structure.contentTypeDataTypeUniques, (dataTypeUniques) => {