@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

package/dist-cms/mocks/handlers/user/mfa.handlers.d.ts

@@ -1 +1 @@
-export declare const handlers: import("msw").RestHandler<import("node_modules/msw/lib/glossary-de6278a9.js").M<import("node_modules/msw/lib/glossary-de6278a9.js").h>>[];
+export declare const handlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

package/dist-cms/mocks/handlers/user/set-user-groups.handlers.d.ts

@@ -1 +1 @@
-export declare const handlers: import("msw").RestHandler<import("node_modules/msw/lib/glossary-de6278a9.js").M<import("node_modules/msw/lib/glossary-de6278a9.js").h>>[];
+export declare const handlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

package/dist-cms/mocks/handlers/user/unlock.handlers.d.ts

@@ -1 +1 @@
-export declare const handlers: import("msw").RestHandler<import("node_modules/msw/lib/glossary-de6278a9.js").M<import("node_modules/msw/lib/glossary-de6278a9.js").h>>[];
+export declare const handlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

package/dist-cms/mocks/handlers/user-group/detail.handlers.d.ts

@@ -1 +1 @@
-export declare const detailHandlers: import("msw").RestHandler<import("node_modules/msw/lib/glossary-de6278a9.js").M<import("node_modules/msw/lib/glossary-de6278a9.js").h>>[];
+export declare const detailHandlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

package/dist-cms/mocks/handlers/user-group/filter.handlers.d.ts

@@ -0,0 +1 @@
+export declare const handlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

package/dist-cms/mocks/handlers/user-group/filter.handlers.js

@@ -0,0 +1,18 @@
+const { rest } = window.MockServiceWorker;
+import { umbUserGroupMockDb } from '../../data/user-group/user-group.db.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '../../../packages/core/utils/index.js';
+export const handlers = [
+    rest.get(umbracoPath(`/filter${UMB_SLUG}`), (req, res, ctx) => {
+        const skip = Number(req.url.searchParams.get('skip'));
+        const take = Number(req.url.searchParams.get('take'));
+        const filter = req.url.searchParams.get('filter');
+        const options = {
+            skip: skip || undefined,
+            take: take || undefined,
+            filter: filter || undefined,
+        };
+        const response = umbUserGroupMockDb.filter(options);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+];

package/dist-cms/mocks/handlers/user-group/index.d.ts

@@ -1 +1 @@
-export declare const handlers: import("msw").RestHandler<import("node_modules/msw/lib/glossary-de6278a9.js").M<import("node_modules/msw/lib/glossary-de6278a9.js").h>>[];
+export declare const handlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

package/dist-cms/mocks/handlers/user-group/index.js

@@ -1,3 +1,4 @@
 import { detailHandlers } from './detail.handlers.js';
 import { itemHandlers } from './item.handlers.js';
-export const handlers = [...itemHandlers, ...detailHandlers];
+import { handlers as filterHandlers } from './filter.handlers.js';
+export const handlers = [...itemHandlers, ...filterHandlers, ...detailHandlers];

package/dist-cms/mocks/handlers/user-group/item.handlers.d.ts

@@ -1 +1 @@
-export declare const itemHandlers: import("msw").RestHandler<import("node_modules/msw/lib/glossary-de6278a9.js").M<import("node_modules/msw/lib/glossary-de6278a9.js").h>>[];
+export declare const itemHandlers: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];

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

@@ -23,6 +23,7 @@ export declare abstract class UmbBlockEntriesContext<BlockManagerContextTokenTyp
     getManager(): Promise<BlockManagerContextType>;
     protected abstract _gotBlockManager(): void;
     layoutOf(contentUdi: string): Observable<BlockLayoutType | undefined>;
+    getLayoutOf(contentUdi: string): BlockLayoutType | undefined;
     setLayouts(layouts: Array<BlockLayoutType>): void;
     setOneLayout(layoutData: BlockLayoutType): UmbArrayState<BlockLayoutType>;
     abstract getPathForCreateBlock(index: number): string | undefined;

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

@@ -45,6 +45,9 @@ export class UmbBlockEntriesContext extends UmbContextBase {
     layoutOf(contentUdi) {
         return this._layoutEntries.asObservablePart((source) => source.find((x) => x.contentUdi === contentUdi));
     }
+    getLayoutOf(contentUdi) {
+        return this._layoutEntries.getValue().find((x) => x.contentUdi === contentUdi);
+    }
     setLayouts(layouts) {
         return this._layoutEntries.setValue(layouts);
     }
@@ -61,9 +64,9 @@ export class UmbBlockEntriesContext extends UmbContextBase {
             throw new Error(`Cannot delete block, missing layout for ${contentUdi}`);
         }
         if (layout.settingsUdi) {
-            this._manager?.removeOneSettings(layout.settingsUdi);
+            this._manager.removeOneSettings(layout.settingsUdi);
         }
-        this._manager?.removeOneContent(contentUdi);
+        this._manager.removeOneContent(contentUdi);
         this._layoutEntries.removeOne(contentUdi);
     }
 }

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

