@umbraco-cms/backoffice 17.2.1 → 17.3.0-rc

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbBlockGridEntriesContext } from './block-grid-entries.context.js';
-import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, nothing, property, repeat, state, when, } from '../../../../../external/lit/index.js';
 import { getAccumulatedValueOfIndex, getInterpolatedIndexOfPositionInWeightMap, isWithinRect, } from '../../../../core/utils/index.js';
 import { UmbFormControlMixin, UmbFormControlValidator } from '../../../../core/validation/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
@@ -151,9 +151,9 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
             this._layoutEntries = layoutEntries;
             //this.requestUpdate('layoutEntries', oldValue);
         }, null);
-        this.observe(this.#context.amountOfAllowedBlockTypes, (length) => {
-            this._canCreate = length > 0;
-            if (length === 1) {
+        this.observe(this.#context.allowedBlockTypes, (allowedBlockTypes) => {
+            this._allowedBlockTypes = allowedBlockTypes;
+            if (allowedBlockTypes.length === 1) {
                 this.observe(this.#context.firstAllowedBlockTypeName(), (firstAllowedName) => {
                     this._createLabel = this.localize.term('blockEditor_addThis', this.localize.string(firstAllowedName));
                 }, 'observeSingleBlockTypeName');
@@ -253,8 +253,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         return html `
 			${this._styleElement}
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
-				${repeat(this._layoutEntries, (layout, index) => `${index}_${layout.contentKey}`, (layout, index) => html `
-						<umb-block-grid-entry
+				${repeat(this._layoutEntries, (layout) => layout.contentKey, (layout, index) => html `<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
 							.contentKey=${layout.contentKey}
@@ -262,7 +261,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 						</umb-block-grid-entry>
 					`)}
 			</div>
-			${when(this._canCreate, () => this.#renderCreateButtonGroup())}
+			${when(this._allowedBlockTypes && this._allowedBlockTypes.length > 0, () => this.#renderCreateButtonGroup())}
 			${when(this._areaKey, () => html `<uui-form-validation-message .for=${this}></uui-form-validation-message>`)}
 		`;
     }
@@ -290,12 +289,40 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
     #renderCreateButton() {
         if (this._isReadOnly && this._layoutEntries.length > 0)
             return nothing;
+        const createPath = this.#context.getPathForCreateBlock(-1);
         return html `
 			<uui-button
 				look="placeholder"
 				color=${this.pristine === false && this.validity.valid === false ? 'invalid' : 'default'}
 				label=${this._configCreateLabel ?? this._createLabel ?? ''}
-				href=${this.#context.getPathForCreateBlock(-1) ?? ''}
+				href=${ifDefined(createPath)}
+				@click=${async () => {
+            // If no path, then we can conclude there is not modal flow for the user to follow, instead we will just insert the Block: [NL]
+            if (createPath === undefined) {
+                if (!this._allowedBlockTypes || this._allowedBlockTypes.length === 0) {
+                    throw new Error('No block types are configured for this Block List property editor');
+                }
+                const areaKey = this._areaKey;
+                const parentUnique = this.#context.getParentUnique();
+                if (areaKey === undefined || parentUnique === undefined) {
+                    throw new Error('Cannot create block without a defined areaKey and parentUnique');
+                }
+                const originData = {
+                    index: -1,
+                    areaKey: areaKey ?? undefined,
+                    parentUnique: parentUnique,
+                };
+                const created = await this.#context.create(this._allowedBlockTypes[0].contentElementTypeKey, 
+                // We can parse an empty object, cause the rest will be filled in by others.
+                {}, originData);
+                if (created) {
+                    this.#context.insert(created.layout, created.content, created.settings, originData);
+                }
+                else {
+                    throw new Error('Failed to create block');
+                }
+            }
+        }}
 				?disabled=${this._isReadOnly}></uui-button>
 		`;
     }
@@ -309,7 +336,8 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 				label=${this.localize.term('content_createFromClipboard')}
 				look="placeholder"
 				href=${this.#context.getPathForClipboard(-1) ?? ''}
-				?disabled=${this._isReadOnly}>
+				?disabled=${this._isReadOnly}
+				title=${this.localize.term('general_clipboard')}>
 				<uui-icon name="icon-clipboard-paste"></uui-icon>
 			</uui-button>
 		`;
@@ -320,7 +348,6 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 			:host {
 				position: relative;
 				display: grid;
-				gap: 1px;
 			}
 			:host([disallow-drop])::before {
 				content: '';
@@ -349,6 +376,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 			}
 
 			#createButton {
+				margin-top: 1px;
 				grid-template-columns: 1fr auto;
 				display: grid;
 			}
@@ -387,7 +415,7 @@ __decorate([
 ], UmbBlockGridEntriesElement.prototype, "_areaKey", void 0);
 __decorate([
     state()
-], UmbBlockGridEntriesElement.prototype, "_canCreate", void 0);
+], UmbBlockGridEntriesElement.prototype, "_allowedBlockTypes", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntriesElement.prototype, "_configCreateLabel", void 0);

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

@@ -9,7 +9,7 @@ import { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
 import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { umbDestroyOnDisconnect, UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
 /**
@@ -106,7 +106,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
                 ext.component.classList.add('umb-block-grid__block--view');
                 ext.component.setAttribute('part', 'component');
             }
-            if (this._exposed) {
+            if (this._exposed || this._isReadOnly) {
                 return ext.component;
             }
             else {
@@ -287,10 +287,10 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				class="umb-block-grid__block--view"
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
-				.settings=${this._blockViewProps.settings}>
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
 			</umb-block-grid-block-unsupported>
 		`;
-        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
     }
     #renderInlineBlock() {
         return html `
@@ -302,10 +302,10 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				.unpublished=${!this._exposed}
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
-				.settings=${this._blockViewProps.settings}>
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
 			</umb-block-grid-block-inline>
 		`;
-        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
     }
     #renderRefBlock() {
         return html `
@@ -317,10 +317,10 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				.unpublished=${!this._exposed}
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
-				.settings=${this._blockViewProps.settings}>
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
 			</umb-block-grid-block>
 		`;
-        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
     }
     #renderCreateBeforeInlineButton() {
         if (this._isReadOnly)
@@ -364,13 +364,16 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 		`;
     }
     #renderEditAction() {
+        if (this._isReadOnly)
+            return nothing;
         return html `
 			${when(this._showContentEdit && this._workspaceEditContentPath, () => html `
 					<uui-button
 						label="edit"
 						look="secondary"
 						color=${this._contentInvalid ? 'danger' : ''}
-						href=${this._workspaceEditContentPath}>
+						href=${this._workspaceEditContentPath}
+						title=${this.localize.term('general_edit')}>
 						<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
 						${when(this._contentInvalid, () => html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`)}
 					</uui-button>
@@ -386,6 +389,8 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 		`;
     }
     #renderEditSettingsAction() {
+        if (this._isReadOnly)
+            return nothing;
         return html `
 			${this._hasSettings && this._workspaceEditSettingsPath
             ? html `
@@ -393,7 +398,8 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 							label="Edit settings"
 							look="secondary"
 							color=${this._settingsInvalid ? 'invalid' : ''}
-							href=${this._workspaceEditSettingsPath}>
+							href=${this._workspaceEditSettingsPath}
+							title=${this.localize.term('general_settings')}>
 							<uui-icon name="icon-settings"></uui-icon>
 							${when(this._settingsInvalid, () => html `<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`)}
 						</uui-button>
@@ -403,7 +409,11 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     }
     #renderCopyToClipboardAction() {
         return html `
-			<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#context.copyToClipboard()}>
+			<uui-button
+				label=${this.localize.term('clipboard_labelForCopyToClipboard')}
+				look="secondary"
+				@click=${() => this.#context.copyToClipboard()}
+				title=${this.localize.term('general_copy')}>
 				<uui-icon name="icon-clipboard-copy"></uui-icon>
 			</uui-button>
 		`;
@@ -412,7 +422,11 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         if (this._isReadOnly)
             return nothing;
         return html `
-			<uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()}>
+			<uui-button
+				label="delete"
+				look="secondary"
+				@click=${() => this.#context.requestDelete()}
+				title=${this.localize.term('general_delete')}>
 				<uui-icon name="icon-remove"></uui-icon>
 			</uui-button>
 		`;

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

@@ -26,6 +26,7 @@ let UmbRefGridBlockElement = class UmbRefGridBlockElement extends UUIRefNodeElem
 				min-height: var(--uui-size-16);
 				flex-flow: row wrap;
 				background-color: var(--uui-color-surface);
+				padding: 0;
 			}
 
 			.break {
@@ -35,8 +36,10 @@ let UmbRefGridBlockElement = class UmbRefGridBlockElement extends UUIRefNodeElem
 
 			#open-part {
 				display: flex;
+				align-self: start;
+				box-sizing: border-box;
 				min-height: var(--uui-size-16);
-				padding: calc(var(--uui-size-2) + 1px);
+				margin: 0;
 			}
 
 			:host([unpublished]) #open-part {

package/dist-cms/packages/block/block-grid/property-actions/manifests.js

@@ -22,4 +22,11 @@ const sortMode = {
         },
     ],
 };
-export const manifests = [clipboardPaste, sortMode];
+const clear = {
+    type: 'propertyAction',
+    kind: 'clear',
+    alias: 'Umb.PropertyAction.BlockGrid.Clear',
+    name: 'Block Grid Clear Property Action',
+    forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+};
+export const manifests = [clipboardPaste, sortMode, clear];

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.js

@@ -59,6 +59,11 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
         this.#lastValue = value;
         if (!value) {
             super.value = undefined;
+            // Clear manager state so blocks are actually removed
+            this.#managerContext.setLayouts([]);
+            this.#managerContext.setContents([]);
+            this.#managerContext.setSettings([]);
+            this.#managerContext.setExposes([]);
             return;
         }
         const buildUpValue = value ? { ...value } : {};

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

@@ -75,7 +75,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         };
         this.#extensionSlotRenderMethod = (ext) => {
             ext.component?.setAttribute('part', 'component');
-            if (this._exposed) {
+            if (this._exposed || this._isReadOnly) {
                 return ext.component;
             }
             else {
@@ -288,12 +288,15 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 		`;
     }
     #renderEditContentAction() {
+        if (this._isReadOnly)
+            return nothing;
         return this._showContentEdit && this._workspaceEditContentPath
             ? html `<uui-button
 					label="edit"
 					look="secondary"
 					color=${this._contentInvalid ? 'invalid' : ''}
-					href=${this._workspaceEditContentPath}>
+					href=${this._workspaceEditContentPath}
+					title=${this.localize.term('general_edit')}>
 					<uui-icon name=${this._exposed === false && this._isReadOnly === false ? 'icon-add' : 'icon-edit'}></uui-icon>
 					${this._contentInvalid
                 ? html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
@@ -309,13 +312,16 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
                 : nothing;
     }
     #renderEditSettingsAction() {
+        if (this._isReadOnly)
+            return nothing;
         return html `
 			${this._hasSettings && this._workspaceEditSettingsPath
             ? html `<uui-button
 						label="Edit settings"
 						look="secondary"
 						color=${this._settingsInvalid ? 'invalid' : ''}
-						href=${this._workspaceEditSettingsPath}>
+						href=${this._workspaceEditSettingsPath}
+						title=${this.localize.term('general_settings')}>
 						<uui-icon name="icon-settings"></uui-icon>
 						${this._settingsInvalid
                 ? html `<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`
@@ -327,14 +333,20 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
     #renderDeleteAction() {
         if (this._isReadOnly)
             return nothing;
-        return html ` <uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()}>
+        return html ` <uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()} title=${this.localize.term('general_delete')}>
 			<uui-icon name="icon-remove"></uui-icon>
 		</uui-button>`;
     }
     #renderCopyToClipboardAction() {
-        return html `<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#copyToClipboard()}>
-			<uui-icon name="icon-clipboard-copy"></uui-icon>
-		</uui-button>`;
+        return html `
+			<uui-button
+				label=${this.localize.term('clipboard_labelForCopyToClipboard')}
+				look="secondary"
+				@click=${() => this.#copyToClipboard()}
+				title=${this.localize.term('general_copy')}>
+				<uui-icon name="icon-clipboard-copy"></uui-icon>
+			</uui-button>
+		`;
     }
     render() {
         return this.#renderBlock();

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
-import { UMB_BLOCK_WORKSPACE_ALIAS } from '../../../block/index.js';
+import { UMB_BLOCK_MANAGER_CONTEXT, UMB_BLOCK_WORKSPACE_ALIAS, UmbBlockInsertedEvent, } from '../../../block/index.js';
 import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
@@ -13,6 +13,8 @@ import { UmbLanguageItemRepository } from '../../../../language/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
+import { UmbContextBoundary } from '../../../../../libs/context-api/index.js';
+import { UMB_VIEW_CONTEXT } from '../../../../core/view/index.js';
 const apiArgsCreator = (manifest) => {
     return [{ manifest }];
 };
@@ -20,12 +22,19 @@ const apiArgsCreator = (manifest) => {
  * @element umb-inline-list-block
  */
 let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitElement {
+    #manager;
     #blockContext;
     #workspaceContext;
     #contentKey;
     constructor() {
         super();
         this._isOpen = false;
+        this.#onBlockInserted = (event) => {
+            const blockEvent = event;
+            if (blockEvent.detail.layout.contentKey === this.#contentKey) {
+                this._isOpen = true;
+            }
+        };
         this.#expose = () => {
             this.#workspaceContext?.expose();
         };
@@ -36,11 +45,24 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
                 this.#load();
             }, 'observeContentKey');
         });
+        this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => {
+            if (this.#manager) {
+                this.#manager.removeEventListener(UmbBlockInsertedEvent.TYPE, this.#onBlockInserted);
+            }
+            this.#manager = manager;
+            this.#manager?.addEventListener(UmbBlockInsertedEvent.TYPE, this.#onBlockInserted);
+        });
+        // Block the access to the View Context for this inline block workspace: [NL]
+        new UmbContextBoundary(this, UMB_VIEW_CONTEXT);
         new UmbExtensionApiInitializer(this, umbExtensionsRegistry, UMB_BLOCK_WORKSPACE_ALIAS, apiArgsCreator, (permitted, ctrl) => {
             const context = ctrl.api;
             if (permitted && context) {
                 this.#workspaceContext = context;
                 this.#workspaceContext.establishLiveSync();
+                // Avoid view context becoming active: [NL]
+                // in this case its not a routable workspace and we do not want it to become an active view, appending shortcuts or setting browser title. (maybe this code needs to be more explicit. Like a inlineMode()?) [NL]
+                this.#workspaceContext.view.destroy();
+                this.#workspaceContext.autoReportValidation();
                 this.#load();
                 this.observe(this.#workspaceContext.exposed, (exposed) => {
                     this._exposed = exposed;
@@ -70,6 +92,7 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
             return;
         this.#workspaceContext.load(this.#contentKey);
     }
+    #onBlockInserted;
     #expose;
     render() {
         return html `
@@ -133,6 +156,7 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 				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-list/components/ref-list-block/ref-list-block.element.js

@@ -27,6 +27,11 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
     }
     static { this.styles = [
         css `
+			:host {
+				display: block;
+				margin-bottom: 1px;
+			}
+
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}

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

@@ -42,6 +42,7 @@ let UmbUnsupportedListBlockElement = class UmbUnsupportedListBlockElement extend
 				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-list/context/block-list-entries.context.js

@@ -30,9 +30,16 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
             }
             const config = propertyContext.getConfig();
             const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
+            const blockTypes = this._manager.getBlockTypes();
+            /*
+            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._manager?.getBlockTypes() ?? [],
+                    blocks: blockTypes,
                     blockGroups: [],
                     openClipboard: routingInfo.view === 'clipboard',
                     clipboardFilter: async (clipboardEntryDetail) => {
@@ -56,7 +63,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
             if (value?.create && data) {
                 const created = await this.create(value.create.contentElementTypeKey, {}, data.originData);
                 if (created) {
-                    this.insert(created.layout, created.content, created.settings, data.originData);
+                    await this.insert(created.layout, created.content, created.settings, data.originData);
                 }
                 else {
                     throw new Error('Failed to create block');
@@ -98,7 +105,18 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
         }, 'observeThisLayouts');
     }
     getPathForCreateBlock(index) {
-        return this._catalogueRouteBuilderState.getValue()?.({ view: 'create', index: index });
+        const pathBuilder = this._catalogueRouteBuilderState.getValue();
+        if (!pathBuilder)
+            return undefined;
+        if (!this._manager)
+            return undefined;
+        const blockTypes = this._manager.getBlockTypes();
+        if (blockTypes.length === 1) {
+            if (this._manager.getInlineEditingMode()) {
+                return undefined;
+            }
+        }
+        return pathBuilder?.({ view: 'create', index: index });
     }
     getPathForClipboard(index) {
         return this._catalogueRouteBuilderState.getValue()?.({ view: 'clipboard', index: index });

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

@@ -48,6 +48,7 @@ export class UmbBlockListManagerContext extends UmbBlockManagerContext {
     insert(layoutEntry, content, settings, originData) {
         this._layouts.appendOneAt(layoutEntry, originData.index ?? -1);
         this.insertBlockData(layoutEntry, content, settings, originData);
+        this.notifyBlockInserted(layoutEntry, originData);
         return true;
     }
 }

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

@@ -1,4 +1,5 @@
 import { manifests as clipboardManifests } from './clipboard/manifests.js';
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
 import { manifests as validationManifests } from './validation/manifests.js';
@@ -9,4 +10,11 @@ export const manifests = [
     ...propertyValueClonerManifests,
     ...validationManifests,
     ...workspaceManifests,
+    {
+        type: 'propertyAction',
+        kind: 'clear',
+        alias: 'Umb.PropertyAction.BlockList.Clear',
+        name: 'Clear Block List Property Action',
+        forPropertyEditorUis: [UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS],
+    },
 ];

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.d.ts

@@ -1,6 +1,6 @@
 import type { UmbBlockListValueModel } from '../../types.js';
-import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { nothing } from '../../../../../external/lit/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 import '../../components/block-list-entry/index.js';
 declare const UmbPropertyEditorUIBlockListElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbBlockListValueModel | undefined>> & typeof UmbLitElement;