@umbraco-cms/backoffice 15.1.2 → 15.2.0

package/dist-cms/packages/block/block-grid/clipboard/grid-block/constants.js

@@ -0,0 +1 @@
+export const UMB_GRID_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE = 'gridBlock';

package/dist-cms/packages/block/block-grid/clipboard/grid-block/copy/block-grid-to-grid-block-copy-translator.d.ts

@@ -0,0 +1,8 @@
+import type { UmbBlockGridValueModel } from '../../../types.js';
+import type { UmbGridBlockClipboardEntryValueModel } from '../../types.js';
+import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
+import type { UmbClipboardCopyPropertyValueTranslator } from '../../../../../clipboard/index.js';
+export declare class UmbBlockGridToGridBlockClipboardCopyPropertyValueTranslator extends UmbControllerBase implements UmbClipboardCopyPropertyValueTranslator<UmbBlockGridValueModel, UmbGridBlockClipboardEntryValueModel> {
+    translate(propertyValue: UmbBlockGridValueModel): Promise<UmbGridBlockClipboardEntryValueModel>;
+}
+export { UmbBlockGridToGridBlockClipboardCopyPropertyValueTranslator as api };

package/dist-cms/packages/block/block-grid/clipboard/grid-block/copy/block-grid-to-grid-block-copy-translator.js

@@ -0,0 +1,27 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../property-editors/constants.js';
+import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
+export class UmbBlockGridToGridBlockClipboardCopyPropertyValueTranslator extends UmbControllerBase {
+    async translate(propertyValue) {
+        if (!propertyValue) {
+            throw new Error('Property value is missing.');
+        }
+        const valueClone = structuredClone(propertyValue);
+        const layout = valueClone.layout?.[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS] ?? undefined;
+        const contentData = valueClone.contentData;
+        const settingsData = valueClone.settingsData;
+        if (!layout?.length) {
+            throw new Error('No layouts found.');
+        }
+        layout?.forEach((layoutItem) => {
+            // @ts-expect-error - We are removing the $type property from the layout item
+            delete layoutItem.$type;
+        });
+        const gridBlockValue = {
+            contentData,
+            layout,
+            settingsData,
+        };
+        return gridBlockValue;
+    }
+}
+export { UmbBlockGridToGridBlockClipboardCopyPropertyValueTranslator as api };

package/dist-cms/packages/block/block-grid/clipboard/grid-block/manifests.js

@@ -0,0 +1,21 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../../property-editors/constants.js';
+import { UMB_GRID_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE } from './constants.js';
+export const manifests = [
+    {
+        type: 'clipboardCopyPropertyValueTranslator',
+        alias: 'Umb.ClipboardCopyPropertyValueTranslator.BlockGridToGridBlock',
+        name: 'Block Grid To Grid Block Clipboard Copy Property Value Translator',
+        api: () => import('./copy/block-grid-to-grid-block-copy-translator.js'),
+        fromPropertyEditorUi: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
+        toClipboardEntryValueType: UMB_GRID_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE,
+    },
+    {
+        type: 'clipboardPastePropertyValueTranslator',
+        alias: 'Umb.ClipboardPastePropertyValueTranslator.GridBlockToBlockGrid',
+        name: 'Grid Block To Block Grid Clipboard Paste Property Value Translator',
+        api: () => import('./paste/grid-block-to-block-grid-paste-translator.js'),
+        fromClipboardEntryValueType: UMB_GRID_BLOCK_CLIPBOARD_ENTRY_VALUE_TYPE,
+        weight: 1000,
+        toPropertyEditorUi: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
+    },
+];

package/dist-cms/packages/block/block-grid/clipboard/grid-block/paste/grid-block-to-block-grid-paste-translator.d.ts

