@umbraco-cms/backoffice 17.3.5 → 17.4.0-rc2

package/dist-cms/libs/extension-api/controller/base-extension-initializer.controller.js

@@ -46,7 +46,7 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
             return (this.#manifest?.conditions ?? []).length > 0;
         };
         this.#gotConditions = (manifests) => {
-            manifests.forEach(this.#gotCondition);
+            manifests?.forEach(this.#gotCondition);
         };
         this.#gotCondition = async (conditionManifest) => {
             if (!this.#manifest)
@@ -77,7 +77,7 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
                     emerging?.destroy();
                 }
             });
-            // If a change to amount of condition controllers, this will make sure that when new conditions are added, the callback is fired, so the extensions can be re-evaluated, starting out as bad. [NL]
+            // If a change to amount of condition controllers, this will make sure that when new conditions are added, the callback is fired, so the extensions can be re-evaluated, starting out as not permitted. [NL]
             if (oldLength !== this.#conditionControllers.length) {
                 this.#onConditionsChangedCallback();
             }
@@ -88,34 +88,54 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
                 // When writing this the only plausible case is a call from the conditionController to the onChange callback.
                 return;
             }
+            // Find a condition that is not permitted (Notice how no conditions, means that this extension is permitted)
+            const isPositive = this.#checkConditionsAreGood();
+            if (this._isConditionsPositive === isPositive) {
+                // No change in the conditions, so we don't need to do anything, this is an optimization to prevent multiple calls to the callback when there is no change. [NL]
+                return;
+            }
             // We will collect old value here, but we need to re-collect it after a async method have been called, as it could have changed in the mean time. [NL]
             let oldValue = this.#isPermitted ?? false;
-            // Find a condition that is not permitted (Notice how no conditions, means that this extension is permitted)
-            const isPositive = this.#conditionsAreInitialized() &&
-                this.#conditionControllers.some((condition) => condition.permitted === false) === false;
             this._isConditionsPositive = isPositive;
             if (isPositive === true) {
                 if (this.#isPermitted !== true) {
-                    const newPermission = await this._conditionsAreGood();
-                    // Only set new permission if we are still positive, otherwise it means that we have been destroyed in the mean time. [NL]
-                    if (newPermission === false || this._isConditionsPositive === false) {
-                        // Then we need to revert the above work:
-                        this._conditionsAreBad();
+                    let newPermission;
+                    // check current pending _conditionsAreGood call: [NL]
+                    let entry = this.#pendingGoodCall;
+                    if (entry && entry.manifest === this.#manifest) {
+                        newPermission = await entry.promise;
+                    }
+                    else {
+                        // Since this is a new call, then lets abort the pending call. [NL]
+                        this.#abortPendingGoodCall();
+                        await this._conditionsAreBad();
+                        const abortController = new AbortController();
+                        const promise = this._conditionsAreGood(abortController.signal);
+                        entry = { manifest: this.#manifest, promise, abortController };
+                        this.#pendingGoodCall = entry;
+                        newPermission = await promise;
+                    }
+                    if (this.#pendingGoodCall !== entry) {
                         return;
                     }
+                    else {
+                        this.#pendingGoodCall = undefined;
+                    }
+                    // Only set new permission if we are still positive, otherwise it means that we have been destroyed in the mean time, or we got destroyed. [NL]
+                    if (newPermission === false || this._isConditionsPositive !== true) {
+                        // Then we need to revert the above work. Sync call — see the note in
+                        // the else-if branch on why we don't await. [NL]
+                        this._conditionsAreBad();
+                        newPermission = false;
+                    }
                     // We update the oldValue as this point, cause in this way we are sure its the value at this point, when doing async code someone else might have changed the state in the mean time. [NL]
                     oldValue = this.#isPermitted ?? false;
                     this.#isPermitted = newPermission;
                 }
             }
             else if (this.#isPermitted !== false) {
-                // Clean up:
-                await this._conditionsAreBad();
-                // Only continue if we are still negative, otherwise it means that something changed in the mean time. [NL]
-                if (this._isConditionsPositive === true) {
-                    return;
-                }
-                // We update the oldValue as this point, cause in this way we are sure its the value at this point, when doing async code someone else might have changed the state in the mean time. [NL]
+                // clean-up any current [NL]
+                this._conditionsAreBad();
                 oldValue = this.#isPermitted ?? false;
                 this.#isPermitted = false;
             }
@@ -146,6 +166,7 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
             }
             else {
                 this.#manifest = undefined;
+                this._isConditionsPositive = undefined;
                 this.#clearPermittedState();
                 this.#overwrites = [];
                 this.#cleanConditions();
@@ -240,10 +261,28 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
         }
         return undefined;
     }
