@umbraco-cms/backoffice 17.4.2 → 17.5.0-rc

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_BLOCK_RTE, UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../constants.js';
+import { UMB_BLOCK_RTE } from '../../constants.js';
 import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
 import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
@@ -12,9 +12,8 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../../../clipboard/index.js';
-import { UMB_PROPERTY_DATASET_CONTEXT, UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 import '../ref-rte-block/index.js';
+import '../../../block/action/block-action-list.element.js';
 /**
  * @class UmbBlockRteEntryElement
  */
@@ -37,12 +36,10 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         this._blockViewProps = { ...this._blockViewProps, ...incoming };
         this.requestUpdate('_blockViewProps');
     }
-    #clipboardContext;
     constructor() {
         super();
         this.#context = new UmbBlockRteEntryContext(this);
         this._showContentEdit = false;
-        this._hasSettings = false;
         this._label = '';
         this._isReadOnly = false;
         this._blockViewProps = {
@@ -81,15 +78,11 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         };
         // We do not have index for RTE Blocks at the moment.
         this.#context.setIndex(0);
-        this.consumeContext(UMB_CLIPBOARD_PROPERTY_CONTEXT, (clipboardContext) => {
-            this.#clipboardContext = clipboardContext;
-        });
         this.observe(this.#context.showContentEdit, (showContentEdit) => {
             this._showContentEdit = showContentEdit;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
         }, null);
         this.observe(this.#context.settingsElementTypeKey, (key) => {
-            this._hasSettings = !!key;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
         }, null);
         this.observe(this.#context.contentElementTypeAlias, (alias) => {
@@ -114,9 +107,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             this.#updateBlockViewProps({ unpublished: !exposed });
             this._exposed = exposed;
         }, null);
-        this.observe(this.#context.actionsVisibility, (showActions) => {
-            this._showActions = showActions;
-        }, null);
+        this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
         // Data props:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -133,11 +124,9 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             }
         }, null);
         this.observe(this.#context.workspaceEditContentPath, (path) => {
-            this._workspaceEditContentPath = path;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editContentPath: path } });
         }, null);
         this.observe(this.#context.workspaceEditSettingsPath, (path) => {
-            this._workspaceEditSettingsPath = path;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editSettingsPath: path } });
         }, null);
         this.observe(this.#context.readOnlyGuard.permitted, (isReadOnly) => {
@@ -157,38 +146,6 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         super.connectedCallback();
         this.setAttribute('contenteditable', 'false');
     }
-    async #copyToClipboard() {
-        if (!this.#clipboardContext) {
-            console.warn('Clipboard context is not available.');
-            return;
-        }
-        const propertyDatasetContext = await this.getContext(UMB_PROPERTY_DATASET_CONTEXT);
-        const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
-        if (!propertyDatasetContext || !propertyContext) {
-            throw new Error('Could not get required contexts to copy.');
-        }
-        const workspaceName = this.localize.string(propertyDatasetContext?.getName());
-        const propertyLabel = this.localize.string(propertyContext?.getLabel());
-        const blockLabel = this.#context.getName();
-        const entryName = [workspaceName, propertyLabel, blockLabel].filter(Boolean).join(' - ');
-        const content = this.#context.getContent();
-        const layout = this.#context.getLayout();
-        const settings = this.#context.getSettings();
-        const expose = this.#context.getExpose();
-        const propertyValue = {
-            contentData: content ? [structuredClone(content)] : [],
-            layout: { [UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS]: layout ? [structuredClone(layout)] : undefined },
-            settingsData: settings ? [structuredClone(settings)] : [],
-            expose: expose ? [structuredClone(expose)] : [],
-        };
-        const editorUiManifest = propertyContext.getEditorManifest();
-        this.#clipboardContext.write({
-            icon: this._icon,
-            name: entryName,
-            propertyValue,
-            propertyEditorUiAlias: editorUiManifest?.alias ?? '',
-        });
-    }
     #filterBlockCustomViews;
     #expose;
     #extensionSlotRenderMethod;
@@ -215,12 +172,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
     #renderActionBar() {
         if (!this._showActions)
             return nothing;
-        return html `
-			<uui-action-bar>
-				${this.#renderEditAction()} ${this.#renderEditSettingsAction()}
-				${this.#renderCopyToClipboardAction()}${this.#renderDeleteAction()}
-			</uui-action-bar>
-		`;
+        return html `<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_RTE}></umb-block-action-list>`;
     }
     #renderBuiltinBlockView;
     #renderRefBlock() {