@@ -0,0 +1,27 @@
+import type { UmbBlockGridValueModel } from '../../../types.js';
+import type { UmbGridBlockClipboardEntryValueModel } from '../../types.js';
+import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
+import type { UmbClipboardPastePropertyValueTranslator } from '../../../../../clipboard/index.js';
+export declare class UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator extends UmbControllerBase implements UmbClipboardPastePropertyValueTranslator<UmbGridBlockClipboardEntryValueModel, UmbBlockGridValueModel> {
+    /**
+     * Translates a grid block clipboard entry value to a block grid property value.
+     * @param {UmbGridBlockClipboardEntryValueModel} value - The grid block clipboard entry value.
+     * @returns {Promise<UmbBlockGridValueModel>}  {Promise<UmbBlockGridValueModel>}
+     * @memberof UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator
+     */
+    translate(value: UmbGridBlockClipboardEntryValueModel): Promise<UmbBlockGridValueModel>;
+    /**
+     * Checks if the clipboard entry value is compatible with the config.
+     * @param {UmbGridBlockClipboardEntryValueModel} value - The grid block clipboard entry value.
+     * @param {*} config - The Property Editor config.
+     * @returns {Promise<boolean>} {Promise<boolean>}
+     * @memberof UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator
+     */
+    isCompatibleValue(value: UmbGridBlockClipboardEntryValueModel, config: Array<{
+        alias: string;
+        value: [{
+            contentElementTypeKey: string;
+        }];
+    }>): Promise<boolean>;
+}
+export { UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator as api };

package/dist-cms/packages/block/block-grid/clipboard/grid-block/paste/grid-block-to-block-grid-paste-translator.js

@@ -0,0 +1,40 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../property-editors/constants.js';
+import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
+export class UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator extends UmbControllerBase {
+    /**
+     * Translates a grid block clipboard entry value to a block grid property value.
+     * @param {UmbGridBlockClipboardEntryValueModel} value - The grid block clipboard entry value.
+     * @returns {Promise<UmbBlockGridValueModel>}  {Promise<UmbBlockGridValueModel>}
+     * @memberof UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator
+     */
+    async translate(value) {
+        if (!value) {
+            throw new Error('Value is missing.');
+        }
+        const valueClone = structuredClone(value);
+        const blockGridPropertyValue = {
+            contentData: valueClone.contentData,
+            settingsData: valueClone.settingsData,
+            expose: [],
+            layout: {
+                [UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]: valueClone.layout,
+            },
+        };
+        return blockGridPropertyValue;
+    }
+    /**
+     * Checks if the clipboard entry value is compatible with the config.
+     * @param {UmbGridBlockClipboardEntryValueModel} value - The grid block clipboard entry value.
+     * @param {*} config - The Property Editor config.
+     * @returns {Promise<boolean>} {Promise<boolean>}
+     * @memberof UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator
+     */
+    async isCompatibleValue(value, 
+    // TODO: Replace any with the correct type.
+    config) {
+        const allowedBlockContentTypes = config.find((c) => c.alias === 'blocks')?.value.map((b) => b.contentElementTypeKey) ?? [];
+        const blockContentTypes = value.contentData.map((c) => c.contentTypeKey);
+        return blockContentTypes?.every((b) => allowedBlockContentTypes.includes(b)) ?? false;
+    }
+}
+export { UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator as api };

package/dist-cms/packages/block/block-grid/clipboard/manifests.js

@@ -0,0 +1,43 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../property-editors/constants.js';
+import { manifests as blockManifests } from './block/manifests.js';
+import { manifests as gridBlockManifests } from './grid-block/manifests.js';
+import { UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS, UMB_WRITABLE_PROPERTY_CONDITION_ALIAS, } from '../../../core/property/index.js';
+const forPropertyEditorUis = [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS];
+export const manifests = [
+    {
+        type: 'propertyContext',
+        kind: 'clipboard',
+        alias: 'Umb.PropertyContext.BlockGrid.Clipboard',
+        name: 'Block Grid Clipboard Property Context',
+        forPropertyEditorUis,
+    },
+    {
+        type: 'propertyAction',
+        kind: 'copyToClipboard',
+        alias: 'Umb.PropertyAction.BlockGrid.Clipboard.Copy',
+        name: 'Block Grid Copy To Clipboard Property Action',
+        forPropertyEditorUis,
+        conditions: [
+            {
+                alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS,
+            },
+            {
+                alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+            },
+        ],
+    },
+    {
+        type: 'propertyAction',
+        kind: 'pasteFromClipboard',
+        alias: 'Umb.PropertyAction.BlockGrid.Clipboard.Paste',
+        name: 'Block Grid Paste From Clipboard Property Action',
+        forPropertyEditorUis,
+        conditions: [
+            {
+                alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS,
+            },
+        ],
+    },
+    ...blockManifests,
+    ...gridBlockManifests,
+];

package/dist-cms/packages/block/block-grid/clipboard/types.d.ts