-    #conditionsAreInitialized() {
+    #checkConditionsAreGood() {
         // Not good if we don't have a manifest.
+        if (this.#manifest === undefined)
+            return false;
         // Only good if conditions of manifest is equal to the amount of condition controllers (one for each condition). [NL]
-        return (this.#manifest !== undefined && this.#conditionControllers.length === (this.#manifest.conditions ?? []).length);
+        const hasAllConditions = (this.#manifest.conditions ?? []).length === this.#conditionControllers.length;
+        if (hasAllConditions === false)
+            return false;
+        // Compare all manifest conditions with the condition controllers configs to be sure we have the right ones, as we might end up in a state where we have the same amount of controllers as conditions, but they are not the right ones. [NL]
+        const allConditionsHaveControllers = (this.#manifest.conditions ?? []).every((condition) => this.#conditionControllers.some((controller) => controller.config === condition));
+        if (allConditionsHaveControllers === false)
+            return false;
+        // Only good if all the conditions are permitted:
+        return this.#conditionControllers.some((condition) => condition.permitted === false) === false;
+    }
+    // The currently-pending `_conditionsAreGood()` promise and manifest, to detect if we can reuse it.
+    #pendingGoodCall;
+    #abortPendingGoodCall() {
+        if (this.#pendingGoodCall) {
+            this.#pendingGoodCall.abortController.abort();
+            this.#pendingGoodCall = undefined;
+        }
     }
     #onConditionsChangedCallback;
     equal(otherClass) {
@@ -279,9 +318,12 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
             return;
         this.#manifest = undefined;
         this.#promiseResolvers = [];
+        // Abort any pending good-call so its subclass run refuses to commit (sees
+        // `signal.aborted`) instead of trying to assign into a destroyed initializer. [NL]
+        this.#abortPendingGoodCall();
         this.#clearPermittedState(); // This fires the callback as not permitted, if it was permitted before. [NL]
         this.#isPermitted = undefined;
-        this._isConditionsPositive = false;
+        this._isConditionsPositive = undefined;
         this.#overwrites = [];
         this.#cleanConditions();
         this.#onPermissionChanged = undefined;

package/dist-cms/libs/extension-api/controller/extension-api-initializer.controller.d.ts

@@ -36,7 +36,7 @@ export declare class UmbExtensionApiInitializer<ManifestType extends ManifestApi
      * ```
      */
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, constructorArguments: Array<unknown> | UmbApiConstructorArgumentsMethodType<ManifestType> | undefined, onPermissionChanged?: (isPermitted: boolean, controller: ControllerType) => void);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
     destroy(): void;
 }

package/dist-cms/libs/extension-api/controller/extension-api-initializer.controller.js

@@ -60,13 +60,20 @@ export class UmbExtensionApiInitializer extends UmbBaseExtensionInitializer {
         });
     };
     */
-    async _conditionsAreGood() {
+    async _conditionsAreGood(signal) {
         const manifest = this.manifest; // In this case we are sure its not undefined.
         const newApi = await createExtensionApi(this._host, manifest, this.#constructorArguments);
-        if (!this._isConditionsPositive) {
-            // We are not positive anymore, so we will back out of this creation.
+        if (signal.aborted || !this._isConditionsPositive) {
+            newApi?.destroy?.();
             return false;
         }
+        // A previous _conditionsAreGood() on this same initializer may have already
+        // assigned this.#api and resolved before us. Without cleanup that instance would
+        // keep running until this._host is destroyed — not a hard leak, but any
+        // subscriptions / context consumers / async setup it started stay alive.
+        if (this.#api && this.#api !== newApi) {
+            this.#api.destroy?.();
+        }
         this.#api = newApi;
         if (this.#api) {
             this.#api.manifest = manifest;

package/dist-cms/libs/extension-api/controller/extension-element-and-api-initializer.controller.d.ts

@@ -32,7 +32,7 @@ export declare class UmbExtensionElementAndApiInitializer<ManifestType extends M
     get apiProps(): Record<string, unknown> | undefined;
     set apiProps(newVal: Record<string, unknown> | undefined);
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, constructorArguments: Array<unknown> | UmbApiConstructorArgumentsMethodType<ManifestType> | undefined, onPermissionChanged: (isPermitted: boolean, controller: ControllerType) => void, defaultElement?: string, defaultApi?: ApiLoaderProperty<ExtensionApiInterface>);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
     destroy(): void;
 }

package/dist-cms/libs/extension-api/controller/extension-element-and-api-initializer.controller.js

@@ -100,17 +100,26 @@ export class UmbExtensionElementAndApiInitializer extends UmbBaseExtensionInitia
             this.#api[key] = this.#apiProps[key];
         });
     };
-    async _conditionsAreGood() {
+    async _conditionsAreGood(signal) {
         const manifest = this.manifest; // In this case we are sure its not undefined.
         const { element: newComponent, api: newApi } = await createExtensionElementWithApi(manifest, this.#constructorArguments, this.#defaultElement, this.#defaultApi);
-        if (!this._isConditionsPositive) {
+        if (signal.aborted || !this._isConditionsPositive) {
             newApi?.destroy?.();
             if (newComponent && 'destroy' in newComponent) {
                 newComponent.destroy();
             }
-            // We are not positive anymore, so we will back out of this creation.
             return false;
         }
+        // A previous _conditionsAreGood() on this same initializer may have already
+        // assigned this.#api / this.#component and resolved before us. The API's host is
+        // the transient element (see createExtensionElementWithApi), not this initializer,
+        // so nothing else in the controller-host chain will clean an orphaned pair up.
+        if (this.#api && this.#api !== newApi) {
+            this.#api.destroy?.();
+        }
+        if (this.#component && this.#component !== newComponent && 'destroy' in this.#component) {
+            this.#component.destroy();
+        }
         this.#api = newApi;
         if (this.#api) {
             this.#assignApiProps();

package/dist-cms/libs/extension-api/controller/extension-element-initializer.controller.d.ts

@@ -22,7 +22,7 @@ export declare class UmbExtensionElementInitializer<ManifestType extends Manifes
     get properties(): Record<string, unknown> | undefined;
     set properties(newVal: Record<string, unknown> | undefined);
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, onPermissionChanged: (isPermitted: boolean, controller: ControllerType) => void, defaultElement?: string);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
     destroy(): void;
 }

package/dist-cms/libs/extension-api/controller/extension-element-initializer.controller.js

@@ -56,13 +56,21 @@ export class UmbExtensionElementInitializer extends UmbBaseExtensionInitializer
             this.#component[key] = this.#properties[key];
         });
     };
-    async _conditionsAreGood() {
+    async _conditionsAreGood(signal) {
         const manifest = this.manifest; // In this case we are sure its not undefined.
         const newComponent = await createExtensionElement(manifest, this.#defaultElement);
-        if (!this._isConditionsPositive) {
-            // We are not positive anymore, so we will back out of this creation.
+        if (signal.aborted || !this._isConditionsPositive) {
+            if (newComponent && 'destroy' in newComponent) {
+                newComponent.destroy();
+            }
             return false;
         }
+        if (this.#component && this.#component !== newComponent) {
+            if ('destroy' in this.#component) {
+                this.#component.destroy();
+            }
+            this.#component = undefined;
+        }
         this.#component = newComponent;
         if (this.#component) {
             this.#assignProperties();

package/dist-cms/libs/extension-api/controller/extension-manifest-initializer.controller.d.ts

@@ -13,6 +13,6 @@ import type { UmbControllerHost } from '../../controller-api/index.js';
  */
 export declare class UmbExtensionManifestInitializer<ManifestType extends ManifestWithDynamicConditions = ManifestWithDynamicConditions, ControllerType extends UmbBaseExtensionInitializer<ManifestType, any> = any> extends UmbBaseExtensionInitializer<ManifestType, ControllerType> {
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, onPermissionChanged: (isPermitted: boolean, controller: ControllerType) => void);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(_signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
 }

package/dist-cms/libs/extension-api/controller/extension-manifest-initializer.controller.js

@@ -13,7 +13,7 @@ export class UmbExtensionManifestInitializer extends UmbBaseExtensionInitializer
         super(host, extensionRegistry, 'extManifest_', alias, onPermissionChanged);
         this._init();
     }
-    async _conditionsAreGood() {
+    async _conditionsAreGood(_signal) {
         return true;
     }
     async _conditionsAreBad() {

package/dist-cms/libs/extension-api/initializers/extension-initializer-base.d.ts

@@ -9,8 +9,8 @@ import type { UmbElement } from '../../element-api/index.js';
 export declare abstract class UmbExtensionInitializerBase<Key extends string, T extends ManifestBase = SpecificManifestTypeOrManifestBase<UmbExtensionManifest, Key>> extends UmbControllerBase {
     #private;
     protected host: UmbElement;
-    protected extensionRegistry: UmbExtensionRegistry<T, import("../index.js").UmbConditionConfigBase<string>, ManifestBase | T>;
-    loaded: import("rxjs").Observable<void>;
+    protected extensionRegistry: UmbExtensionRegistry<T>;
+    loaded: import("rxjs").Observable<boolean | undefined>;
     constructor(host: UmbElement, extensionRegistry: UmbExtensionRegistry<T>, manifestType: Key);
     /**
      * Perform any logic required to instantiate the extension.

package/dist-cms/libs/extension-api/initializers/extension-initializer-base.js

@@ -1,15 +1,17 @@
 import { UmbControllerBase } from '../../class-api/index.js';
-import { ReplaySubject } from '../../../external/rxjs/index.js';
+import { UmbBooleanState } from '../../observable-api/index.js';
 /**
  * Base class for extension initializers, which are responsible for loading and unloading extensions.
  */
 export class UmbExtensionInitializerBase extends UmbControllerBase {
     #extensionMap;
+    // Use the value `undefined`, as that would not resolve a observation promise. [NL]
     #loaded;
     constructor(host, extensionRegistry, manifestType) {
         super(host);
         this.#extensionMap = new Map();
-        this.#loaded = new ReplaySubject(1);
+        // Use the value `undefined`, as that would not resolve a observation promise. [NL]
+        this.#loaded = new UmbBooleanState(undefined);
         this.loaded = this.#loaded.asObservable();
         this.host = host;
         this.extensionRegistry = extensionRegistry;
@@ -26,7 +28,9 @@ export class UmbExtensionInitializerBase extends UmbControllerBase {
                 this.#extensionMap.set(extension.alias, extension);
                 return this.instantiateExtension(extension);
             }));
-            this.#loaded.next();
+            if (extensions.length > 0) {
+                this.#loaded.setValue(true);
+            }
         });
     }
 }

package/dist-cms/libs/extension-api/registry/extension.registry.js

@@ -176,8 +176,28 @@ export class UmbExtensionRegistry {
      * @memberof UmbExtensionRegistry
      */
     registerMany(manifests) {
-        // we have to register extensions individually, so we ensure a manifest is valid before continuing to the next one
-        manifests.forEach((manifest) => this.register(manifest));
+        const toAdd = [];
+        for (const manifest of manifests) {
+            // TODO: refactor this so this code is not duplicated between this and single extension register
+            if (!this.#validateExtension(manifest))
+                continue;
+            if (manifest.type === 'kind') {
+                this.defineKind(manifest);
+                continue;
+            }
+            // TODO: Revisit this, it could use the isExtensionApproved, but this code also checks alias duplication against the toAdd array. [NL]
+            if (!this.#acceptExtension(manifest))
+                continue;
+            const alias = manifest.alias;
+            if (this._extensions.getValue().find((e) => e.alias === alias) || toAdd.find((e) => e.alias === alias)) {
+                console.error(`Extension with alias ${alias} is already registered`);
+                continue;
+            }
+            toAdd.push(this.#appendAdditionalConditions(manifest));
+        }
+        if (toAdd.length) {
+            this._extensions.setValue([...this._extensions.getValue(), ...toAdd]);
+        }
     }
     /**
      * Unregister many extensions with the given aliases.

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

@@ -84,6 +84,12 @@ export declare class UmbLocalizationController<LocalizationSetType extends UmbLo
      * @returns {string}
      */
     date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
+    /**
+     * Outputs a localized date with time using short date and medium time format.
+     * @param {Date | string} dateToFormat - the date to format.
+     * @returns {string}
+     */
+    dateTime(dateToFormat: Date | string): string;
     /**
      * Outputs a localized number in the specified format.
      * @param {number | string} numberToFormat - the number or string to format.

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

@@ -182,6 +182,15 @@ export class UmbLocalizationController {
         dateToFormat = new Date(dateToFormat);
         return new Intl.DateTimeFormat(this.lang(), options).format(dateToFormat);
     }
+    /**
+     * Outputs a localized date with time using short date and medium time format.
+     * @param {Date | string} dateToFormat - the date to format.
+     * @returns {string}
+     */
+    dateTime(dateToFormat) {
+        dateToFormat = new Date(dateToFormat);
+        return new Intl.DateTimeFormat(this.lang(), { dateStyle: 'short', timeStyle: 'medium' }).format(dateToFormat);
+    }
     /**
      * Outputs a localized number in the specified format.
      * @param {number | string} numberToFormat - the number or string to format.

package/dist-cms/packages/block/block/conditions/block-workspace-is-readonly.condition.js

@@ -4,9 +4,11 @@ export class UmbBlockWorkspaceIsReadOnlyCondition extends UmbConditionBase {
     constructor(host, args) {
         super(host, args);
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
-            this.observe(context?.readOnlyGuard.permitted, (isReadOnly) => {
+            this.observe(context?.readOnlyGuard.isPermittedForObservableVariant(context.variantId), (isReadOnly) => {
+                // Only react to positives or negatives:
                 if (isReadOnly !== undefined) {
-                    this.permitted = isReadOnly === (this.config.match !== undefined ? this.config.match : true);
+                    const match = args.config.match ?? true;
+                    this.permitted = isReadOnly === match;
                 }
             }, 'observeIsReadOnly');
         });

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

@@ -6,7 +6,7 @@ export class UmbBlockEntriesContext extends UmbContextBase {
         return this._layoutEntries.getValue().length;
     }
     constructor(host, blockManagerContextToken) {
-        super(host, UMB_BLOCK_ENTRIES_CONTEXT.toString());
+        super(host, UMB_BLOCK_ENTRIES_CONTEXT);
         this._catalogueRouteBuilderState = new UmbBasicState(undefined);
         this.catalogueRouteBuilder = this._catalogueRouteBuilderState.asObservable();
         this._workspacePath = new UmbStringState(undefined);

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

@@ -4,6 +4,7 @@ import type { UmbBlockEntriesContext } from './block-entries.context.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
+import { UmbLocalizationController } from '../../../../libs/localization-api/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
 import type { UmbBlockTypeBaseModel } from '../../block-type/index.js';
@@ -15,6 +16,7 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
     protected _manager?: BlockManagerContextType;
     protected _entries?: BlockEntriesContextType;
     readonly unsupported: Observable<boolean | undefined>;
+    protected readonly localize: UmbLocalizationController<import("../../../../libs/localization-api/index.js").UmbLocalizationSet>;
     protected readonly _variantId: Observable<UmbVariantId | undefined>;
     readonly hasExpose: Observable<boolean | undefined>;
     readonly actionsVisibility: Observable<boolean>;

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

@@ -9,7 +9,6 @@ import { UmbUfmVirtualRenderController } from '../../../ufm/index.js';
 export class UmbBlockEntryContext extends UmbContextBase {
     #contentKey;
     #unsupported;
-    #localize;
     #pathAddendum;
     #variantId;
     #hasExpose;
@@ -159,7 +158,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
         super(host, 'UmbBlockEntryContext');
         this.#unsupported = new UmbBooleanState(undefined);
         this.unsupported = this.#unsupported.asObservable();
-        this.#localize = new UmbLocalizationController(this);
+        this.localize = new UmbLocalizationController(this);
         this.#pathAddendum = new UmbRoutePathAddendumContext(this);
         this.#variantId = new UmbClassState(undefined);
         this._variantId = this.#variantId.asObservable();
@@ -428,14 +427,11 @@ export class UmbBlockEntryContext extends UmbContextBase {
             return;
         // TODO: Here is a potential future issue. This is parsing on the read only state of the variant that this is opened from, that is problematic when we enable switching variant within a Block. [NL]
         // TODO: This could benefit from a more dynamic approach, where we inherit all non-variant and variant scoped states. [NL]
-        this.observe(
-        // TODO: Instead transfer all variant states.
-        this._manager.readOnlyState.isPermittedForObservableVariant(this._variantId), (isReadOnly) => {
+        this.observe(this._manager.readOnlyState.permitted, (isReadOnly) => {
             const unique = 'UMB_BLOCK_MANAGER_CONTEXT';
             if (isReadOnly) {
                 const rule = {
                     unique,
-                    variantId: this.#variantId.getValue(),
                 };
                 this.readOnlyGuard?.addRule(rule);
             }
@@ -507,7 +503,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
             // TODO: Maybe this could be skipped if we had a fallback label which was set to get the content element type name?
             // Get the name of the content element type for label:
             this.observe(this.contentElementTypeName, (contentTypeName) => {
-                this.#label.setValue(this.#localize.string(contentTypeName) || 'no name');
+                this.#label.setValue(this.localize.string(contentTypeName) || 'no name');
             }, 'observeContentTypeName');
         }
     }
@@ -530,9 +526,9 @@ export class UmbBlockEntryContext extends UmbContextBase {
     async requestDelete() {
         const blockName = this.getName();
         await umbConfirmModal(this, {
-            headline: this.#localize.term('blockEditor_confirmDeleteBlockTitle', blockName),
-            content: this.#localize.term('blockEditor_confirmDeleteBlockMessage', blockName),
-            confirmLabel: this.#localize.term('general_delete'),
+            headline: this.localize.term('blockEditor_confirmDeleteBlockTitle', blockName),
+            content: this.localize.term('blockEditor_confirmDeleteBlockMessage', blockName),
+            confirmLabel: '#general_delete',
             color: 'danger',
         });
         this.delete();

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

@@ -348,7 +348,6 @@ export class UmbBlockManagerContext extends UmbContextBase {
         };
     }
     async _createBlockElementData(key, contentTypeKey) {
-        //
         const appLanguage = await this.getContext(UMB_APP_LANGUAGE_CONTEXT);
         if (!appLanguage) {
             throw new Error('Could not retrieve app language context.');
@@ -357,13 +356,19 @@ export class UmbBlockManagerContext extends UmbContextBase {
         if (!contentStructure) {
             throw new Error(`Cannot create Preset for Block, missing content structure for ${contentTypeKey}`);
         }
-        // Set culture and segment for all values:
-        const cutlures = contentStructure.variesByCulture ? await appLanguage.getCultures() : [];
-        if (cutlures.length === 0) {
+        // Ensure the content type and all its compositions are fully loaded before reading properties.
+        // Without this, getContentTypeProperties() may return only the owner type's properties
+        // if compositions haven't finished loading yet.
+        await contentStructure.whenLoaded();
+        // Use the synchronous boolean getters, not the Observable properties (which are always truthy).
+        const hostVariesByCulture = contentStructure.getVariesByCulture() ?? false;
+        const hostVariesBySegment = contentStructure.getVariesBySegment() ?? false;
+        const cultures = hostVariesByCulture ? await appLanguage.getCultures() : [];
+        if (hostVariesByCulture && cultures.length === 0) {
             throw new Error('Could not retrieve app cultures.');
         }
         // TODO: Receive the segments from somewhere. [NL]
-        const segments = contentStructure.variesBySegment ? [] : undefined;
+        const segments = hostVariesBySegment ? [] : undefined;
         const repo = new UmbDataTypeDetailRepository(this);
         const propertyTypes = await contentStructure.getContentTypeProperties();
         const valueDefinitions = await Promise.all(propertyTypes.map(async (property) => {
@@ -382,13 +387,17 @@ export class UmbBlockManagerContext extends UmbContextBase {
                 propertyEditorSchemaAlias: dataType.editorAlias,
                 config: dataType.values,
                 typeArgs: {
-                    variesByCulture: property.variesByCulture,
-                    variesBySegment: property.variesBySegment,
+                    // Normalize property variance against the host content type, mirroring the
+                    // server-side logic in ContentTypeCompositionBase (propertyType.Variations &= Variations).
+                    // Properties from compositions are loaded individually and carry their own variance flags,
+                    // which may not match the host's effective variance (GH-22230).
+                    variesByCulture: property.variesByCulture && hostVariesByCulture,
+                    variesBySegment: property.variesBySegment && hostVariesBySegment,
                 },
             };
         }));
         const controller = new UmbPropertyValuePresetVariantBuilderController(this);
-        controller.setCultures(cutlures);
+        controller.setCultures(cultures);
         if (segments) {
             controller.setSegments(segments);
         }
@@ -397,7 +406,6 @@ export class UmbBlockManagerContext extends UmbContextBase {
             entityUnique: key,
             entityTypeUnique: contentTypeKey,
         });
-        // Set culture and segment for all values:
         return {
             key,
             contentTypeKey,

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

@@ -178,7 +178,7 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
 				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>`)}
+				${when(imgSrc, (src) => html `<img src=${src} alt="" decoding="async" />`, () => html `<umb-icon name=${block.icon ?? ''} color=${ifDefined(block.iconColor)}></umb-icon>`)}
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>
 		`;

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

@@ -59,12 +59,12 @@ export class UmbBlockElementManager extends UmbControllerBase {
             if (id) {
                 this.structure.loadType(id);
             }
-        });
+        }, null);
         this.observe(this.unique, (key) => {
             if (key) {
                 this.validation.setDataPath('$.' + dataPathPropertyName + `[?(@.key == '${key}')]`);
             }
-        });
+        }, null);
         this.observe(this.structure.contentTypeDataTypeUniques, (dataTypeUniques) => {
             this.#dataTypeItemManager.setUniques(dataTypeUniques);
         }, null);

package/dist-cms/packages/block/block/workspace/block-workspace-editor.element.d.ts

@@ -2,6 +2,7 @@ import { UmbLitElement } from '../../../core/lit-element/index.js';
 export declare class UmbBlockWorkspaceEditorElement extends UmbLitElement {
     constructor();
     private _headline;
+    private _readOnly?;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }