update grid and rte elements

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

@@ -33,7 +33,11 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 			#open-part {
 				min-height: var(
 					--uui-size-layout-2
-				); /* 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. */
+				); /* 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. */
+			}
+
+			:host([unpublished]) #open-part {
+				opacity: 0.6;
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts

@@ -1,4 +1,5 @@
 import { manifest as blockGridSchemaManifest } from './Umbraco.BlockGrid.js';
+import { UmbBlockValueResolver } from '@umbraco-cms/backoffice/block';
 
 export const UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS = 'Umbraco.BlockGrid';
 
@@ -66,4 +67,13 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 	},
 	blockGridSchemaManifest,
+	{
+		type: 'propertyValueResolver',
+		alias: 'Umb.PropertyValueResolver.Block',
+		name: 'Block Value Resolver',
+		api: UmbBlockValueResolver,
+		meta: {
+			editorAlias: 'Umbraco.BlockGrid',
+		},
+	},
 ];

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

@@ -38,6 +38,9 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 	@state()
 	_icon?: string;
 
+	@state()
+	_exposed?: boolean;
+
 	@state()
 	_workspaceEditContentPath?: string;
 
@@ -93,6 +96,14 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			},
 			null,
 		);
+		this.observe(
+			this.#context.hasExpose,
+			(exposed) => {
+				this.#updateBlockViewProps({ unpublished: !exposed });
+				this._exposed = exposed;
+			},
+			null,
+		);
 		// Data props:
 		this.observe(
 			this.#context.layout,
@@ -167,7 +178,12 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 	}
 
 	#renderRefBlock() {
-		return html`<umb-ref-rte-block .label=${this._label} .icon=${this._icon}></umb-ref-rte-block>`;
+		return html`<umb-ref-rte-block
+			.label=${this._label}
+			.icon=${this._icon}
+			.unpublished=${!this._exposed}
+			.content=${this._blockViewProps.content}
+			.settings=${this._blockViewProps.settings}></umb-ref-rte-block>`;
 	}
 
 	#renderBlock() {

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

@@ -1,4 +1,4 @@
-import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
+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';
 
@@ -14,6 +14,12 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	@property({ type: String })
 	icon?: string;
 
+	@property({ type: Boolean, reflect: true })
+	unpublished?: boolean;
+
+	@property({ attribute: false })
+	content?: UmbBlockDataType;
+
 	@state()
 	_workspaceEditPath?: string;
 
@@ -32,9 +38,10 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-ref-node standalone .name=${this.label ?? ''} href=${this._workspaceEditPath ?? '#'}
-			><uui-icon slot="icon" .name=${this.icon ?? null}></uui-icon
-		></uui-ref-node>`;
+		return html`<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
+			<uui-icon slot="icon" .name=${this.icon ?? null}></uui-icon>
+			<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
+		</uui-ref-node>`;
 	}
 
 	static override styles = [
@@ -42,6 +49,9 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}
+			:host([unpublished]) uui-ref-node {
+				opacity: 0.6;
+			}
 		`,
 	];
 }