@@ -233,64 +185,6 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 			.settings=${this._blockViewProps.settings}
 			.config=${this._blockViewProps.config}></umb-ref-rte-block>`;
     }
-    #renderEditAction() {
-        return this._showContentEdit && this._workspaceEditContentPath
-            ? html `<uui-button
-					label="edit"
-					look="secondary"
-					color=${this._contentInvalid ? 'invalid' : ''}
-					href=${this._workspaceEditContentPath}>
-					<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
-					${this._contentInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-                : nothing}
-				</uui-button>`
-            : this._showContentEdit === false && this._exposed === false
-                ? html `<uui-button
-						@click=${this.#expose}
-						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
-						look="secondary">
-						<uui-icon name="icon-add"></uui-icon>
-					</uui-button>`
-                : nothing;
-    }
-    #renderEditSettingsAction() {
-        return html `
-			${this._hasSettings && this._workspaceEditSettingsPath
-            ? html `<uui-button
-						label="Edit settings"
-						look="secondary"
-						color=${this._settingsInvalid ? 'invalid' : ''}
-						href=${this._workspaceEditSettingsPath}>
-						<uui-icon name="icon-settings"></uui-icon>
-						${this._settingsInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`
-                : nothing}
-					</uui-button>`
-            : nothing}
-		`;
-    }
-    #renderCopyToClipboardAction() {
-        if (!this.#clipboardContext)
-            return nothing;
-        return html `
-			<uui-button
-				label=${this.localize.term('clipboard_labelForCopyToClipboard')}
-				look="secondary"
-				@click=${() => this.#copyToClipboard()}>
-				<uui-icon name="icon-clipboard-copy"></uui-icon>
-			</uui-button>
-		`;
-    }
-    #renderDeleteAction() {
-        if (this._isReadOnly)
-            return nothing;
-        return html `
-			<uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()}>
-				<uui-icon name="icon-remove"></uui-icon>
-			</uui-button>
-		`;
-    }
     render() {
         return this.#renderBlock();
     }
@@ -303,6 +197,13 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 				user-select: all;
 				user-drag: auto;
 				white-space: nowrap;
+
+				--umb-block-entry-actions-opacity: 0;
+			}
+
+			:host(:hover),
+			:host(:focus-within) {
+				--umb-block-entry-actions-opacity: 1;
 			}
 
 			:host(.ProseMirror-selectednode) {
@@ -317,10 +218,13 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 				z-index: 0;
 			}
 
-			uui-action-bar {
+			#actions {
 				position: absolute;
 				top: var(--uui-size-2);
 				right: var(--uui-size-2);
+				opacity: var(--umb-block-entry-actions-opacity, 0);
+				transition: opacity 120ms;
+				z-index: 1;
 			}
 
 			:host([drag-placeholder]) {
@@ -335,9 +239,6 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_showContentEdit", void 0);
-__decorate([
-    state()
-], UmbBlockRteEntryElement.prototype, "_hasSettings", void 0);
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_label", void 0);
@@ -350,12 +251,6 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_showActions", void 0);
-__decorate([
-    state()
-], UmbBlockRteEntryElement.prototype, "_workspaceEditContentPath", void 0);
-__decorate([
-    state()
-], UmbBlockRteEntryElement.prototype, "_workspaceEditSettingsPath", void 0);
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_contentTypeAlias", void 0);

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

@@ -4,6 +4,7 @@ import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from './block-rte-entries.context-token
 import { UmbBlockEntryContext } from '../../block/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbBlockRteEntryContext extends UmbBlockEntryContext<typeof UMB_BLOCK_RTE_MANAGER_CONTEXT, typeof UMB_BLOCK_RTE_MANAGER_CONTEXT.TYPE, typeof UMB_BLOCK_RTE_ENTRIES_CONTEXT, typeof UMB_BLOCK_RTE_ENTRIES_CONTEXT.TYPE, UmbBlockRteTypeModel, UmbBlockRteLayoutModel> {
+    #private;
     /** @deprecated Use `displayInlineConfig` instead. This field will be removed in Umbraco 19. [LK] */
     readonly displayInline: import("rxjs").Observable<boolean | undefined>;
     readonly displayInlineConfig: import("rxjs").Observable<boolean | undefined>;
@@ -13,4 +14,5 @@ export declare class UmbBlockRteEntryContext extends UmbBlockEntryContext<typeof
     protected _gotManager(): void;
     protected _gotEntries(): void;
     protected _gotContentType(): void;
+    copyToClipboard(): Promise<void>;
 }

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