@@ -0,0 +1,7 @@
+import type { UmbBlockGridLayoutModel } from '../types.js';
+import type { UmbBlockDataModel } from '../../block/index.js';
+export interface UmbGridBlockClipboardEntryValueModel {
+    contentData: Array<UmbBlockDataModel>;
+    settingsData: Array<UmbBlockDataModel>;
+    layout: UmbBlockGridLayoutModel[] | undefined;
+}

package/dist-cms/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.d.ts

@@ -9,7 +9,7 @@ export declare class UmbBlockGridAreaTypeWorkspaceContext extends UmbSubmittable
     #private;
     readonly IS_BLOCK_GRID_AREA_TYPE_WORKSPACE_CONTEXT = true;
     readonly data: import("rxjs").Observable<UmbBlockGridTypeAreaType | undefined>;
-    readonly values: import("rxjs").Observable<UmbPropertyValueData[] | undefined>;
+    readonly values: import("rxjs").Observable<UmbPropertyValueData<unknown>[] | undefined>;
     getValues(): Promise<Array<UmbPropertyValueData> | undefined>;
     readonly name: import("rxjs").Observable<string | undefined>;
     readonly unique: import("rxjs").Observable<string | undefined>;

package/dist-cms/packages/block/block-grid/components/block-grid-block/block-grid-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 { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { css, customElement, html, property } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property } from '../../../../../external/lit/index.js';
 import '../../../../ufm/index.js';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
@@ -16,6 +16,11 @@ let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElem
 			href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
 			<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 			<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
+			${this.unpublished
+            ? html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+					></uui-tag>`
+            : nothing}
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 		</umb-ref-grid-block>`;
     }
@@ -27,6 +32,13 @@ let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElem
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
+
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;

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

@@ -12,6 +12,7 @@ export declare class UmbBlockGridBlockInlineElement extends UmbLitElement {
     unpublished?: boolean;
     content?: UmbBlockDataType;
     _inlineProperty?: UmbPropertyTypeModel;
+    _inlinePropertyDataPath?: string;
     private _ownerContentTypeName?;
     private _variantName?;
     constructor();

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
 import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../../context/block-grid-entries.context-token.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { css, customElement, html, property, state } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
 import { UMB_BLOCK_WORKSPACE_ALIAS, } from '../../../block/index.js';
@@ -15,6 +15,7 @@ import { umbExtensionsRegistry } from '../../../../core/extension-registry/index
 import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer, } from '../../../../../libs/extension-api/index.js';
 import { UmbLanguageItemRepository } from '../../../../language/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
+import { UmbDataPathPropertyValueQuery } from '../../../../core/validation/index.js';
 const apiArgsCreator = (manifest) => {
     return [{ manifest }];
 };
@@ -22,6 +23,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
     //
     #blockContext;
     #workspaceContext;
+    #variantId;
     #contentKey;
     #parentUnique;
     #areaKey;
@@ -54,14 +56,16 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
                 this.#load();
                 this.observe(this.#workspaceContext.content.structure.contentTypeProperties, (contentTypeProperties) => {
                     this._inlineProperty = contentTypeProperties[0];
+                    this.#generatePropertyDataPath();
                 }, 'observeProperties');
                 this.observe(context.content.structure.ownerContentTypeName, (name) => {
                     this._ownerContentTypeName = name;
                 }, 'observeContentTypeName');
                 this.observe(context.variantId, async (variantId) => {
+                    this.#variantId = variantId;
+                    this.#generatePropertyDataPath();
                     if (variantId) {
                         context.content.setup(this, variantId);
-                        // TODO: Support segment name?
                         const culture = variantId.culture;
                         if (culture) {
                             const languageRepository = new UmbLanguageItemRepository(this);
@@ -71,10 +75,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
                         }
                     }
                 }, 'observeVariant');
-                new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [
-                    this,
-                    this.#workspaceContext,
-                ]);
+                new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [this.#workspaceContext]);
             }
         });
     }
@@ -83,6 +84,16 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
             return;
         this.#workspaceContext.load(this.#contentKey);
     }
+    #generatePropertyDataPath() {
+        if (!this.#variantId || !this._inlineProperty)
+            return;
+        const property = this._inlineProperty;
+        this._inlinePropertyDataPath = `$.values[${UmbDataPathPropertyValueQuery({
+            alias: property.alias,
+            culture: property.variesByCulture ? this.#variantId.culture : null,
+            segment: property.variesBySegment ? this.#variantId.segment : null,
+        })}].value`;
+    }
     #expose = () => {
         this.#workspaceContext?.expose();
     };
@@ -108,6 +119,11 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 				</div>
 			</span>
