@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc2

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

@@ -10,6 +10,17 @@ import { css, html, customElement, state, repeat, nothing } from '../../../../..
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../content/content-type/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbViewController } from '../../../../../core/view/index.js';
+import { encodeFolderName } from '../../../../../core/router/index.js';
+/**
+ * @internal only for use inside this class.
+ * Gets the view alias for a given tab. This is used to create a unique view context for each tab in the block workspace.
+ * @param {UmbPropertyTypeContainerMergedModel} tab - The tab to get the view alias for.
+ * @returns {string} The view alias for the tab.
+ */
+function getViewAliasForTab(tab) {
+    return 'tab/' + encodeFolderName(tab.name ?? '');
+}
 /**
  * @element umb-block-workspace-view-edit-content-no-router
  * @description
@@ -17,21 +28,28 @@ import { UmbLitElement } from '../../../../../core/lit-element/index.js';
  */
 let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement {
     #blockWorkspace;
-    #tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
+    #blockManager;
+    #tabsStructureHelper;
+    #tabViewContexts;
     constructor() {
         super();
+        this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
+        this._hintMap = new Map();
+        this.#tabViewContexts = [];
         this.#tabsStructureHelper.setIsRoot(true);
         this.#tabsStructureHelper.setContainerChildType('Tab');
         this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
             this._tabs = tabs;
-            this.#checkDefaultTabName();
+            this.#setupViewContexts();
         });
         this.observe(this.#tabsStructureHelper.hasProperties, (hasRootProperties) => {
             this._hasRootProperties = hasRootProperties;
-            this.#checkDefaultTabName();
+            this.#setupViewContexts();
         }, 'observeRootProperties');
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
             this.#blockWorkspace = context;
+            this.#blockManager = context?.content;
+            // block manager does not need to be setup this in file as that it being done by the implementation of this element.
             this.#tabsStructureHelper.setStructureManager(context?.content.structure);
             this.#observeRootGroups();
         });
@@ -39,11 +57,56 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
     async #observeRootGroups() {
         if (!this.#blockWorkspace)
             return;
-        this.observe(await this.#blockWorkspace.content.structure.hasRootContainers('Group'), (hasRootGroups) => {
-            this._hasRootGroups = hasRootGroups;
-            this.#checkDefaultTabName();
+        this.observe(await this.#blockManager?.structure.hasRootContainers('Group'), (hasRootGroups) => {
+            this._hasRootGroups = hasRootGroups ?? false;
+            this.#setupViewContexts();
         }, 'observeGroups');
     }
+    #setupViewContexts() {
+        if (!this._tabs || !this.#blockManager)
+            return;
+        // Create view contexts for root groups/properties
+        if (this._hasRootGroups || this._hasRootProperties) {
+            this.#createViewContext(null, '#general_generic');
+        }
+        // Create view contexts for all tabs
+        this._tabs.forEach((tab) => {
+            const viewAlias = getViewAliasForTab(tab);
+            this.#createViewContext(viewAlias, tab.name ?? '');
+        });
+        this.#checkDefaultTabName();
+    }
+    #createViewContext(viewAlias, tabName) {
+        if (!this.#blockManager) {
+            throw new Error('Block Manager not found');
+        }
+        if (!this.#tabViewContexts.find((context) => context.viewAlias === viewAlias)) {
+            const view = new UmbViewController(this, viewAlias);
+            this.#tabViewContexts.push(view);
+            if (viewAlias === null) {
+                // for the root tab, we need to filter hints
+                view.hints.setPathFilter((paths) => {
+                    const firstPath = paths[0];
+                    // Treat empty paths as "not in a tab", so they belong to the root tab
+                    if (!firstPath) {
+                        return true;
+                    }
+                    return firstPath.includes('tab/') === false;
+                });
+            }
+            view.setTitle(tabName);
+            view.inheritFrom(this.#blockManager.view);
+            this.observe(view.firstHintOfVariant, (hint) => {
+                if (hint) {
+                    this._hintMap.set(viewAlias, hint);
+                }
+                else {
+                    this._hintMap.delete(viewAlias);
+                }
+                this.requestUpdate('_hintMap');
+            }, 'umbObserveState_' + viewAlias);
+        }
+    }
     #checkDefaultTabName() {
         if (!this._tabs ||
             !this.#blockWorkspace ||
@@ -54,16 +117,46 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
         // Find the default tab to grab
         if (this._activeTabKey === undefined) {
             if (this._hasRootGroups || this._hasRootProperties) {
-                this._activeTabKey = null;
+                const context = this.#tabViewContexts.find((context) => context.viewAlias === null);
+                if (context) {
+                    this._activeTabKey = null;
+                    this.#provideViewContext(null);
+                }
             }
             else if (this._tabs.length > 0) {
                 const tab = this._tabs[0];
-                this._activeTabKey = tab.ownerId ?? tab.ids[0];
+                if (tab) {
+                    this._activeTabKey = tab.ownerId ?? tab.ids[0];
+                    this.#provideViewContext(getViewAliasForTab(tab));
+                }
             }
         }
     }