@@ -19,7 +19,8 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
     readonly index: Observable<number | undefined>;
     getIndex(): number | undefined;
     setIndex(index: number | undefined): void;
-    readonly createPath: Observable<string | undefined>;
+    readonly createBeforePath: Observable<string | undefined>;
+    readonly createAfterPath: Observable<string | undefined>;
     readonly contentElementTypeName: Observable<string | undefined>;
     readonly contentElementTypeAlias: Observable<string | undefined>;
     readonly label: Observable<string>;
@@ -56,7 +57,6 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
     getLabel(): string;
     constructor(host: UmbControllerHost, blockManagerContextToken: BlockManagerContextTokenType, blockEntriesContextToken: BlockEntriesContextTokenType);
     getContentUdi(): string | undefined;
-    protected _gotLayout(layout: BlockLayoutType | undefined): BlockLayoutType | undefined;
     abstract _gotManager(): void;
     abstract _gotEntries(): void;
     abstract _gotContentType(contentType: UmbContentTypeModel | undefined): void;

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

@@ -27,7 +27,8 @@ export class UmbBlockEntryContext extends UmbContextBase {
     setIndex(index) {
         this.#index.setValue(index);
     }
-    #createPath;
+    #createBeforePath;
+    #createAfterPath;
     #contentElementTypeName;
     #contentElementTypeAlias;
     // TODO: index state + observable?
@@ -60,8 +61,10 @@ export class UmbBlockEntryContext extends UmbContextBase {
         super(host, 'UmbBlockEntryContext');
         this.#index = new UmbNumberState(undefined);
         this.index = this.#index.asObservable();
-        this.#createPath = new UmbStringState(undefined);
-        this.createPath = this.#createPath.asObservable();
+        this.#createBeforePath = new UmbStringState(undefined);
+        this.createBeforePath = this.#createBeforePath.asObservable();
+        this.#createAfterPath = new UmbStringState(undefined);
+        this.createAfterPath = this.#createAfterPath.asObservable();
         this.#contentElementTypeName = new UmbStringState(undefined);
         this.contentElementTypeName = this.#contentElementTypeName.asObservable();
         this.#contentElementTypeAlias = new UmbStringState(undefined);
@@ -124,21 +127,23 @@ export class UmbBlockEntryContext extends UmbContextBase {
             this.#observeBlockTypeLabel();
         });
         this.observe(this.index, () => {
-            this.#updateCreatePath();
+            this.#updateCreatePaths();
         });
     }
     getContentUdi() {
         return this._layout.value?.contentUdi;
     }
-    #updateCreatePath() {
+    #updateCreatePaths() {
         const index = this.#index.value;
         if (this._entries && index !== undefined) {
             this.observe(observeMultiple([this._entries.catalogueRouteBuilder, this._entries.canCreate]), ([catalogueRouteBuilder, canCreate]) => {
                 if (catalogueRouteBuilder && canCreate) {
-                    this.#createPath.setValue(this._entries.getPathForCreateBlock(index));
+                    this.#createBeforePath.setValue(this._entries.getPathForCreateBlock(index));
+                    this.#createAfterPath.setValue(this._entries.getPathForCreateBlock(index + 1));
                 }
                 else {
-                    this.#createPath.setValue(undefined);
+                    this.#createBeforePath.setValue(undefined);
+                    this.#createAfterPath.setValue(undefined);
                 }
             }, 'observeRouteBuilderCreate');
         }
@@ -147,7 +152,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
         if (!this._entries || !this.#contentUdi)
             return;
         this.observe(this._entries.layoutOf(this.#contentUdi), (layout) => {
-            this._layout.setValue(this._gotLayout(layout));
+            this._layout.setValue(layout);
         }, 'observeParentLayout');
         this.observe(this.layout, (layout) => {
             if (layout) {
@@ -155,15 +160,12 @@ export class UmbBlockEntryContext extends UmbContextBase {
             }
         }, 'observeThisLayout');
     }
-    _gotLayout(layout) {
-        return layout;
-    }
     #gotManager() {
         this.#observeBlockType();
         this.#observeData();
     }
     #gotEntries() {
