Block: open-interaction only available when Content is Editable (#20833)

Only interactive-open area when editable

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

@@ -34,7 +34,8 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 		return html`
 			<umb-ref-grid-block
 				standalone
-				href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
+				.readonly=${!(this.config?.showContentEdit ?? false)}
+				.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=${blockValue}></umb-ufm-render>
 				${when(
@@ -58,6 +59,10 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 				margin: var(--uui-size-2);
 			}
 
+			umb-ufm-render {
+				user-select: none;
+			}
+
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;

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

@@ -32,7 +32,10 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	override render() {
 		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
-			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
+			<uui-ref-node
+				standalone
+				.readonly=${!(this.config?.showContentEdit ?? false)}
+				.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=${blockValue}></umb-ufm-render>
 				${when(
@@ -57,6 +60,11 @@ export class UmbRefListBlockElement extends UmbLitElement {
 				margin-top: -0.3em;
 				vertical-align: text-top;
 			}
+
+			umb-ufm-render {
+				user-select: none;
+			}
+
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;

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

@@ -1,6 +1,5 @@
-import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
 
@@ -28,30 +27,16 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	settings?: UmbBlockDataType;
 
-	@state()
-	private _workspaceEditPath?: string;
-
 	@property({ attribute: false })
 	config?: UmbBlockEditorCustomViewConfiguration;
 
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
-			this.observe(
-				context?.workspaceEditContentPath,
-				(workspaceEditPath) => {
-					this._workspaceEditPath = workspaceEditPath;
-				},
-				'observeWorkspaceEditPath',
-			);
-		});
-	}
-
 	override render() {
 		const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
 		return html`
-			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this._workspaceEditPath : undefined) ?? ''}>
+			<uui-ref-node
+				standalone
+				.readonly=${!(this.config?.showContentEdit ?? false)}
+				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<div class="selection-background" aria-hidden="true">&emsp;</div>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
@@ -84,6 +69,10 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 				z-index: 0;
 			}
 
+			umb-ufm-render {
+				user-select: none;
+			}
+
 			umb-icon,
 			umb-ufm-render {
 				z-index: 1;