+			${this.unpublished
+            ? html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+					></uui-tag>`
+            : nothing}
 		`;
     }
     #renderInside() {
@@ -123,6 +139,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
             return html `<div id="inside">
 				<umb-property-type-based-property
 					.property=${this._inlineProperty}
+					.dataPath=${this._inlinePropertyDataPath ?? ''}
 					slot="areas"></umb-property-type-based-property>
 				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 			</div>`;
@@ -140,7 +157,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 
 			#exposeButton {
 				width: 100%;
-				min-height: var(--uui-size-layout-3);
+				min-height: var(--uui-size-16);
 			}
 
 			#host {
@@ -174,7 +191,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				border-color: var(--uui-color-disabled-standalone);
 			}
 
-			:host([unpublished]) #open-part {
+			:host([unpublished]) #open-part #content {
 				opacity: 0.6;
 			}
 
@@ -240,6 +257,13 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				font-weight: 700;
 			}
 
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
+
 			:host(:not([disabled])) #open-part:hover #icon {
 				color: var(--uui-color-interactive-emphasis);
 			}
@@ -280,6 +304,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridBlockInlineElement.prototype, "_inlineProperty", void 0);
+__decorate([
+    state()
+], UmbBlockGridBlockInlineElement.prototype, "_inlinePropertyDataPath", void 0);
 __decorate([
     state()
 ], UmbBlockGridBlockInlineElement.prototype, "_ownerContentTypeName", void 0);

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

@@ -10,14 +10,14 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { html, customElement, state, repeat, css, property, nothing } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import '../block-grid-entry/index.js';
-import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UmbSorterController, } from '../../../../core/sorter/index.js';
 import { UmbFormControlMixin, UmbFormControlValidator, } from '../../../../core/validation/index.js';
 /**
  * Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
  * @param args
  * @returns { null | true }
  */