-        this.#updateCreatePath();
+        this.#updateCreatePaths();
         this.#observeLayout();
         if (this._entries) {
             this.observe(this._entries.workspacePath, (workspacePath) => {
@@ -175,13 +177,10 @@ export class UmbBlockEntryContext extends UmbContextBase {
         }
     }
     #observeData() {
-        if (!this._manager)
-            return;
-        const contentUdi = this._layout.value?.contentUdi;
-        if (!contentUdi)
+        if (!this._manager || !this.#contentUdi)
             return;
         // observe content:
-        this.observe(this._manager.contentOf(contentUdi), (content) => {
+        this.observe(this._manager.contentOf(this.#contentUdi), (content) => {
             this.#content.setValue(content);
         }, 'observeContent');
         this.observe(this.content, (content) => {
@@ -255,9 +254,11 @@ export class UmbBlockEntryContext extends UmbContextBase {
         window.location.href = this.#generateWorkspaceEditSettingsPath(this.#workspacePath.value);
     }
     async requestDelete() {
+        const blockName = this.getLabel();
+        // TODO: Localizations missing [NL]
         await umbConfirmModal(this, {
-            headline: `Delete ${this.getLabel()}`,
-            content: 'Are you sure you want to delete this [INSERT BLOCK TYPE NAME]?',
+            headline: `Delete ${blockName}`,
+            content: `Are you sure you want to delete this ${blockName}?`,
             confirmLabel: 'Delete',
             color: 'danger',
         });

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

@@ -14,6 +14,7 @@ export type UmbBlockDataObjectModel<LayoutEntryType extends UmbBlockLayoutBaseMo
 };
 export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel, BlockLayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel> extends UmbContextBase<UmbBlockManagerContext> {
     #private;
+    get contentTypesLoaded(): Promise<unknown[]>;
     propertyAlias: import("rxjs/internal/Observable").Observable<string | undefined>;
     variantId: import("rxjs/internal/Observable").Observable<UmbVariantId | undefined>;
     readonly contentTypes: import("rxjs/internal/Observable").Observable<UmbContentTypeModel[]>;
@@ -33,12 +34,14 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     constructor(host: UmbControllerHost);
     contentTypeOf(contentTypeKey: string): import("rxjs/internal/Observable").Observable<UmbContentTypeModel | undefined>;
     contentTypeNameOf(contentTypeKey: string): import("rxjs/internal/Observable").Observable<string | undefined>;
+    getContentTypeNameOf(contentTypeKey: string): string | undefined;
     blockTypeOf(contentTypeKey: string): import("rxjs/internal/Observable").Observable<BlockType | undefined>;
     layoutOf(contentUdi: string): import("rxjs/internal/Observable").Observable<BlockLayoutType | undefined>;
     contentOf(udi: string): import("rxjs/internal/Observable").Observable<UmbBlockDataType | undefined>;
     settingsOf(udi: string): import("rxjs/internal/Observable").Observable<UmbBlockDataType | undefined>;
     getBlockTypeOf(contentTypeKey: string): BlockType | undefined;
     getContentOf(contentUdi: string): UmbBlockDataType | undefined;
+    setOneLayout(layoutData: BlockLayoutType): void;
     setOneContent(contentData: UmbBlockDataType): void;
     setOneSettings(settingsData: UmbBlockDataType): void;
     removeOneContent(contentUdi: string): void;

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

@@ -9,6 +9,10 @@ function buildUdi(entityType, guid) {
 }
 export class UmbBlockManagerContext extends UmbContextBase {
     //
+    get contentTypesLoaded() {
+        return Promise.all(this.#contentTypeRequests);
+    }
+    #contentTypeRequests;
     #contentTypeRepository;
     #propertyAlias;
     #variantId;
@@ -44,7 +48,7 @@ export class UmbBlockManagerContext extends UmbContextBase {
     }
     constructor(host) {
         super(host, UMB_BLOCK_MANAGER_CONTEXT);
-        //
+        this.#contentTypeRequests = [];
         this.#contentTypeRepository = new UmbDocumentTypeDetailRepository(this);
         this.#propertyAlias = new UmbStringState(undefined);
         this.propertyAlias = this.#propertyAlias.asObservable();
@@ -82,7 +86,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
     async #ensureContentType(unique) {
         if (this.#contentTypes.getValue().find((x) => x.unique === unique))
             return;
-        const { data } = await this.#contentTypeRepository.requestByUnique(unique);
+        const contentTypeRequest = this.#contentTypeRepository.requestByUnique(unique);
+        this.#contentTypeRequests.push(contentTypeRequest);
+        const { data } = await contentTypeRequest;
         if (!data) {
             this.#contentTypes.removeOne(unique);
             return;
@@ -97,6 +103,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
     contentTypeNameOf(contentTypeKey) {
         return this.#contentTypes.asObservablePart((source) => source.find((x) => x.unique === contentTypeKey)?.name);
     }
+    getContentTypeNameOf(contentTypeKey) {
+        return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name;
+    }
     blockTypeOf(contentTypeKey) {
         return this.#blockTypes.asObservablePart((source) => source.find((x) => x.contentElementTypeKey === contentTypeKey));
     }
@@ -115,9 +124,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
     getContentOf(contentUdi) {
         return this.#contents.value.find((x) => x.udi === contentUdi);
     }
-    /*setOneLayout(layoutData: BlockLayoutType) {
-        return this._layouts.appendOne(layoutData);
-    }*/
+    setOneLayout(layoutData) {
+        this._layouts.appendOne(layoutData);
+    }
     setOneContent(contentData) {
         this.#contents.appendOne(contentData);
     }

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

@@ -19,6 +19,8 @@ export declare class UmbBlockElementManager extends UmbControllerBase {
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: string): Promise<import("rxjs/internal/Observable").Observable<ReturnType>>;
     getPropertyValue<ReturnType = unknown>(propertyAlias: string): Promise<ReturnType>;
     setPropertyValue(alias: string, value: unknown): Promise<void>;
+    initiatePropertyValueChange(): void;
+    finishPropertyValueChange: () => void;
     createPropertyDatasetContext(host: UmbControllerHost): UmbBlockElementPropertyDatasetContext;
     destroy(): void;
 }

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

@@ -20,6 +20,11 @@ export class UmbBlockElementManager extends UmbControllerBase {
         this.unique = this.#data.asObservablePart((data) => data?.udi);
         this.contentTypeId = this.#data.asObservablePart((data) => data?.contentTypeKey);
         this.structure = new UmbContentTypeStructureManager(this, new UmbDocumentTypeDetailRepository(this));
+        this.#updateLock = 0;
+        this.finishPropertyValueChange = () => {
+            this.#updateLock--;
+            this.#triggerPropertyValueChanges();
+        };
         this.observe(this.contentTypeId, (id) => this.structure.loadType(id));
     }
     setData(data) {
@@ -47,8 +52,24 @@ export class UmbBlockElementManager extends UmbControllerBase {
         return this.#data.getValue()?.[propertyAlias];
     }
     async setPropertyValue(alias, value) {
+        this.initiatePropertyValueChange();
         await this.#getDataPromise;
         this.#data.update({ [alias]: value });
+        this.finishPropertyValueChange();
+    }
+    #updateLock;
+    initiatePropertyValueChange() {
+        this.#updateLock++;
+        this.#data.mute();
+        // TODO: When ready enable this code will enable handling a finish automatically by this implementation 'using myState.initiatePropertyValueChange()' (Relies on TS support of Using) [NL]
+        /*return {
+            [Symbol.dispose]: this.finishPropertyValueChange,
+        };*/
+    }
+    #triggerPropertyValueChanges() {
+        if (this.#updateLock === 0) {
+            this.#data.unmute();
+        }
     }
     createPropertyDatasetContext(host) {
         return new UmbBlockElementPropertyDatasetContext(host, this);

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

@@ -53,7 +53,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
                 else {
                     // TODO: Revert the layout, content & settings data to the original state.
                     if (this.#initialLayout) {
-                        this.#blockEntries?.setOneLayout(this.#initialLayout);
+                        this.#blockManager?.setOneLayout(this.#initialLayout);
                     }
                     if (this.#initialContent) {
                         this.#blockManager?.setOneContent(this.#initialContent);
@@ -183,7 +183,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     #establishLiveSync() {
         this.observe(this.layout, (layoutData) => {
             if (layoutData) {
-                this.#blockEntries?.setOneLayout(layoutData);
+                this.#blockManager?.setOneLayout(layoutData);
             }
         });
         this.observe(this.content.data, (contentData) => {
@@ -246,7 +246,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             }
             else {
                 // Update data:
-                this.#blockEntries.setOneLayout(layoutData);
+                this.#blockManager.setOneLayout(layoutData);
                 if (contentData) {
                     this.#blockManager.setOneContent(contentData);
                 }

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

@@ -16,7 +16,7 @@ import { UmbSorterController } from '../../../../core/sorter/index.js';
  */
 function resolvePlacementAsGrid(args) {
     // If this has areas, we do not want to move, unless we are at the edge
-    if (args.relatedModel.areas.length > 0 && isWithinRect(args.pointerX, args.pointerY, args.relatedRect, -10)) {
+    if (args.relatedModel.areas?.length > 0 && isWithinRect(args.pointerX, args.pointerY, args.relatedRect, -10)) {
         return null;
     }
     /** We need some data about the grid to figure out if there is room to be placed next to the found element */
@@ -128,10 +128,10 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLit
         this.#context = new UmbBlockGridEntriesContext(this);
         this._layoutEntries = [];
         this.observe(this.#context.layoutEntries, (layoutEntries) => {
-            const oldValue = this._layoutEntries;
+            //const oldValue = this._layoutEntries;
             this.#sorter.setModel(layoutEntries);
             this._layoutEntries = layoutEntries;
-            this.requestUpdate('layoutEntries', oldValue);
+            //this.requestUpdate('layoutEntries', oldValue);
         });
         this.observe(this.#context.amountOfAllowedBlockTypes, (length) => {
             this._canCreate = length > 0;
@@ -154,14 +154,14 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLit
             }, 'observeStylesheet');
         });
     }
-    // TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type.
+    // TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type. [NL]
     render() {
         return html `
 			${this._styleElement}
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
 				${repeat(this._layoutEntries, (x) => x.contentUdi, (layoutEntry, index) => html `<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
-							.index=${index}
+							index=${index}
 							.contentUdi=${layoutEntry.contentUdi}
 							.layout=${layoutEntry}>
 						</umb-block-grid-entry>`)}

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

@@ -1,5 +1,6 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { nothing } from '../../../../../external/lit/index.js';
+import type { PropertyValueMap } from '../../../../../external/lit/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
 import type { UmbBlockViewPropsType } from '../../../block/index.js';
 import type { UmbBlockGridLayoutModel } from '../../index.js';
@@ -20,15 +21,20 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     _rowSpan?: number;
     _showContentEdit: boolean;
     _hasSettings: boolean;
-    _createPath?: string;
+    _createBeforePath?: string;
+    _createAfterPath?: string;
     _label: string;
     _workspaceEditContentPath?: string;
     _workspaceEditSettingsPath?: string;
     _inlineEditingMode?: boolean;
     _canScale?: boolean;
+    _showInlineCreateBefore?: boolean;
+    _showInlineCreateAfter?: boolean;
+    _inlineCreateAboveWidth?: string;
     _blockViewProps: UmbBlockViewPropsType<UmbBlockGridLayoutModel>;
     constructor();
     connectedCallback(): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

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

@@ -34,6 +34,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     }
     //
     #context;
+    #renderTimeout;
     #updateBlockViewProps(incoming) {
         this._blockViewProps = { ...this._blockViewProps, ...incoming };
         this.requestUpdate('_blockViewProps');
@@ -47,6 +48,35 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         this._label = '';
         // TODO: use this type on the Element Interface for the Manifest.
         this._blockViewProps = { contentUdi: undefined, urls: {} }; // Set to undefined cause it will be set before we render.
+        this.#updateInlineCreateButtons = () => {
+            // TODO: Could we optimize this, so it wont break?, cause currently we trust blindly that parentElement is '.umb-block-grid__layout-container' [NL]
+            const layoutContainer = this.parentElement;
+            if (!layoutContainer)
+                return;
+            const layoutContainerRect = layoutContainer.getBoundingClientRect();
+            if (layoutContainerRect.width === 0) {
+                this._showInlineCreateBefore = false;
+                this._showInlineCreateAfter = false;
+                this._inlineCreateAboveWidth = undefined;
+                this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100);
+                return;
+            }
+            const layoutItemRect = this.getBoundingClientRect();
+            if (layoutItemRect.right > layoutContainerRect.right - 5) {
+                this._showInlineCreateAfter = false;
+            }
+            else {
+                this._showInlineCreateAfter = true;
+            }
+            if (layoutItemRect.left > layoutContainerRect.left + 5) {
+                this._showInlineCreateBefore = false;
+                this._inlineCreateAboveWidth = undefined;
+            }
+            else {
+                this._inlineCreateAboveWidth = getComputedStyle(layoutContainer).width;
+                this._showInlineCreateBefore = true;
+            }
+        };
         // Misc:
         this.observe(this.#context.showContentEdit, (show) => {
             this._showContentEdit = show;
@@ -75,10 +105,15 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             this.#updateBlockViewProps({ settings });
         });
         // Paths:
-        this.observe(this.#context.createPath, (createPath) => {
-            const oldValue = this._createPath;
-            this._createPath = createPath;
-            this.requestUpdate('_createPath', oldValue);
+        this.observe(this.#context.createBeforePath, (createPath) => {
+            //const oldValue = this._createBeforePath;
+            this._createBeforePath = createPath;
+            //this.requestUpdate('_createPath', oldValue);
+        });
+        this.observe(this.#context.createAfterPath, (createPath) => {
+            //const oldValue = this._createAfterPath;
+            this._createAfterPath = createPath;
+            //this.requestUpdate('_createPath', oldValue);
         });
         this.observe(this.#context.workspaceEditContentPath, (path) => {
             this._workspaceEditContentPath = path;
@@ -112,7 +147,19 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
                 this.setAttribute('data-content-element-type-alias', contentElementTypeAlias);
             }
         });
+        this.#callUpdateInlineCreateButtons();
     }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('_blockViewProps') || _changedProperties.has('_columnSpan')) {
+            this.#callUpdateInlineCreateButtons();
+        }
+    }
+    #callUpdateInlineCreateButtons() {
+        clearTimeout(this.#renderTimeout);
+        this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100);
+    }
+    #updateInlineCreateButtons;
     #renderInlineEditBlock() {
         return html `<umb-block-grid-block-inline
 			.contentUdi=${this.contentUdi}
@@ -124,8 +171,13 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     #renderBlock() {
         return this.contentUdi
             ? html `
-					${this._createPath
-                ? html `<uui-button-inline-create href=${this._createPath}></uui-button-inline-create>`
+					${this._createBeforePath && this._showInlineCreateBefore
+                ? html `<uui-button-inline-create
+								href=${this._createBeforePath}
+								label=${this.localize.term('blockEditor_addBlock')}
+								style=${this._inlineCreateAboveWidth
+                    ? `width: ${this._inlineCreateAboveWidth}`
+                    : ''}></uui-button-inline-create>`
                 : nothing}
 					<div class="umb-block-grid__block" part="umb-block-grid__block">
 						<umb-extension-slot
@@ -157,6 +209,12 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 								</umb-block-scale-handler>`
                 : nothing}
 					</div>
+					${this._createAfterPath && this._showInlineCreateAfter
+                ? html `<uui-button-inline-create
+								vertical
+								label=${this.localize.term('blockEditor_addBlock')}
+								href=${this._createAfterPath}></uui-button-inline-create>`
+                : nothing}
 				`
             : nothing;
     }
@@ -174,6 +232,24 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				top: var(--uui-size-2);
 				right: var(--uui-size-2);
 			}
+			uui-button-inline-create {
+				top: 0px;
+				position: absolute;
+
+				// Avoid showing inline-create in dragging-mode
+				--umb-block-grid__block--inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none;
+				display: var(--umb-block-grid__block--inline-create-button-display--condition);
+			}
+			uui-button-inline-create:not([vertical]) {
+				left: 0;
+				width: var(--umb-block-grid-editor--inline-create-width, 100%);
+			}
+			:host(:not([index='0'])) uui-button-inline-create:not([vertical]) {
+				top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5);
+			}
+			uui-button-inline-create[vertical] {
+				right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5));
+			}
 
 			:host([drag-placeholder]) {
 				opacity: 0.2;
@@ -213,7 +289,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     ]; }
 };
 __decorate([
-    property({ type: Number })
+    property({ type: Number, reflect: true })
 ], UmbBlockGridEntryElement.prototype, "index", null);
 __decorate([
     property({ attribute: false })
@@ -232,7 +308,10 @@ __decorate([
 ], UmbBlockGridEntryElement.prototype, "_hasSettings", void 0);
 __decorate([
     state()
-], UmbBlockGridEntryElement.prototype, "_createPath", void 0);
+], UmbBlockGridEntryElement.prototype, "_createBeforePath", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_createAfterPath", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_label", void 0);
@@ -248,6 +327,15 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_canScale", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_showInlineCreateBefore", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_showInlineCreateAfter", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_inlineCreateAboveWidth", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_blockViewProps", void 0);