-    #setTabKey(tabKey) {
-        this._activeTabKey = tabKey;
+    #setCurrentTabPath(tabKey, viewAlias) {
+        // find the key of the view context that we want to show based on the path, and set it to active
+        const context = this.#tabViewContexts.find((context) => context.viewAlias === viewAlias);
+        if (context) {
+            this._activeTabKey = tabKey;
+            this.#provideViewContext(viewAlias);
+        }
+    }
+    #currentProvidedView;
+    #provideViewContext(viewAlias) {
+        const view = this.#tabViewContexts.find((context) => context.viewAlias === viewAlias);
+        if (this.#currentProvidedView === view) {
+            return;
+        }
+        this.#currentProvidedView?.unprovide();
+        if (!view) {
+            throw new Error(`View context with alias ${viewAlias} not found`);
+        }
+        this.#currentProvidedView = view;
+        // ViewAlias null is only for the root tab, therefor we can implement this hack.
+        if (viewAlias === null) {
+            // Specific hack for the Generic tab to only show its name if there are other tabs.
+            view.setTitle(this._tabs && this._tabs?.length > 0 ? '#general_generic' : undefined);
+        }
+        view.provideAt(this);
     }
     render() {
         if (!this._tabs)
@@ -72,19 +165,12 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
 			${this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties))
             ? html `<uui-tab-group slot="header">
 						${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0
-                ? html `<uui-tab
-									label=${this.localize.term('general_generic')}
-									.active=${this._activeTabKey === null}
-									@click=${() => this.#setTabKey(null)}></uui-tab>`
+                ? this.#renderTab(null, null, '#general_generic')
                 : nothing}
 						${repeat(this._tabs, (tab) => tab.name, (tab) => {
                 const tabKey = tab.ownerId ?? tab.ids[0];
-                return html `<uui-tab
-									label=${this.localize.string(tab.name ?? '#general_unnamed')}
-									.active=${this._activeTabKey === tabKey}
-									@click=${() => this.#setTabKey(tabKey)}
-									>${tab.name}</uui-tab
-								>`;
+                const viewAlias = 'tab/' + encodeFolderName(tab.name || '');
+                return this.#renderTab(tabKey, viewAlias, tab.name);
             })}
 					</uui-tab-group>`
             : nothing}
@@ -97,6 +183,21 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
             : nothing}
 		`;
     }
+    #renderTab(tabKey, viewAlias, name) {
+        const hint = this._hintMap.get(viewAlias);
+        const active = this._activeTabKey === tabKey;
+        return html `<uui-tab
+			label=${this.localize.string(name ?? '#general_unnamed')}
+			.active=${active}
+			@click=${() => this.#setCurrentTabPath(tabKey, viewAlias)}
+			data-mark="content-tab:${viewAlias ?? 'root'}"
+			>${hint && !active
+            ? html `<umb-badge slot="extra" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+						>${hint.text}</umb-badge
+					>`
+            : nothing}</uui-tab
+		>`;
+    }
     static { this.styles = [
         UmbTextStyles,
         css `
@@ -108,6 +209,9 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
 
 				padding: calc(var(--uui-size-layout-1));
 			}
+			umb-badge {
+				--uui-badge-inset: 0 0 auto auto;
+			}
 		`,
     ]; }
 };
