Feature: block 'draft' tag (#17640)

* not-yet-exposed

* add tag

* implement id for expose button

* implement tag for grid

* style

* use plus icon in rte blocks

* empty commit

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -1284,12 +1284,12 @@ export default {
 		rollbackTo: 'Tilbagerulning til',
 		selectVersion: 'Vælg version',
 		view: 'Vis',
-		created: 'Created',
-		currentVersion: 'Current version',
+		created: 'Oprettet',
+		currentVersion: 'Nuværende version',
 		pagination: 'Showing version %0% to %1% of %2% versions',
-		versions: 'Versions',
-		currentDraftVersion: 'Current draft version',
-		currentPublishedVersion: 'Current published version',
+		versions: 'Versioner',
+		currentDraftVersion: 'Nuværende kladde version',
+		currentPublishedVersion: 'Nuværende udgivet version',
 	},
 	scripts: {
 		editscript: 'Rediger script',
@@ -2368,6 +2368,8 @@ export default {
 			variantName ? `Opret ${name} for ${variantName}` : `Create ${name}`,
 		insertBlock: 'Indsæt Block',
 		labelInlineMode: 'Indsæt på linje med tekst',
+		notExposedLabel: 'ikke oprettet',
+		notExposedDescription: 'Denne Block er endnu ikke oprettet for denne variant',
 	},
 	contentTemplatesDashboard: {
 		whatHeadline: 'Hvad er Indholdsskabeloner?',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -2533,6 +2533,8 @@ export default {
 			variantName ? `Create ${name} for ${variantName}` : `Create ${name}`,
 		insertBlock: 'Insert Block',
 		labelInlineMode: 'Display inline with text',
+		notExposedLabel: 'Draft',
+		notExposedDescription: 'This Block is not yet created for this variant',
 	},
 	contentTemplatesDashboard: {
 		whatHeadline: 'What are Document Blueprints?',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2579,6 +2579,8 @@ export default {
 			variantName ? `Create ${name} for ${variantName}` : `Create ${name}`,
 		insertBlock: 'Insert Block',
 		labelInlineMode: 'Display inline with text',
+		notExposedLabel: 'Draft',
+		notExposedDescription: 'This Block is not yet created for this variant',
 	},
 	contentTemplatesDashboard: {
 		whatHeadline: 'What are Document Blueprints?',

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

@@ -2,7 +2,7 @@ import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.con
 import type { UmbBlockGridWorkspaceOriginData } from '../../workspace/block-grid-workspace.modal-token.js';
 import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../../context/block-grid-entries.context-token.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
@@ -172,6 +172,11 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 				</div>
 			</span>
+			${this.unpublished
+				? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+					></uui-tag>`
+				: nothing}
 		`;
 	}
 
@@ -205,7 +210,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 
 			#exposeButton {
 				width: 100%;
-				min-height: var(--uui-size-layout-3);
+				min-height: var(--uui-size-16);
 			}
 
 			#host {
@@ -239,7 +244,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 				border-color: var(--uui-color-disabled-standalone);
 			}
 
-			:host([unpublished]) #open-part {
+			:host([unpublished]) #open-part #content {
 				opacity: 0.6;
 			}
 
@@ -305,6 +310,13 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 				font-weight: 700;
 			}
 
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
+
 			:host(:not([disabled])) #open-part:hover #icon {
 				color: var(--uui-color-interactive-emphasis);
 			}

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

@@ -1,5 +1,5 @@
 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 } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
 
@@ -31,6 +31,11 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 			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=${this.content}></umb-ufm-render>
+			${this.unpublished
+				? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+					></uui-tag>`
+				: nothing}
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 		</umb-ref-grid-block>`;
 	}
@@ -43,6 +48,13 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
+
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;

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

@@ -511,7 +511,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 					look="secondary"
 					color=${this._contentInvalid ? 'danger' : ''}
 					href=${this._workspaceEditContentPath}>
-					<uui-icon name="icon-edit"></uui-icon>
+					<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
 					${this._contentInvalid
 						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
 						: nothing}

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

@@ -32,9 +32,8 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 
 			#open-part {
 				display: flex;
-				min-height: var(
-					--uui-size-layout-2
-				); /* TODO: We should not do this, but it is a quick fix for now to ensure that the top part of a block gets a minimum height. */
+				min-height: var(--uui-size-16);
+				padding: calc(var(--uui-size-2) + 1px);
 			}
 
 			:host([unpublished]) #open-part {

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

@@ -345,7 +345,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 					look="secondary"
 					color=${this._contentInvalid ? 'danger' : ''}
 					href=${this._workspaceEditContentPath}>
-					<uui-icon name="icon-edit"></uui-icon>
+					<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
 					${this._contentInvalid
 						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
 						: nothing}

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

@@ -10,7 +10,7 @@ import {
 	type UmbApiConstructorArgumentsMethodType,
 } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
@@ -153,7 +153,7 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 					<slot></slot>
 					<slot name="tag"></slot>
 				</button>
-				${this._isOpen === true ? this.#renderInside() : ''}
+				${this._isOpen === true ? this.#renderInside() : nothing}
 			</div>
 		`;
 	}
@@ -168,12 +168,17 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 				</div>
 			</span>
+			${this.unpublished
+				? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+					></uui-tag>`
+				: nothing}
 		`;
 	}
 
 	#renderInside() {
 		if (this._exposed === false) {
-			return html`<uui-button style="position:absolute; inset:0;" @click=${this.#expose}
+			return html`<uui-button id="exposeButton" @click=${this.#expose}
 				><uui-icon name="icon-add"></uui-icon>
 				<umb-localize
 					key="blockEditor_createThisFor"
@@ -201,6 +206,12 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 
 				min-width: 250px;
 			}
+
+			#exposeButton {
+				width: 100%;
+				min-height: var(--uui-size-16);
+			}
+
 			#open-part + * {
 				border-top: 1px solid var(--uui-color-border);
 			}
@@ -218,7 +229,7 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 				border-color: var(--uui-color-disabled-standalone);
 			}
 
-			:host([unpublished]) #open-part {
+			:host([unpublished]) #open-part #content {
 				opacity: 0.6;
 			}
 
@@ -284,6 +295,13 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 				font-weight: 700;
 			}
 
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
+
 			:host(:not([disabled])) #open-part:hover #icon {
 				color: var(--uui-color-interactive-emphasis);
 			}

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

@@ -1,4 +1,4 @@
-import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 
@@ -28,6 +28,11 @@ export class UmbRefListBlockElement extends UmbLitElement {
 			<uui-ref-node standalone 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=${this.content}></umb-ufm-render>
+				${this.unpublished
+					? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+							><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+						></uui-tag>`
+					: nothing}
 			</uui-ref-node>
 		`;
 	}
@@ -37,6 +42,12 @@ export class UmbRefListBlockElement extends UmbLitElement {
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}
+			uui-tag {
+				margin-left: 0.5em;
+				margin-bottom: -0.3em;
+				margin-top: -0.3em;
+				vertical-align: text-top;
+			}
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;