From f99b542ece1bc741683ce6b5e89efb91d89625b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 16 Oct 2024 11:40:04 +0200
Subject: [PATCH] expose button for no content editor block

---
 .../block-grid-block-inline.element.ts        | 13 +-------
 .../block-grid-block.element.ts               | 30 ++++++++++++++++++-
 .../block/context/block-entry.context.ts      |  4 +--
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 33dde6ab6c..82e3f4333f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -48,9 +48,6 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
-	@state()
-	private _exposed?: boolean;
-
 	@state()
 	_inlineProperty?: UmbPropertyTypeModel;
 
@@ -95,14 +92,6 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 						'observeProperties',
 					);
 
-					this.observe(
-						this.#workspaceContext.exposed,
-						(exposed) => {
-							this._exposed = exposed;
-						},
-						'observeExposed',
-					);
-
 					this.observe(
 						context.content.structure.ownerContentTypeName,
 						(name) => {
@@ -174,7 +163,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	}
 
 	#renderInside() {
-		if (this._exposed === false) {
+		if (this.unpublished === true) {
 			return html`<uui-button id="exposeButton" @click=${this.#expose}
 				><uui-icon name="icon-add"></uui-icon>
 				<umb-localize
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
index 3cf7b091f9..85750a34c8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
@@ -1,5 +1,6 @@
+import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
 
@@ -13,6 +14,8 @@ import '../ref-grid-block/index.js';
 @customElement('umb-block-grid-block')
 export class UmbBlockGridBlockElement extends UmbLitElement {
 	//
+	#context?: typeof UMB_BLOCK_GRID_ENTRY_CONTEXT.TYPE;
+
 	@property({ attribute: false })
 	label?: string;
 
@@ -28,10 +31,35 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@state()
+	_ownerContentTypeName?: string;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (context) => {
+			this.#context = context;
+			this.observe(context.contentElementTypeName, (name) => {
+				this._ownerContentTypeName = name;
+			});
+		});
+	}
+
+	#expose = () => {
+		this.#context?.expose();
+	};
+
 	override render() {
 		return html`<umb-ref-grid-block
 			standalone
 			href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
+			${this.config?.showContentEdit === false && this.unpublished
+				? html`
+						<uui-button slot="action" @click=${this.#expose}
+							><uui-icon name="icon-add"></uui-icon>
+							<umb-localize key="blockEditor_createThisFor" .args=${[this._ownerContentTypeName]}></umb-localize
+						></uui-button>
+					`
+				: nothing}
 			<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 			<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
index 90897490a7..1e5e0cd222 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
@@ -46,10 +46,10 @@ export abstract class UmbBlockEntryContext<
 
 	#contentKey?: string;
 	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
-	protected _variantId = this.#variantId.asObservable();
+	protected readonly _variantId = this.#variantId.asObservable();
 
 	#hasExpose = new UmbBooleanState(undefined);
-	hasExpose = this.#hasExpose.asObservable();
+	readonly hasExpose = this.#hasExpose.asObservable();
 
 	public readonly readOnlyState = new UmbReadOnlyVariantStateManager(this);