ability to hide block actions (#19626)

Co-authored-by: Mads Rasmussen <[email protected]>

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -92,6 +92,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	_unsupported?: boolean;
 
+	@state()
+	_showActions?: boolean;
+
 	@state()
 	_workspaceEditContentPath?: string;
 
@@ -214,6 +217,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
+		this.observe(
+			this.#context.actionsVisibility,
+			(showActions) => {
+				this._showActions = showActions;
+			},
+			null,
+		);
 
 		this.observe(
 			this.#context.inlineEditingMode,
@@ -546,12 +556,14 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	}
 
 	#renderActionBar() {
-		return html`
-			<uui-action-bar>
-				${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
-				${this.#renderDeleteAction()}</uui-action-bar
-			>
-		`;
+		return this._showActions
+			? html`
+					<uui-action-bar>
+						${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
+						${this.#renderDeleteAction()}</uui-action-bar
+					>
+				`
+			: nothing;
 	}
 
 	#renderEditAction() {

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts

@@ -84,6 +84,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	_unsupported?: boolean;
 
+	@state()
+	_showActions?: boolean;
+
 	@state()
 	_workspaceEditContentPath?: string;
 
@@ -178,6 +181,13 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
+		this.observe(
+			this.#context.actionsVisibility,
+			(showActions) => {
+				this._showActions = showActions;
+			},
+			null,
+		);
 		this.observe(
 			this.#context.inlineEditingMode,
 			(mode) => {
@@ -412,10 +422,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 							single
 							>${this.#renderBuiltinBlockView()}</umb-extension-slot
 						>
-						<uui-action-bar>
-							${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()}
-							${this.#renderCopyToClipboardAction()} ${this.#renderDeleteAction()}
-						</uui-action-bar>
+						${this.#renderActionBar()}
 						${!this._showContentEdit && this._contentInvalid
 							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
 							: nothing}
@@ -424,6 +431,15 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			: 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

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts

@@ -59,6 +59,9 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 	@state()
 	_exposed?: boolean;
 
+	@state()
+	_showActions?: boolean;
+
 	@state()
 	_workspaceEditContentPath?: string;
 
@@ -158,6 +161,14 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			},
 			null,
 		);
+
+		this.observe(
+			this.#context.actionsVisibility,
+			(showActions) => {
+				this._showActions = showActions;
+			},
+			null,
+		);
 		// Data props:
 		this.observe(
 			this.#context.layout,
@@ -269,7 +280,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 							single>
 							${this.#renderRefBlock()}
 						</umb-extension-slot>
-						<uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} </uui-action-bar>
+						${this.#renderActionBar()}
 						${!this._showContentEdit && this._contentInvalid
 							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
 							: nothing}
@@ -278,6 +289,12 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			: nothing;
 	}
 
+	#renderActionBar() {
+		return this._showActions
+			? html` <uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()}</uui-action-bar> `
+			: nothing;
+	}
+
 	#renderRefBlock() {
 		return html`<umb-ref-rte-block
 			.label=${this._label}

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts

@@ -65,6 +65,16 @@ export abstract class UmbBlockEntryContext<
 	#hasExpose = new UmbBooleanState(undefined);
 	readonly hasExpose = this.#hasExpose.asObservable();
 
+	#actionsVisibility = new UmbBooleanState(true);
+	readonly actionsVisibility = this.#actionsVisibility.asObservable();
+
+	hideActions() {
+		this.#actionsVisibility.setValue(false);
+	}
+	showActions() {
+		this.#actionsVisibility.setValue(true);
+	}
+
 	public readonly readOnlyGuard = new UmbReadOnlyVariantGuardManager(this);
 
 	// Workspace alike methods, to enables editing of data without the need of a workspace (Custom views and block grid inline editing mode for example).