@@ -123,6 +227,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockWorkspaceViewEditContentNoRouterElement.prototype, "_activeTabKey", void 0);
+__decorate([
+    state()
+], UmbBlockWorkspaceViewEditContentNoRouterElement.prototype, "_hintMap", void 0);
 UmbBlockWorkspaceViewEditContentNoRouterElement = __decorate([
     customElement('umb-block-workspace-view-edit-content-no-router')
 ], UmbBlockWorkspaceViewEditContentNoRouterElement);

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

@@ -8,6 +8,7 @@ export declare class UmbBlockWorkspaceViewEditPropertyElement extends UmbLitElem
     property?: UmbPropertyTypeModel;
     private _dataPath?;
     private _writeable?;
+    private _dataTypeDetail?;
     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-property.element.js

@@ -24,6 +24,14 @@ let UmbBlockWorkspaceViewEditPropertyElement = class UmbBlockWorkspaceViewEditPr
                 }, 'observeView');
             }
         }
+        if (changedProperties.has('property') || changedProperties.has('ownerContext')) {
+            const dataTypeUnique = this.property?.dataType.unique;
+            if (dataTypeUnique && this.ownerContext) {
+                this.observe(this.ownerContext.structure.contentTypeDataTypeDetailOf(dataTypeUnique), (detail) => {
+                    this._dataTypeDetail = detail;
+                }, 'observeDataTypeDetail');
+            }
+        }
     }
     render() {
         if (!this._dataPath || this._writeable === undefined)
@@ -31,6 +39,7 @@ let UmbBlockWorkspaceViewEditPropertyElement = class UmbBlockWorkspaceViewEditPr
         return html `<umb-property-type-based-property
 			data-path=${this._dataPath}
 			.property=${this.property}
+			.dataTypeDetail=${this._dataTypeDetail}
 			?readonly=${!this._writeable}></umb-property-type-based-property>`;
     }
 };
@@ -46,6 +55,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockWorkspaceViewEditPropertyElement.prototype, "_writeable", void 0);
+__decorate([
+    state()
+], UmbBlockWorkspaceViewEditPropertyElement.prototype, "_dataTypeDetail", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbBlockWorkspaceViewEditPropertyElement.prototype, "ownerContext", void 0);

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

@@ -10,6 +10,7 @@ export declare class UmbBlockWorkspaceViewEditElement extends UmbLitElement impl
     private _tabs?;
     private _routerPath?;
     private _activePath;
+    private _hintMap;
     constructor();
     render(): import("lit-html").TemplateResult<1> | undefined;
     static readonly styles: import("lit").CSSResult[];

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