@@ -1,7 +1,10 @@
+import { UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../constants.js';
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js';
 import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from './block-rte-entries.context-token.js';
-import { mergeObservables } from '../../../../libs/observable-api/index.js';
 import { UmbBlockEntryContext } from '../../block/index.js';
+import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../../clipboard/index.js';
+import { mergeObservables } from '../../../../libs/observable-api/index.js';
+import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../core/property/index.js';
 export class UmbBlockRteEntryContext extends UmbBlockEntryContext {
     constructor(host) {
         super(host, UMB_BLOCK_RTE_MANAGER_CONTEXT, UMB_BLOCK_RTE_ENTRIES_CONTEXT);
@@ -16,4 +19,49 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext {
     _gotManager() { }
     _gotEntries() { }
     _gotContentType() { }
+    async copyToClipboard() {
+        const [clipboardContext, propertyDatasetContext, propertyContext] = await Promise.all([
+            this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT),
+            this.getContext(UMB_PROPERTY_DATASET_CONTEXT),
+            this.getContext(UMB_PROPERTY_CONTEXT),
+        ]);
+        if (!clipboardContext) {
+            console.warn('Clipboard context is not available.');
+            return;
+        }
+        if (!propertyDatasetContext)
+            throw new Error('Could not get property dataset context to copy.');
+        if (!propertyContext)
+            throw new Error('Could not get property context to copy.');
+        this.#writeClipboardEntry(clipboardContext, propertyDatasetContext, propertyContext);
+    }
+    #writeClipboardEntry(clipboardContext, propertyDatasetContext, propertyContext) {
+        const editorUiAlias = propertyContext.getEditorManifest()?.alias;
+        if (!editorUiAlias)
+            throw new Error('Could not determine property editor UI alias for clipboard entry.');
+        const workspaceName = this.localize.string(propertyDatasetContext.getName());
+        const propertyLabel = this.localize.string(propertyContext.getLabel());
+        const blockLabel = this.getName();
+        const entryName = [workspaceName, propertyLabel, blockLabel].filter(Boolean).join(' - ');
+        clipboardContext.write({
+            icon: this.getContentElementTypeIcon(),
+            name: entryName,
+            propertyValue: this.#buildPropertyValue(),
+            propertyEditorUiAlias: editorUiAlias,
+        });
+    }
+    #buildPropertyValue() {
+        const content = this.getContent();
+        const layout = this.getLayout();
+        const settings = this.getSettings();
+        const expose = this.getExpose();
+        return {
+            contentData: content ? [structuredClone(content)] : [],
+            layout: {
+                [UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS]: layout ? [structuredClone(layout)] : undefined,
+            },
+            settingsData: settings ? [structuredClone(settings)] : [],
+            expose: expose ? [structuredClone(expose)] : [],
+        };
+    }
 }

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

@@ -4,6 +4,7 @@ import type { UmbPropertyEditorUiElement } from '../../../../core/property-edito
 import '../ref-single-block/index.js';
 import '../inline-single-block/index.js';
 import '../unsupported-single-block/index.js';
+import '../../../block/action/block-action-list.element.js';
 /**
  * @element umb-block-single-entry
  */
@@ -17,14 +18,11 @@ export declare class UmbBlockSingleEntryElement extends UmbLitElement implements
     private _contentTypeAlias?;
     private _contentTypeName?;
     private _showContentEdit;
-    private _hasSettings;
     private _label;
     private _icon?;
     private _exposed?;
     private _unsupported?;
     private _showActions?;
-    private _workspaceEditContentPath?;
-    private _workspaceEditSettingsPath?;
     private _inlineEditingMode?;
     private _contentInvalid?;
     private _settingsInvalid?;

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

@@ -5,18 +5,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbBlockSingleEntryContext } from '../../context/block-single-entry.context.js';
-import { UMB_BLOCK_SINGLE, UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_SINGLE_PROPERTY_EDITOR_UI_ALIAS, } from '../../constants.js';
+import { UMB_BLOCK_SINGLE } from '../../constants.js';
 import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
-import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../../../clipboard/index.js';
 import '../ref-single-block/index.js';
 import '../inline-single-block/index.js';
 import '../unsupported-single-block/index.js';
+import '../../../block/action/block-action-list.element.js';
 /**
  * @element umb-block-single-entry
  */
@@ -50,7 +49,6 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
         super();
         this.#context = new UmbBlockSingleEntryContext(this);
         this._showContentEdit = false;
-        this._hasSettings = false;
         this._label = '';
         this._blockViewProps = {
             contentKey: undefined,
@@ -105,7 +103,6 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
         }, null);
         this.observe(this.#context.settingsElementTypeKey, (key) => {
-            this._hasSettings = !!key;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
         }, null);
         this.observe(this.#context.blockType, (blockType) => {
@@ -131,9 +128,7 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
             this._unsupported = unsupported;
             this.toggleAttribute('unsupported', unsupported);
         }, null);
