Feature: expose button for block custom views

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -4,6 +4,7 @@
 		"backoffice",
 		"Backoffice",
 		"combobox",
+		"contenteditable",
 		"ctrls",
 		"devs",
 		"Dropcursor",

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

@@ -404,7 +404,16 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		if (ext.component) {
 			ext.component.classList.add('umb-block-grid__block--view');
 		}
-		return ext.component;
+		if (this._exposed) {
+			return ext.component;
+		} else {
+			return html`<div>
+				${ext.component}
+				<umb-block-overlay-expose-button
+					.contentTypeName=${this._contentTypeName}
+					@click=${this.#expose}></umb-block-overlay-expose-button>
+			</div>`;
+		}
 	};
 
 	#renderInlineEditBlock() {

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

@@ -13,6 +13,7 @@ import type {
 	ManifestBlockEditorCustomView,
 	UmbBlockEditorCustomViewProperties,
 } from '@umbraco-cms/backoffice/block-custom-view';
+import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 /**
  * @element umb-block-list-entry
@@ -277,6 +278,19 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		return true;
 	};
 
+	#extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer<ManifestBlockEditorCustomView>) => {
+		if (this._exposed) {
+			return ext.component;
+		} else {
+			return html`<div>
+				${ext.component}
+				<umb-block-overlay-expose-button
+					.contentTypeName=${this._contentTypeName}
+					@click=${this.#expose}></umb-block-overlay-expose-button>
+			</div>`;
+		}
+	};
+
 	#renderRefBlock() {
 		return html`<umb-ref-list-block
 			.label=${this._label}
@@ -305,6 +319,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 					<umb-extension-slot
 						type="blockEditorCustomView"
 						default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
+						.renderMethod=${this.#extensionSlotRenderMethod}
 						.props=${this._blockViewProps}
 						.filter=${this.#extensionSlotFilterMethod}
 						single

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

@@ -14,6 +14,7 @@ import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 import '../ref-rte-block/index.js';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
+import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 /**
  * @class UmbBlockRteEntryElement
@@ -242,12 +243,26 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		this.#context.expose();
 	};
 
+	#extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer<ManifestBlockEditorCustomView>) => {
+		if (this._exposed) {
+			return ext.component;
+		} else {
+			return html`<div>
+				${ext.component}
+				<umb-block-overlay-expose-button
+					.contentTypeName=${this._contentTypeName}
+					@click=${this.#expose}></umb-block-overlay-expose-button>
+			</div>`;
+		}
+	};
+
 	#renderBlock() {
 		return html`
 			<div class="uui-text uui-font">
 				<umb-extension-slot
 					type="blockEditorCustomView"
 					default-element="umb-ref-rte-block"
+					.renderMethod=${this.#extensionSlotRenderMethod}
 					.props=${this._blockViewProps}
 					.filter=${this.#filterBlockCustomViews}
 					single>

src/Umbraco.Web.UI.Client/src/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.ts

@@ -0,0 +1,48 @@
+import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+/**
+ * @description
+ * This element is used to render a expose button that goes on top of a block.
+ */
+@customElement('umb-block-overlay-expose-button')
+export class UmbBlockOverlayExposeButtonElement extends UmbLitElement {
+	@property({ attribute: false })
+	contentTypeName?: string;
+
+	override render() {
+		return this.contentTypeName
+			? html`<uui-button look="secondary"
+					><uui-icon name="icon-add"></uui-icon>
+					<umb-localize key="blockEditor_createThisFor" .args=${[this.contentTypeName]}></umb-localize
+				></uui-button>`
+			: nothing;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				position: absolute;
+				inset: 0;
+			}
+
+			uui-button {
+				position: absolute;
+				inset: 0;
+				opacity: 0.8;
+			}
+
+			:host:hover uui-button {
+				opacity: 1;
+			}
+		`,
+	];
+}
+
+export default UmbBlockOverlayExposeButtonElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-overlay-expose-button': UmbBlockOverlayExposeButtonElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/block/block/components/index.ts

@@ -0,0 +1 @@
+export * from './block-overlay-expose-button/block-overlay-expose-button.element.js';

src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts

@@ -1,3 +1,4 @@
+export * from './components/index.js';
 export * from './context/index.js';
 export * from './modals/index.js';
 export * from './property-value-resolver/index.js';