@@ -10,6 +10,7 @@ import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../content/content-type/index.js';
 import { encodeFolderName } from '../../../../../core/router/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbViewController } from '../../../../../core/view/index.js';
 let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement extends UmbLitElement {
     set manifest(value) {
         this.#managerName = (value?.meta).blockElementManagerName ?? 'content';
@@ -19,8 +20,10 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         return;
     }
     #managerName;
+    #blockManager;
     #blockWorkspace;
     #tabsStructureHelper;
+    #tabViewContexts;
     constructor() {
         super();
         this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
@@ -28,6 +31,8 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         this._hasRootGroups = false;
         this._routes = [];
         this._activePath = '';
+        this._hintMap = new Map();
+        this.#tabViewContexts = [];
         this.#tabsStructureHelper.setIsRoot(true);
         this.#tabsStructureHelper.setContainerChildType('Tab');
         this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
@@ -47,6 +52,7 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         if (!this.#blockWorkspace || !this.#managerName)
             return;
         const blockManager = this.#blockWorkspace[this.#managerName];
+        this.#blockManager = blockManager;
         this.#tabsStructureHelper.setStructureManager(blockManager.structure);
         this.observe(this.#blockWorkspace.variantId, (variantId) => {
             if (variantId) {
@@ -76,14 +82,17 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         if (this._tabs.length > 0) {
             this._tabs?.forEach((tab) => {
                 const tabName = tab.name ?? '';
+                const path = `tab/${encodeFolderName(tabName)}`;
                 routes.push({
-                    path: `tab/${encodeFolderName(tabName)}`,
+                    path,
                     component: () => import('./block-workspace-view-edit-tab.element.js'),
                     setup: (component) => {
                         component.managerName = this.#managerName;
                         component.containerId = tab.ids[0];
+                        this.#provideViewContext(path, component);
                     },
                 });
+                this.#createViewContext(path, tabName);
             });
         }
         if (routes.length !== 0) {
@@ -99,6 +108,55 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
         }
         this._routes = routes;
     }
+    #createViewContext(viewAlias, tabName) {
+        if (!this.#blockManager) {
+            throw new Error('Block Manager not found');
+        }
+        if (!this.#tabViewContexts.find((context) => context.viewAlias === viewAlias)) {
+            const view = new UmbViewController(this, viewAlias);
+            this.#tabViewContexts.push(view);
+            if (viewAlias === null) {
+                // for the root tab, we need to filter hints, so in this case we do accept everything that is not in a tab: [NL]
+                view.hints.setPathFilter((paths) => {
+                    const firstPath = paths[0];
+                    // Root-property validation hints can have an empty path (no container), so treat them as root/non-tab hints.
+                    if (!firstPath) {
+                        return true;
+                    }
+                    return firstPath.includes('tab/') === false;
+                });
+            }
+            view.setTitle(tabName);
+            view.inheritFrom(this.#blockManager.view);
+            this.observe(view.firstHintOfVariant, (hint) => {
+                if (hint) {
+                    this._hintMap.set(viewAlias, hint);
+                }
+                else {
+                    this._hintMap.delete(viewAlias);
+                }
+                this.requestUpdate('_hintMap');
+            }, 'umbObserveState_' + viewAlias);
+        }
+    }
+    #currentProvidedView;
+    #provideViewContext(viewAlias, component) {
+        const view = this.#tabViewContexts.find((context) => context.viewAlias === viewAlias);
+        if (this.#currentProvidedView === view) {
+            return;
+        }
+        this.#currentProvidedView?.unprovide();
+        if (!view) {
+            throw new Error(`View context with alias ${viewAlias} not found`);
+        }
+        this.#currentProvidedView = view;
+        // ViewAlias null is only for the root tab, therefor we can implement this hack.
+        if (viewAlias === null) {
+            // Specific hack for the Generic tab to only show its name if there are other tabs.
+            view.setTitle(this._tabs && this._tabs?.length > 0 ? '#general_generic' : undefined);
+        }
+        view.provideAt(component);
+    }
     render() {
         if (!this._routes || !this._tabs)
             return;
@@ -115,7 +173,7 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
                 return this.#renderTab(path, tab.name, index);
             })}
 						</uui-tab-group>`
-            : ''}
+            : nothing}
 
 				<umb-router-slot
 					.routes=${this._routes}
@@ -130,6 +188,7 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
 		`;
     }
     #renderTab(path, name, index = 0) {
+        const hint = this._hintMap.get(path);
         const isRootTab = path === null;
         const hasRootItems = this._hasRootGroups || this._hasRootProperties;
         const basePath = this._routerPath + '/';
@@ -143,7 +202,13 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
 			label=${this.localize.string(name ?? '#general_unnamed')}
 			.active=${active}
 			href=${isRootTab ? basePath : fullPath}