-        this.observe(this.#context.actionsVisibility, (showActions) => {
-            this._showActions = showActions;
-        }, null);
+        this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
         this.observe(this.#context.inlineEditingMode, (mode) => {
             this._inlineEditingMode = mode;
         }, null);
@@ -153,11 +148,9 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
             }
         }, null);
         this.observe(this.#context.workspaceEditContentPath, (path) => {
-            this._workspaceEditContentPath = path;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editContentPath: path } });
         }, null);
         this.observe(this.#context.workspaceEditSettingsPath, (path) => {
-            this._workspaceEditSettingsPath = path;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editSettingsPath: path } });
         }, null);
         this.observe(this.#context.readOnlyGuard.permitted, (isReadOnly) => {
@@ -192,38 +185,6 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
         }, 'contentElementTypeName');
     }
     #expose;
-    async #copyToClipboard() {
-        const propertyDatasetContext = await this.getContext(UMB_PROPERTY_DATASET_CONTEXT);
-        const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
-        const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
-        if (!propertyDatasetContext || !propertyContext || !clipboardContext) {
-            throw new Error('Could not get required contexts to copy.');
-        }
-        const workspaceName = this.localize.string(propertyDatasetContext?.getName());
-        const propertyLabel = this.localize.string(propertyContext?.getLabel());
-        const blockLabel = this.#context.getName();
-        const entryName = workspaceName
-            ? `${workspaceName} - ${propertyLabel} - ${blockLabel}`
-            : `${propertyLabel} - ${blockLabel}`;
-        const content = this.#context.getContent();
-        const layout = this.#context.getLayout();
-        const settings = this.#context.getSettings();
-        const expose = this.#context.getExpose();
-        const propertyValue = {
-            contentData: content ? [structuredClone(content)] : [],
-            layout: {
-                [UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS]: layout ? [structuredClone(layout)] : undefined,
-            },
-            settingsData: settings ? [structuredClone(settings)] : [],
-            expose: expose ? [structuredClone(expose)] : [],
-        };
-        clipboardContext.write({
-            icon: this._icon,
-            name: entryName,
-            propertyValue,
-            propertyEditorUiAlias: UMB_BLOCK_SINGLE_PROPERTY_EDITOR_UI_ALIAS,
-        });
-    }
     #extensionSlotFilterMethod;
     #extensionSlotRenderMethod;
     #renderRefBlock() {
@@ -275,66 +236,9 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
             : nothing;
     }
     #renderActionBar() {
-        return this._showActions
-            ? html `<uui-action-bar>
-					${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
-					${this.#renderDeleteAction()}
-				</uui-action-bar>`
-            : nothing;
-    }
-    #renderEditContentAction() {
-        return this._showContentEdit && this._workspaceEditContentPath
-            ? html `<uui-button
-					label="edit"
-					look="secondary"
-					color=${this._contentInvalid ? 'invalid' : ''}
-					href=${this._workspaceEditContentPath}>
-					<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>`
-                : nothing}
-				</uui-button>`
-            : this._showContentEdit === false && this._exposed === false
-                ? html `<uui-button
-						@click=${this.#expose}
-						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
-						look="secondary"
-						><uui-icon name="icon-add"></uui-icon
-					></uui-button>`
-                : nothing;
-    }
-    #renderEditSettingsAction() {
-        return html `
-			${this._hasSettings && this._workspaceEditSettingsPath
-            ? html `<uui-button
-						label="Edit settings"
-						look="secondary"
-						color=${this._settingsInvalid ? 'invalid' : ''}
-						href=${this._workspaceEditSettingsPath}>
-						<uui-icon name="icon-settings"></uui-icon>
-						${this._settingsInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`
-                : nothing}
-					</uui-button>`
-            : nothing}
-		`;
-    }
-    #renderDeleteAction() {
-        if (this._isReadOnly)
+        if (!this._showActions)
             return nothing;
-        return html ` <uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()}>
-			<uui-icon name="icon-remove"></uui-icon>
-		</uui-button>`;
-    }
-    #renderCopyToClipboardAction() {
-        return html `
-			<uui-button
-				label=${this.localize.term('clipboard_labelForCopyToClipboard')}
-				look="secondary"
-				@click=${() => this.#copyToClipboard()}>
-				<uui-icon name="icon-clipboard-copy"></uui-icon>
-			</uui-button>
-		`;
+        return html `<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_SINGLE}></umb-block-action-list>`;
     }
     render() {
         return this.#renderBlock();
@@ -377,12 +281,13 @@ let UmbBlockSingleEntryElement = class UmbBlockSingleEntryElement extends UmbLit
 				z-index: 0;
 			}
 
