@umbraco-cms/backoffice 16.1.0 → 16.2.0-rc

package/dist-cms/external/uui/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@umbraco-backoffice/uui",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build"
+    },
+    "dependencies": {
+        "@umbraco-ui/uui": "^1.15.0-rc.0",
+        "@umbraco-ui/uui-css": "^1.15.0-rc.0"
+    }
+}

package/dist-cms/external/uui/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist-cms/external/uui/vite.config.js

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import { cpSync, rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base';
+const dist = '../../../dist-cms/external/uui';
+const distAssets = '../../../dist-cms';
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+// copy css
+cpSync('../../../node_modules/@umbraco-ui/uui-css/dist/uui-css.css', `${distAssets}/css/uui-css.css`, {
+    recursive: true,
+});
+// copy fonts
+cpSync('../../../node_modules/@umbraco-ui/uui-css/assets/fonts', `${distAssets}/assets/fonts`, {
+    recursive: true,
+});
+export default defineConfig({
+    ...getDefaultConfig({
+        dist,
+        base: '/umbraco/backoffice/external/uui',
+        entry: {
+            index: './index.ts',
+        },
+    }),
+});

package/dist-cms/json-schema/umbraco-package-schema.js

@@ -1 +1,2 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import '@umbraco-cms/backoffice/extension-registry';

package/dist-cms/libs/context-proxy/context-proxy.controller.d.ts

@@ -1,9 +1,7 @@
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 /**
  * @internal
- * This controller creates a Proxy for the Context API.
- * @description It is not advised for anyone to implement this unless they know exactly what they are doing.
  */
 export declare class UmbContextProxyController extends UmbControllerBase {
     #private;

package/dist-cms/libs/context-proxy/context-proxy.controller.js

@@ -1,10 +1,8 @@
-import { UMB_CONTEXT_PROVIDE_EVENT_TYPE, UMB_CONTEXT_REQUEST_EVENT_TYPE, } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UMB_CONTEXT_PROVIDE_EVENT_TYPE, UMB_CONTEXT_REQUEST_EVENT_TYPE } from '@umbraco-cms/backoffice/context-api';
 const CtrlAlias = Symbol();
 /**
  * @internal
- * This controller creates a Proxy for the Context API.
- * @description It is not advised for anyone to implement this unless they know exactly what they are doing.
  */
 export class UmbContextProxyController extends UmbControllerBase {
     #target;

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

@@ -38,7 +38,6 @@ export declare class UmbLocalizationController<LocalizationSetType extends UmbLo
      * @returns {string} - the language code.
      */
     lang(): string;
-    private getLocalizationData;
     /**
      * Outputs a translated term.
      * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.

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

@@ -64,7 +64,7 @@ export class UmbLocalizationController {
     lang() {
         return `${this.#hostEl?.lang || umbLocalizationManager.documentLanguage}`.toLowerCase();
     }
-    getLocalizationData(lang) {
+    #getLocalizationData(lang) {
         const locale = new Intl.Locale(lang);
         const language = locale?.language.toLowerCase();
         const region = locale?.region?.toLowerCase() ?? '';
@@ -84,7 +84,7 @@ export class UmbLocalizationController {
         if (!this.#usedKeys.includes(key)) {
             this.#usedKeys.push(key);
         }
-        const { primary, secondary } = this.getLocalizationData(this.lang());
+        const { primary, secondary } = this.#getLocalizationData(this.lang());
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let term;
         // Look for a matching term using regionCode, code, then the fallback

package/dist-cms/libs/observable-api/utils/index.d.ts

@@ -7,6 +7,7 @@ export * from './default-memoization.function.js';
 export * from './filter-frozen-array.function.js';
 export * from './json-string-comparison.function.js';
 export * from './merge-observables.function.js';
+export * from './observation-as-promise.function.js';
 export * from './observe-multiple.function.js';
 export * from './partial-update-frozen-array.function.js';
 export * from './push-at-to-unique-array.function.js';

package/dist-cms/libs/observable-api/utils/index.js

@@ -7,6 +7,7 @@ export * from './default-memoization.function.js';
 export * from './filter-frozen-array.function.js';
 export * from './json-string-comparison.function.js';
 export * from './merge-observables.function.js';
+export * from './observation-as-promise.function.js';
 export * from './observe-multiple.function.js';
 export * from './partial-update-frozen-array.function.js';
 export * from './push-at-to-unique-array.function.js';

package/dist-cms/libs/observable-api/utils/observation-as-promise.function.d.ts

@@ -0,0 +1,9 @@
+import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+/**
+ * @function observationAsPromise
+ * @param {Observable<unknown>} observable - an Array of Observables to use for this combined observation.
+ * @param {Promise<condition>} condition - a method which should return true or false, if rejected or returning undefined the observation will result in a rejected Promise.
+ * @description - Observes an Observable and returns a Promise that resolves when the condition returns true. If the condition returns undefined or rejects, the Promise will reject with the current value.
+ * @returns {Promise<unknown>} - Returns a Promise which resolves when the condition returns true or rejects when the condition returns undefined or is rejecting it self.
+ */
+export declare function observationAsPromise<T>(observable: Observable<T>, condition: (value: T) => Promise<boolean | undefined>): Promise<T>;

package/dist-cms/libs/observable-api/utils/observation-as-promise.function.js

@@ -0,0 +1,37 @@
+/**
+ * @function observationAsPromise
+ * @param {Observable<unknown>} observable - an Array of Observables to use for this combined observation.
+ * @param {Promise<condition>} condition - a method which should return true or false, if rejected or returning undefined the observation will result in a rejected Promise.
+ * @description - Observes an Observable and returns a Promise that resolves when the condition returns true. If the condition returns undefined or rejects, the Promise will reject with the current value.
+ * @returns {Promise<unknown>} - Returns a Promise which resolves when the condition returns true or rejects when the condition returns undefined or is rejecting it self.
+ */
+export function observationAsPromise(observable, condition) {
+    return new Promise((resolve, reject) => {
+        let initialCallback = true;
+        let wantedToClose = false;
+        const subscription = observable.subscribe(async (value) => {
+            const shouldClose = await condition(value).catch(() => {
+                if (initialCallback) {
+                    wantedToClose = true;
+                }
+                else {
+                    subscription.unsubscribe();
+                }
+                reject(value);
+            });
+            if (shouldClose === true) {
+                if (initialCallback) {
+                    wantedToClose = true;
+                }
+                else {
+                    subscription.unsubscribe();
+                }
+                resolve(value);
+            }
+        });
+        initialCallback = false;
+        if (wantedToClose) {
+            subscription.unsubscribe();
+        }
+    });
+}

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

@@ -8,8 +8,8 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
 export declare abstract class UmbBlockEntriesContext<BlockManagerContextTokenType extends UmbContextToken<BlockManagerContextType, BlockManagerContextType>, BlockManagerContextType extends UmbBlockManagerContext<BlockType, BlockLayoutType, BlockOriginData>, BlockType extends UmbBlockTypeBaseModel, BlockLayoutType extends UmbBlockLayoutBaseModel, BlockOriginData extends UmbBlockWorkspaceOriginData> extends UmbContextBase {
-    _manager?: BlockManagerContextType;
-    _retrieveManager: Promise<BlockManagerContextType | undefined>;
+    protected _manager?: BlockManagerContextType;
+    protected _retrieveManager: Promise<BlockManagerContextType | undefined>;
     protected _catalogueRouteBuilderState: UmbBasicState<UmbModalRouteBuilder | undefined>;
     readonly catalogueRouteBuilder: Observable<UmbModalRouteBuilder | undefined>;
     protected _workspacePath: UmbStringState<undefined>;

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

@@ -12,8 +12,8 @@ import type { UmbContentTypeModel, UmbContentTypeStructureManager } from '@umbra
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType extends UmbContextToken<BlockManagerContextType>, BlockManagerContextType extends UmbBlockManagerContext<BlockType, BlockLayoutType>, BlockEntriesContextTokenType extends UmbContextToken<BlockEntriesContextType>, BlockEntriesContextType extends UmbBlockEntriesContext<BlockManagerContextTokenType, BlockManagerContextType, BlockType, BlockLayoutType, BlockOriginData>, BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, BlockOriginData extends UmbBlockWorkspaceOriginData = UmbBlockWorkspaceOriginData> extends UmbContextBase {
     #private;
-    _manager?: BlockManagerContextType;
-    _entries?: BlockEntriesContextType;
+    protected _manager?: BlockManagerContextType;
+    protected _entries?: BlockEntriesContextType;
     readonly unsupported: Observable<boolean | undefined>;
     protected readonly _variantId: Observable<UmbVariantId | undefined>;
     readonly hasExpose: Observable<boolean | undefined>;
@@ -46,11 +46,11 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
      * @returns {string | undefined} - the icon of the content element type.
      */
     getContentElementTypeIcon(): string | undefined;
-    _blockType: UmbObjectState<BlockType | undefined>;
+    protected _blockType: UmbObjectState<BlockType | undefined>;
     readonly blockType: Observable<BlockType | undefined>;
     readonly contentElementTypeKey: Observable<string | undefined>;
     readonly settingsElementTypeKey: Observable<string | null | undefined>;
-    _layout: UmbObjectState<BlockLayoutType | undefined>;
+    protected _layout: UmbObjectState<BlockLayoutType | undefined>;
     readonly layout: Observable<BlockLayoutType | undefined>;
     readonly contentKey: Observable<string | undefined>;
     readonly settingsKey: Observable<string | null | undefined>;
@@ -65,7 +65,7 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
     readonly workspacePath: Observable<string | undefined>;
     readonly workspaceEditContentPath: Observable<string>;
     readonly workspaceEditSettingsPath: Observable<string>;
-    _contentStructureHasProperties: Observable<boolean | undefined>;
+    protected _contentStructureHasProperties: Observable<boolean | undefined>;
     propertyVariantId(structure: UmbContentTypeStructureManager, propertyAlias: string): Promise<Observable<UmbVariantId | undefined>>;
     setContentPropertyValue(propertyAlias: string, value: unknown): void;
     setSettingsPropertyValue(propertyAlias: string, value: unknown): void;
@@ -80,6 +80,10 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
      */
     getContent(): UmbBlockDataModel | undefined;
     protected readonly _settingsValueArray: Observable<UmbBlockDataValueModel<unknown>[] | undefined>;
+    private readonly _settingsDataContentTypeKey;
+    /**
+     * @deprecated Use {@link _settingsDataContentTypeKey} instead. This will be removed in Umbraco 18.
+     */
     private readonly settingsDataContentTypeKey;
     settingsValues(): Promise<Observable<UmbBlockDataType | undefined>>;
     /**
@@ -103,9 +107,9 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
      * @returns {string} - the value of the label.
      */
     getName(): string;
-    abstract _gotManager(): void;
-    abstract _gotEntries(): void;
-    abstract _gotContentType(contentType: UmbContentTypeModel | undefined): void;
+    protected abstract _gotManager(): void;
+    protected abstract _gotEntries(): void;
+    protected abstract _gotContentType(contentType: UmbContentTypeModel | undefined): void;
     edit(): void;
     editSettings(): void;
     requestDelete(): Promise<void>;

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

@@ -217,7 +217,12 @@ export class UmbBlockEntryContext extends UmbContextBase {
         this.#settings = new UmbObjectState(undefined);
         //public readonly settings = this.#settings.asObservable();
         this._settingsValueArray = this.#settings.asObservablePart((x) => x?.values);
-        this.settingsDataContentTypeKey = this.#settings.asObservablePart((x) => x ? (x.contentTypeKey ?? undefined) : null);
+        this._settingsDataContentTypeKey = this.#settings.asObservablePart((x) => x ? (x.contentTypeKey ?? undefined) : null);
+        /**
+         * @deprecated Use {@link _settingsDataContentTypeKey} instead. This will be removed in Umbraco 18.
+         */
+        // eslint-disable-next-line
+        this.settingsDataContentTypeKey = this._settingsDataContentTypeKey;
         this.#propertyValuesToObjectCallback = ([propertyValues, properties, variantId]) => {
             if (!propertyValues || !properties || !variantId)
                 return;
@@ -257,7 +262,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
             this.#getContentStructure();
             this.#observeBlockType();
         }, null);
-        this.observe(this.settingsDataContentTypeKey, (settingsElementTypeKey) => {
+        this.observe(this._settingsDataContentTypeKey, (settingsElementTypeKey) => {
             if (!settingsElementTypeKey)
                 return;
             this.#getSettingsStructure(settingsElementTypeKey);
@@ -269,7 +274,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
             this.#observeBlockTypeLabel();
         }, null);
         // Correct settings data, accordingly to configuration of the BlockType: [NL]
-        this.observe(observeMultiple([this.settingsElementTypeKey, this.settingsDataContentTypeKey]), ([settingsElementTypeKey, settingsDataContentTypeKey]) => {
+        this.observe(observeMultiple([this.settingsElementTypeKey, this._settingsDataContentTypeKey]), ([settingsElementTypeKey, settingsDataContentTypeKey]) => {
             // Notice the values are only undefined while we are missing the source of these observables. [NL]
             if (settingsElementTypeKey === undefined || settingsDataContentTypeKey === undefined)
                 return;

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

@@ -1,14 +1,13 @@
-import { UMB_BLOCK_MANAGER_CONTEXT } from '../../context/index.js';
 import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue } from './block-catalogue-modal.token.js';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import '@umbraco-cms/backoffice/block-type';
 export declare class UmbBlockCatalogueModalElement extends UmbModalBaseElement<UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue> {
     #private;
     private _groupedBlocks;
     private _openClipboard?;
     private _workspacePath?;
     private _filtered;
-    _manager?: typeof UMB_BLOCK_MANAGER_CONTEXT.TYPE;
+    private _manager?;
+    private _loading;
     constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -6,18 +6,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
 import { UMB_BLOCK_MANAGER_CONTEXT } from '../../context/index.js';
-import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UMB_MODAL_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { css, customElement, html, ifDefined, nothing, repeat, state, when, } from '@umbraco-cms/backoffice/external/lit';
+import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-// TODO: This is across packages, how should we go about getting just a single element from another package? like here we just need the umb-block-type-card element
-import '@umbraco-cms/backoffice/block-type';
+import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
+import { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type';
+import { UMB_MODAL_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends UmbModalBaseElement {
+    #itemManager;
     #search;
+    #serverUrl;
     constructor() {
         super();
+        this.#itemManager = new UmbRepositoryItemsManager(this, UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS);
         this.#search = '';
+        this.#serverUrl = '';
         this._groupedBlocks = [];
         this._filtered = [];
+        this._loading = true;
+        this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
+            this.#serverUrl = instance?.getServerUrl() ?? '';
+        });
         this.consumeContext(UMB_MODAL_CONTEXT, (modalContext) => {
             if (modalContext?.data.createBlockInWorkspace) {
                 new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL)
@@ -39,14 +49,26 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => {
             this._manager = manager;
         });
+        this.observe(this.#itemManager.items, async (items) => {
+            this.#observeBlockTypes(items);
+        });
     }
     connectedCallback() {
         super.connectedCallback();
         if (!this.data)
             return;
         this._openClipboard = this.data.openClipboard ?? false;
-        const blocks = this.data.blocks ?? [];
-        const blockGroups = this.data.blockGroups ?? [];
+        this.#itemManager.setUniques(this.data.blocks.map((block) => block.contentElementTypeKey));
+    }
+    #observeBlockTypes(items) {
+        if (!items?.length)
+            return;
+        const lookup = items.reduce((acc, item) => {
+            acc[item.unique] = item;
+            return acc;
+        }, {});
+        const blocks = this.data?.blocks?.map((block) => ({ ...(lookup[block.contentElementTypeKey] ?? {}), ...block })) ?? [];
+        const blockGroups = this.data?.blockGroups ?? [];
         const noGroupBlocks = blocks.filter((block) => !blockGroups.find((group) => group.key === block.groupKey));
         const grouped = blockGroups.map((group) => ({
             name: group.name,
@@ -54,6 +76,7 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         }));
         this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped];
         this.#updateFiltered();
+        this._loading = false;
     }
     #updateFiltered() {
         if (this.#search.length === 0) {
@@ -62,7 +85,12 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         else {
             const search = this.#search.toLowerCase();
             this._filtered = this._groupedBlocks.map((group) => {
-                return { ...group, blocks: group.blocks.filter((block) => block.label?.toLocaleLowerCase().includes(search)) };
+                return {
+                    ...group,
+                    blocks: group.blocks.filter((block) => block.label?.toLowerCase().includes(search) ||
+                        block.name?.toLowerCase().includes(search) ||
+                        block.description?.toLowerCase().includes(search)),
+                };
             });
         }
     }
@@ -89,7 +117,7 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
     }
     render() {
         return html `
-			<umb-body-layout headline="${this.localize.term('blockEditor_addBlock')}">
+			<umb-body-layout headline=${this.localize.term('blockEditor_addBlock')}>
 				${this.#renderViews()}${this.#renderMain()}
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
@@ -106,42 +134,53 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         return this._manager ? (this._openClipboard ? this.#renderClipboard() : this.#renderCreateEmpty()) : nothing;
     }
     #renderClipboard() {
-        return html `<uui-box
-			><umb-clipboard-entry-picker
-				.config=${{ multiple: true, asyncFilter: this.data?.clipboardFilter }}
-				@selection-change=${this.#onClipboardPickerSelectionChange}></umb-clipboard-entry-picker
-		></uui-box>`;
+        return html `
+			<uui-box>
+				<umb-clipboard-entry-picker
+					.config=${{ multiple: true, asyncFilter: this.data?.clipboardFilter }}
+					@selection-change=${this.#onClipboardPickerSelectionChange}></umb-clipboard-entry-picker>
+			</uui-box>
+		`;
     }
     #renderCreateEmpty() {
+        if (this._loading)
+            return html `<div id="loader"><uui-loader></uui-loader></div>`;
         return html `
-			${this.data?.blocks && this.data.blocks.length > 8
-            ? html `<uui-input
+			${when(this.data?.blocks && this.data?.blocks.length > 8, () => html `
+					<uui-input
 						id="search"
 						@input=${this.#onSearch}
 						label=${this.localize.term('general_search')}
 						placeholder=${this.localize.term('placeholders_search')}>
 						<uui-icon name="icon-search" slot="prepend"></uui-icon>
-					</uui-input>`
-            : nothing}
-			${this._filtered.map((group) => html `
-					${group.name && group.blocks.length !== 0 && group.name !== '' ? html `<h4>${group.name}</h4>` : nothing}
+					</uui-input>
+				`)}
+			${repeat(this._filtered, (group) => group.name, (group) => html `
+					${when(group.name && group.blocks.length !== 0 && group.name !== '', () => html `<h4>${group.name}</h4>`)}
 					<div class="blockGroup">
-						${repeat(group.blocks, (block) => block.contentElementTypeKey, (block) => html `
-								<umb-block-type-card
-									.iconFile=${block.thumbnail}
-									.iconColor=${block.iconColor}
-									.backgroundColor=${block.backgroundColor}
-									.contentElementTypeKey=${block.contentElementTypeKey}
-									@open=${() => this.#chooseBlock(block.contentElementTypeKey)}
-									.href=${this._workspacePath && this._manager.getContentTypeHasProperties(block.contentElementTypeKey)
-            ? `${this._workspacePath}create/${block.contentElementTypeKey}`
-            : undefined}>
-								</umb-block-type-card>
-							`)}
+						${repeat(group.blocks, (block) => block.contentElementTypeKey, (block) => this.#renderBlockTypeCard(block))}
 					</div>
 				`)}
 		`;
     }
+    #renderBlockTypeCard(block) {
+        const href = this._workspacePath && this._manager.getContentTypeHasProperties(block.contentElementTypeKey)
+            ? `${this._workspacePath}create/${block.contentElementTypeKey}`
+            : undefined;
+        const path = block.thumbnail ? transformServerPathToClientPath(block.thumbnail) : undefined;
+        const imgSrc = path ? new URL(path, this.#serverUrl)?.href : undefined;
+        return html `
+			<uui-card-block-type
+				href=${ifDefined(href)}
+				name=${this.localize.string(block.name)}
+				description=${this.localize.string(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>`)}
+				<slot name="actions" slot="actions"> </slot>
+			</uui-card-block-type>
+		`;
+    }
     #renderViews() {
         return html `
 			<uui-tab-group slot="navigation">
@@ -164,14 +203,21 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
     }
     static { this.styles = [
         css `
+			#loader {
+				display: flex;
+				justify-content: center;
+			}
+
 			#search {
 				width: 100%;
 				align-items: center;
 				margin-bottom: var(--uui-size-layout-1);
+
+				> uui-icon {
+					padding-left: var(--uui-size-space-3);
+				}
 			}
-			#search uui-icon {
-				padding-left: var(--uui-size-space-3);
-			}
+
 			.blockGroup {
 				display: grid;
 				gap: 1rem;
@@ -198,6 +244,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockCatalogueModalElement.prototype, "_manager", void 0);
+__decorate([
+    state()
+], UmbBlockCatalogueModalElement.prototype, "_loading", void 0);
 UmbBlockCatalogueModalElement = __decorate([
     customElement('umb-block-catalogue-modal')
 ], UmbBlockCatalogueModalElement);

package/dist-cms/packages/block/block/property-value-cloner/flat-layout-block-property-value-cloner.api.d.ts

@@ -1,5 +1,5 @@
 import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '../types.js';
 import { UmbBlockPropertyValueCloner } from './block-property-value-cloner.api.js';
 export declare class UmbFlatLayoutBlockPropertyValueCloner<ValueType extends UmbBlockValueType = UmbBlockValueType> extends UmbBlockPropertyValueCloner<ValueType> {
-    _cloneLayout(layouts: Array<UmbBlockLayoutBaseModel> | undefined): Promise<Array<UmbBlockLayoutBaseModel> | undefined> | undefined;
+    protected _cloneLayout(layouts: Array<UmbBlockLayoutBaseModel> | undefined): Promise<Array<UmbBlockLayoutBaseModel> | undefined> | undefined;
 }

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

@@ -1,10 +1,10 @@
 export class UmbBlockValueResolver {
     async _processValueBlockData(value, valuesCallback) {
-        const contentData = await Promise.all(value.contentData?.map(async (entry) => ({
+        const contentData = await Promise.all((value.contentData ?? []).map(async (entry) => ({
             ...entry,
             values: (await valuesCallback(entry.values)) ?? [],
         })));
-        const settingsData = await Promise.all(value.settingsData?.map(async (entry) => ({
+        const settingsData = await Promise.all((value.settingsData ?? []).map(async (entry) => ({
             ...entry,
             values: (await valuesCallback(entry.values)) ?? [],
         })));

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

@@ -1,7 +1,7 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export declare class UmbBlockWorkspaceEditorElement extends UmbLitElement {
     constructor();
-    _headline: string;
+    private _headline;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }

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

@@ -196,7 +196,11 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         }, 'observeIsReadOnly');
         this.observe(this.content.contentTypeId, (contentTypeId) => {
             this.observe(contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined, (blockType) => {
-                if (blockType?.editorSize) {
+                if (!blockType?.editorSize)
+                    return;
+                const editorConfig = manager.getEditorConfiguration();
+                const useInlineEditing = editorConfig?.find((x) => x.alias === 'useInlineEditingAsDefault')?.value;
+                if (!useInlineEditing) {
                     this.setEditorSize(blockType.editorSize);
                 }
             }, 'observeBlockType');

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

@@ -72,6 +72,7 @@ export const manifests = [
                 match: UMB_BLOCK_WORKSPACE_ALIAS,
             },
         ],
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         TODO_conditions: [
             {
                 alias: 'Umb.Condition.BlockEntryShowContentEdit',

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

@@ -1,6 +1,5 @@
 import './block-workspace-view-edit-tab.element.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
 /**
  * @element umb-block-workspace-view-edit-content-no-router
@@ -10,7 +9,7 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace'
 export declare class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
     private _hasRootGroups;
-    _tabs?: Array<UmbPropertyTypeContainerModel>;
+    private _tabs?;
     private _activeTabId?;
     constructor();
     render(): import("lit-html").TemplateResult<1> | undefined;

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

@@ -1,8 +1,5 @@
 import type { UmbBlockWorkspaceElementManagerNames } from '../../block-workspace.context.js';
-import type UmbBlockElementManager from '../../block-element-manager.js';
-import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import './block-workspace-view-edit-property.element.js';
 export declare class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
     #private;
@@ -10,9 +7,9 @@ export declare class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitEl
     set managerName(value: UmbBlockWorkspaceElementManagerNames | undefined);
     get containerId(): string | null | undefined;
     set containerId(value: string | null | undefined);
-    _dataOwner?: UmbBlockElementManager;
-    _workspaceVariantId?: UmbVariantId;
-    _visibleProperties?: Array<UmbPropertyTypeModel>;
+    private _dataOwner?;
+    private _workspaceVariantId?;
+    private _visibleProperties?;
     private _ownerEntityType?;
     constructor();
     render(): unknown;

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

@@ -6,8 +6,8 @@ import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 export declare class UmbBlockWorkspaceViewEditPropertyElement extends UmbLitElement {
     variantId?: UmbVariantId;
     property?: UmbPropertyTypeModel;
-    _dataPath?: string;
-    _writeable?: boolean;
+    private _dataPath?;
+    private _writeable?;
     ownerContext?: UmbBlockElementManager;
     willUpdate(changedProperties: Map<string, any>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;

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

@@ -14,8 +14,8 @@ export declare class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
      * This is used by Inline Editing Mode of Block List Editor.
      */
     hideSingleGroup: boolean;
-    _groups: Array<UmbPropertyTypeContainerModel>;
-    _hasProperties: boolean;
+    private _groups;
+    private _hasProperties;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     renderGroup(group: UmbPropertyTypeContainerModel): import("lit-html").TemplateResult<1>;

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

@@ -1,4 +1,3 @@
-import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { ManifestWorkspaceView, UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
 export declare class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -7,7 +6,7 @@ export declare class UmbBlockWorkspaceViewEditElement extends UmbLitElement impl
     get manifest(): ManifestWorkspaceView | undefined;
     private _hasRootGroups;
     private _routes;
-    _tabs?: Array<UmbPropertyTypeContainerModel>;
+    private _tabs?;
     private _routerPath?;
     private _activePath;
     constructor();