-			data-mark="content-tab:${path ?? 'root'}"></uui-tab>`;
+			data-mark="content-tab:${path ?? 'root'}"
+			>${hint && !active
+            ? html `<umb-badge slot="extra" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+						>${hint.text}</umb-badge
+					>`
+            : nothing}</uui-tab
+		>`;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -153,6 +218,9 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
 			}
+			umb-badge {
+				--uui-badge-inset: 0 0 auto auto;
+			}
 		`,
     ]; }
 };
@@ -177,6 +245,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockWorkspaceViewEditElement.prototype, "_activePath", void 0);
+__decorate([
+    state()
+], UmbBlockWorkspaceViewEditElement.prototype, "_hintMap", void 0);
 UmbBlockWorkspaceViewEditElement = __decorate([
     customElement('umb-block-workspace-view-edit')
 ], UmbBlockWorkspaceViewEditElement);

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

@@ -152,6 +152,7 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     insert(layoutEntry, content, settings, originData) {
         this.setOneLayout(layoutEntry, originData);
         this.insertBlockData(layoutEntry, content, settings, originData);
+        this.notifyBlockInserted(layoutEntry, originData);
         return true;
     }
     setOneLayout(layoutEntry, originData) {

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

@@ -28,8 +28,9 @@ let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElem
     }
     static { this.styles = [
         css `