-			uui-action-bar {
+			#actions {
 				position: absolute;
 				top: var(--uui-size-2);
 				right: var(--uui-size-2);
 				opacity: var(--umb-block-single-entry-actions-opacity, 0);
 				transition: opacity 120ms;
+				z-index: 1;
 			}
 
 			uui-badge {
@@ -445,9 +350,6 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockSingleEntryElement.prototype, "_showContentEdit", void 0);
-__decorate([
-    state()
-], UmbBlockSingleEntryElement.prototype, "_hasSettings", void 0);
 __decorate([
     state()
 ], UmbBlockSingleEntryElement.prototype, "_label", void 0);
@@ -463,12 +365,6 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockSingleEntryElement.prototype, "_showActions", void 0);
-__decorate([
-    state()
-], UmbBlockSingleEntryElement.prototype, "_workspaceEditContentPath", void 0);
-__decorate([
-    state()
-], UmbBlockSingleEntryElement.prototype, "_workspaceEditSettingsPath", void 0);
 __decorate([
     state()
 ], UmbBlockSingleEntryElement.prototype, "_inlineEditingMode", void 0);

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

@@ -11,4 +11,5 @@ export declare class UmbBlockSingleEntryContext extends UmbBlockEntryContext<typ
     protected _gotManager(): void;
     protected _gotEntries(): void;
     protected _gotContentType(): void;
+    copyToClipboard(): Promise<void>;
 }

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

@@ -1,7 +1,10 @@
+import { UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_SINGLE_PROPERTY_EDITOR_UI_ALIAS, } from '../constants.js';
 import { UMB_BLOCK_SINGLE_MANAGER_CONTEXT } from './block-single-manager.context-token.js';
 import { UMB_BLOCK_SINGLE_ENTRIES_CONTEXT } from './block-single-entries.context-token.js';
 import { UmbBlockEntryContext } from '../../block/index.js';
+import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../../clipboard/index.js';
 import { UmbBooleanState, mergeObservables } from '../../../../libs/observable-api/index.js';
+import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../core/property/index.js';
 export class UmbBlockSingleEntryContext extends UmbBlockEntryContext {
     #inlineEditingMode;
     constructor(host) {
@@ -20,4 +23,39 @@ export class UmbBlockSingleEntryContext extends UmbBlockEntryContext {
     }
     _gotEntries() { }
     _gotContentType() { }
+    async copyToClipboard() {
+        const propertyDatasetContext = await this.getContext(UMB_PROPERTY_DATASET_CONTEXT);
+        if (!propertyDatasetContext)
+            throw new Error('Could not get property dataset context to copy.');
+        const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
+        if (!propertyContext)
+            throw new Error('Could not get property context to copy.');
+        const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
+        if (!clipboardContext)
+            throw new Error('Could not get clipboard context to copy.');
+        const workspaceName = this.localize.string(propertyDatasetContext.getName());
+        const propertyLabel = this.localize.string(propertyContext.getLabel());
+        const blockLabel = this.getName();
+        const entryName = [workspaceName, propertyLabel, blockLabel].filter(Boolean).join(' - ');
+        clipboardContext.write({
+            icon: this.getContentElementTypeIcon(),
+            name: entryName,
+            propertyValue: this.#buildPropertyValue(),
+            propertyEditorUiAlias: UMB_BLOCK_SINGLE_PROPERTY_EDITOR_UI_ALIAS,
+        });
+    }
+    #buildPropertyValue() {
+        const content = this.getContent();
+        const layout = this.getLayout();
+        const settings = this.getSettings();
+        const expose = this.getExpose();
+        return {
+            contentData: content ? [structuredClone(content)] : [],
+            layout: {
+                [UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS]: layout ? [structuredClone(layout)] : undefined,
+            },
+            settingsData: settings ? [structuredClone(settings)] : [],
+            expose: expose ? [structuredClone(expose)] : [],
+        };
+    }
 }

package/dist-cms/packages/block/block-single/property-editors/block-single-editor/manifests.js

@@ -12,6 +12,7 @@ export const manifests = [
             propertyEditorSchemaAlias: UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS,
             icon: 'icon-shape-square',
             group: 'richContent',
+            keywords: ['component', 'widget', 'banner', 'hero', 'cta', 'promo', 'cta', 'callout', 'spotlight', 'feature'],
             supportsReadOnly: true,
             settings: {
                 properties: [