UFM: Make Block Settings data available (#19686)

* Adds support to UFM for Block settings data

Fixes #17619

* Code/markup tidy-up

makes use of Lit's `when` directive
to simplify the conditional.

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

@@ -1,25 +1,19 @@
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../block-grid-entry/constants.js';
 import type { UmbBlockGridWorkspaceOriginData } from '../../workspace/block-grid-workspace.modal-token.js';
 import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../block-grid-entries/constants.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
-import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
-import {
-	type UMB_BLOCK_WORKSPACE_CONTEXT,
-	UMB_BLOCK_WORKSPACE_ALIAS,
-	type UmbBlockDataType,
-} from '@umbraco-cms/backoffice/block';
+import { css, customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import {
-	UmbExtensionApiInitializer,
-	UmbExtensionsApiInitializer,
-	type UmbApiConstructorArgumentsMethodType,
-} from '@umbraco-cms/backoffice/extension-api';
-import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbDataPathPropertyValueQuery } from '@umbraco-cms/backoffice/validation';
+import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_BLOCK_WORKSPACE_ALIAS } from '@umbraco-cms/backoffice/block';
+import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
+import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import type { UMB_BLOCK_WORKSPACE_CONTEXT, UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 
 const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
 	return [{ manifest }];
@@ -50,6 +44,9 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
 	@state()
 	_inlineProperty?: UmbPropertyTypeModel;
 
@@ -176,20 +173,23 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	}
 
 	#renderBlockInfo() {
+		const blockValue = { ...this.content, $settings: this.settings };
 		return html`
 			<span id="content">
 				<span id="icon">
 					<umb-icon .name=${this.icon}></umb-icon>
 				</span>
 				<div id="info">
-					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
+					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 				</div>
 			</span>
-			${this.unpublished
-				? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+			${when(
+				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-tag>`,
+			)}
 		`;
 	}
 

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, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
 
@@ -23,19 +23,27 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
 	override render() {
-		return html`<umb-ref-grid-block
-			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}
-			<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
-		</umb-ref-grid-block>`;
+		const blockValue = { ...this.content, $settings: this.settings };
+		return html`
+			<umb-ref-grid-block
+				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=${blockValue}></umb-ufm-render>
+				${when(
+					this.unpublished,
+					() =>
+						html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+							><umb-localize key="blockEditor_notExposedLabel"></umb-localize
+						></uui-tag>`,
+				)}
+				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
+			</umb-ref-grid-block>
+		`;
 	}
 
 	static override styles = [

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

@@ -1,21 +1,15 @@
 import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
-import {
-	UMB_BLOCK_WORKSPACE_ALIAS,
-	type UmbBlockDataType,
-	type UMB_BLOCK_WORKSPACE_CONTEXT,
-} from '@umbraco-cms/backoffice/block';
-import {
-	UmbExtensionApiInitializer,
-	UmbExtensionsApiInitializer,
-	type UmbApiConstructorArgumentsMethodType,
-} from '@umbraco-cms/backoffice/extension-api';
+import { UMB_BLOCK_WORKSPACE_ALIAS } from '@umbraco-cms/backoffice/block';
+import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbBlockDataType, UMB_BLOCK_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/block';
 
 import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
-import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
 
 const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
 	return [{ manifest }];
@@ -42,6 +36,9 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
 	@state()
 	private _exposed?: boolean;
 
@@ -156,20 +153,23 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	}
 
 	#renderBlockInfo() {
+		const blockValue = { ...this.content, $settings: this.settings };
 		return html`
 			<span id="content">
 				<span id="icon">
 					<umb-icon .name=${this.icon}></umb-icon>
 				</span>
 				<div id="info">
-					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
+					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 				</div>
 			</span>
-			${this.unpublished
-				? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
+			${when(
+				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-tag>`,
+			)}
 		`;
 	}
 

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, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 
@@ -20,19 +20,25 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
 	@property({ attribute: false })
 	config?: UmbBlockEditorCustomViewConfiguration;
 
 	override render() {
+		const blockValue = { ...this.content, $settings: this.settings };
 		return html`
 			<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-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
+				${when(
+					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-tag>`,
+				)}
 			</uui-ref-node>
 		`;
 	}

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

@@ -1,6 +1,7 @@
-import { UMB_BLOCK_ENTRY_CONTEXT, type UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 import { css, customElement, html, property, state } 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';
 
 /**
  * @element umb-ref-rte-block
@@ -20,6 +21,9 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
 	@state()
 	_workspaceEditPath?: string;
 
@@ -38,10 +42,11 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	}
 
 	override render() {
+		const blockValue = { ...this.content, $settings: this.settings };
 		return html`
 			<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
 				<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-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 			</uui-ref-node>
 		`;
 	}