-			umb-block-grid-areas-container {
-				margin-top: calc(var(--uui-size-2) + 1px);
+			:host {
+				display: block;
+				margin-bottom: 1px;
 			}
 
 			umb-block-grid-areas-container::part(area) {

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

@@ -11,6 +11,7 @@ export declare class UmbBlockGridBlockInlineElement extends UmbLitElement {
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;
     private _inlineProperty?;
+    private _inlinePropertyDataTypeDetail?;
     private _inlinePropertyDataPath?;
     private _ownerContentTypeName?;
     private _variantName?;

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

@@ -37,8 +37,16 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
         this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (entriesContext) => {
             this.#parentUnique = entriesContext?.getParentUnique();
             this.#areaKey = entriesContext?.getAreaKey();
+            this.#initExtension();
         });
-        new UmbExtensionApiInitializer(this, umbExtensionsRegistry, UMB_BLOCK_WORKSPACE_ALIAS, apiArgsCreator, (permitted, ctrl) => {
+    }
+    #extensionInitializer;
+    #initExtension() {
+        this.#extensionInitializer?.destroy();
+        if (this.#parentUnique === undefined || this.#areaKey === undefined) {
+            return;
+        }
+        this.#extensionInitializer = new UmbExtensionApiInitializer(this, umbExtensionsRegistry, UMB_BLOCK_WORKSPACE_ALIAS, apiArgsCreator, (permitted, ctrl) => {
             const context = ctrl.api;
             if (permitted && context) {
                 // Risky business, cause here we are lucky that it seems to be consumed and set before this is called and there for this is acceptable for now. [NL]
@@ -51,10 +59,17 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
                     parentUnique: this.#parentUnique,
                 });
                 this.#workspaceContext.establishLiveSync();
+                this.#workspaceContext.autoReportValidation();
                 this.#load();
                 this.observe(this.#workspaceContext.content.structure.contentTypeProperties, (contentTypeProperties) => {
                     this._inlineProperty = contentTypeProperties[0];
                     this.#generatePropertyDataPath();
+                    const dataTypeUnique = this._inlineProperty?.dataType.unique;
+                    if (dataTypeUnique) {
+                        this.observe(this.#workspaceContext.content.structure.contentTypeDataTypeDetailOf(dataTypeUnique), (detail) => {
+                            this._inlinePropertyDataTypeDetail = detail;
+                        }, 'observeInlinePropertyDataTypeDetail');
+                    }
                 }, 'observeProperties');
                 this.observe(context.content.structure.ownerContentTypeName, (name) => {
                     this._ownerContentTypeName = name;
@@ -141,6 +156,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				<div id="inside" draggable="false">
 					<umb-property-type-based-property
 						.property=${this._inlineProperty}
+						.dataTypeDetail=${this._inlinePropertyDataTypeDetail}
 						.dataPath=${this._inlinePropertyDataPath ?? ''}
 						slot="areas"></umb-property-type-based-property>
 					<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
@@ -151,9 +167,6 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
     static { this.styles = [
         UmbTextStyles,
         css `
-			umb-block-grid-areas-container {
-				margin-top: calc(var(--uui-size-2) + 1px);
-			}
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
@@ -167,6 +180,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				position: relative;
 				display: block;
 				width: 100%;
+				margin-bottom: 1px;
 
 				box-sizing: border-box;
 				border-radius: var(--uui-border-radius);
@@ -256,10 +270,6 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				padding-left: var(--uui-size-2, 6px);
 			}
 
-			#name {
-				font-weight: 700;
-			}
-
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;
@@ -313,6 +323,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridBlockInlineElement.prototype, "_inlineProperty", void 0);
+__decorate([
+    state()
+], UmbBlockGridBlockInlineElement.prototype, "_inlinePropertyDataTypeDetail", void 0);
 __decorate([
     state()
 ], UmbBlockGridBlockInlineElement.prototype, "_inlinePropertyDataPath", void 0);

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

@@ -43,9 +43,6 @@ let UmbBlockGridBlockUnsupportedElement = class UmbBlockGridBlockUnsupportedElem
     static { this.styles = [
         UmbTextStyles,
         css `
-			umb-block-grid-areas-container {
-				margin-top: calc(var(--uui-size-2) + 1px);
-			}
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
@@ -59,6 +56,7 @@ let UmbBlockGridBlockUnsupportedElement = class UmbBlockGridBlockUnsupportedElem
 				position: relative;
 				display: block;
 				width: 100%;
+				margin-bottom: 1px;
 
 				box-sizing: border-box;
 				border-radius: var(--uui-border-radius);

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

@@ -114,9 +114,16 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             }
             const config = propertyContext.getConfig();
             const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
+            const blockTypes = this.#allowedBlockTypes.getValue();
+            /*
+            modal size logic:
+            If more than 8 block types, medium modal, more than 12 large modal:
+            */
+            const modalSize = blockTypes.length > 12 ? 'large' : blockTypes.length > 8 ? 'medium' : 'small';
             return {
+                modal: { size: modalSize },
                 data: {
-                    blocks: this.#allowedBlockTypes.getValue(),
+                    blocks: blockTypes,
                     blockGroups: this._manager.getBlockGroups() ?? [],
                     openClipboard: routingInfo.view === 'clipboard',
                     clipboardFilter: async (clipboardEntryDetail) => {
@@ -136,6 +143,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                         areaKey: this.#areaKey,
                         parentUnique: this.#parentUnique,
                     },
+                    // TODO: Check if we use this for anything. I think its not possible to configure inline editing for block grid? [NL]
                     createBlockInWorkspace: this._manager.getInlineEditingMode() === false,
                 },
             };
@@ -301,7 +309,10 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
         }
     }
     getPathForCreateBlock(index) {
-        return this._catalogueRouteBuilderState.getValue()?.({ view: 'create', index: index });
+        const pathBuilder = this._catalogueRouteBuilderState.getValue();
+        if (!pathBuilder)
+            return undefined;
+        return pathBuilder({ view: 'create', index: index });
     }
     getPathForClipboard(index) {
         return this._catalogueRouteBuilderState.getValue()?.({ view: 'clipboard', index: index });

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

@@ -10,7 +10,7 @@ export declare class UmbBlockGridEntriesElement extends UmbBlockGridEntriesEleme
     set layoutColumns(value: number | undefined);
     get layoutColumns(): number | undefined;
     private _areaKey?;
-    private _canCreate?;
+    private _allowedBlockTypes?;
     private _configCreateLabel?;
     private _createLabel?;
     private _isReadOnly;