-function resolvePlacementAsGrid(args) {
+function resolvePlacementAsBlockGrid(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)) {
         return null;
@@ -63,7 +63,15 @@ function resolvePlacementAsGrid(args) {
     const relatedStartX = Math.max(args.relatedRect.left - args.containerRect.left + offsetPlacement, 0);
     const relatedStartCol = Math.round(getInterpolatedIndexOfPositionInWeightMap(relatedStartX, approvedContainerGridColumns));
     // If the found related element does not have enough room after which for the current element, then we go vertical mode:
-    return relatedStartCol + (args.horizontalPlaceAfter ? foundElColumns : 0) + currentElementColumns > gridColumnNumber;
+    const verticalDirection = relatedStartCol + foundElColumns + currentElementColumns > gridColumnNumber;
+    return verticalDirection;
+    /*
+    let placeAfter = args.horizontalPlaceAfter;
+
+    return {
+        verticalDirection,
+        placeAfter,
+    };*/
 }
 // --------------------------
 // End of utils.
@@ -75,7 +83,7 @@ const SORTER_CONFIG = {
     getUniqueOfModel: (modelEntry) => {
         return modelEntry.contentKey;
     },
-    resolvePlacement: resolvePlacementAsGrid,
+    resolvePlacement: resolvePlacementAsBlockGrid,
     identifier: 'block-grid-editor',
     itemSelector: 'umb-block-grid-entry',
     containerSelector: '.umb-block-grid__layout-container',
@@ -276,7 +284,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 				look="placeholder"
 				href=${this.#context.getPathForClipboard(-1) ?? ''}
 				?disabled=${this._isReadOnly}>
-				<uui-icon name="icon-paste-in"></uui-icon>
+				<uui-icon name="icon-clipboard-paste"></uui-icon>
 			</uui-button>
 		`;
     }

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

@@ -15,7 +15,7 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     get index(): number | undefined;
     set index(value: number | undefined);
     get contentKey(): string | undefined;
-    set contentKey(value: string | undefined);
+    set contentKey(key: string | undefined);
     private _contentKey?;
     _contentTypeAlias?: string;
     _contentTypeName?: string;

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

@@ -29,14 +29,14 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     get contentKey() {
         return this._contentKey;
     }
-    set contentKey(value) {
-        if (!value || value === this._contentKey)
+    set contentKey(key) {
+        if (!key || key === this._contentKey)
             return;
-        this._contentKey = value;
-        this._blockViewProps.contentKey = value;
-        this.setAttribute('data-element-key', value);
-        this.#context.setContentKey(value);
-        new UmbObserveValidationStateController(this, `$.contentData[${UmbDataPathBlockElementDataQuery({ key: value })}]`, (hasMessages) => {
+        this._contentKey = key;
+        this._blockViewProps.contentKey = key;
+        this.setAttribute('data-element-key', key);
+        this.#context.setContentKey(key);
+        new UmbObserveValidationStateController(this, `$.contentData[${UmbDataPathBlockElementDataQuery({ key: key })}]`, (hasMessages) => {
             this._contentInvalid = hasMessages;
             this._blockViewProps.contentInvalid = hasMessages;
         }, 'observeMessagesForContent');
@@ -319,7 +319,8 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     #renderActionBar() {
         return html `
 			<uui-action-bar>
-				${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderDeleteAction()}</uui-action-bar
+				${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
+				${this.#renderDeleteAction()}</uui-action-bar
 			>
 		`;
     }
@@ -330,7 +331,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 					look="secondary"
 					color=${this._contentInvalid ? 'danger' : ''}
 					href=${this._workspaceEditContentPath}>
-					<uui-icon name="icon-edit"></uui-icon>
+					<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
 					${this._contentInvalid
                 ? html `<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
                 : nothing}
@@ -360,6 +361,11 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             : nothing}
 		`;
     }
+    #renderCopyToClipboardAction() {
+        return html `<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#context.copyToClipboard()}>
+			<uui-icon name="icon-clipboard-copy"></uui-icon>
+		</uui-button>`;
+    }
     #renderDeleteAction() {
         if (this._isReadOnly)
             return nothing;

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

@@ -35,9 +35,8 @@ let UmbRefGridBlockElement = class UmbRefGridBlockElement extends UUIRefNodeElem
 
 			#open-part {
 				display: flex;
-				min-height: var(
-					--uui-size-layout-2
-				); /* TODO: We should not do this, but it is a quick fix for now to ensure that the top part of a block gets a minimum height. */
+				min-height: var(--uui-size-16);
+				padding: calc(var(--uui-size-2) + 1px);
 			}
 
 			:host([unpublished]) #open-part {

package/dist-cms/packages/block/block-grid/constants.d.ts

@@ -1,5 +1,6 @@
 export * from './components/constants.js';
 export * from './context/constants.js';
 export * from './property-editors/constants.js';
+export * from './clipboard/constants.js';
 export declare const UMB_BLOCK_GRID_TYPE = "block-grid-type";
 export declare const UMB_BLOCK_GRID = "block-grid";

package/dist-cms/packages/block/block-grid/constants.js

@@ -1,5 +1,6 @@
 export * from './components/constants.js';
 export * from './context/constants.js';
 export * from './property-editors/constants.js';
+export * from './clipboard/constants.js';
 export const UMB_BLOCK_GRID_TYPE = 'block-grid-type';
 export const UMB_BLOCK_GRID = 'block-grid';

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

@@ -1,7 +1,7 @@
 import type { UmbBlockDataModel } from '../../block/index.js';
 import { UmbBlockEntriesContext } from '../../block/index.js';
 import { type UmbBlockGridWorkspaceOriginData } from '../index.js';
-import type { UmbBlockGridLayoutModel, UmbBlockGridTypeAreaType, UmbBlockGridTypeModel } from '../types.js';
+import type { UmbBlockGridLayoutModel, UmbBlockGridTypeAreaType, UmbBlockGridTypeModel, UmbBlockGridValueModel } from '../types.js';
 import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context-token.js';
 import type { UmbBlockGridScalableContainerContext } from './block-grid-scale-manager/block-grid-scale-manager.controller.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
@@ -49,6 +49,8 @@ export declare class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<t
     } | undefined>;
     insert(layoutEntry: UmbBlockGridLayoutModel, content: UmbBlockDataModel, settings: UmbBlockDataModel | undefined, originData: UmbBlockGridWorkspaceOriginData): Promise<boolean>;
     delete(contentKey: string): Promise<void>;
+    protected _insertFromPropertyValue(value: UmbBlockGridValueModel, originData: UmbBlockGridWorkspaceOriginData): Promise<UmbBlockGridWorkspaceOriginData>;
+    protected _insertBlockFromPropertyValue(layoutEntry: UmbBlockGridLayoutModel, value: UmbBlockGridValueModel, originData: UmbBlockGridWorkspaceOriginData): Promise<void>;
     getInvalidBlockTypeLimits(): UmbBlockGridAreaTypeInvalidRuleType[];
     /**
      * @internal