Block editors: adds prefix to workspace title (closes #20588)

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace-editor.element.ts

@@ -1,8 +1,6 @@
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from './index.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { customElement, css, html, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-block-workspace-editor')
 export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
@@ -11,10 +9,9 @@ export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
 		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
 			if (context) {
 				this.observe(
-					observeMultiple([context.isNew, context.name]),
-					([isNew, name]) => {
-						this._headline =
-							this.localize.term(isNew ? 'general_add' : 'general_edit') + ' ' + this.localize.string(name);
+					context.name,
+					(name) => {
+						this._headline = this.localize.string(name);
 					},
 					'observeOwnerContentElementTypeName',
 				);
@@ -28,11 +25,10 @@ export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
 	private _headline: string = '';
 
 	override render() {
-		return html`<umb-workspace-editor headline=${this._headline}> </umb-workspace-editor> `;
+		return html`<umb-workspace-editor headline=${this._headline}></umb-workspace-editor>`;
 	}
 
 	static override readonly styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: block;

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts

@@ -1,4 +1,4 @@
 import type { UmbBlockDataModel, UmbBlockDataValueModel, UmbBlockLayoutBaseModel } from '../types.js';
 import { UMB_BLOCK_ENTRIES_CONTEXT, UMB_BLOCK_MANAGER_CONTEXT } from '../context/index.js';
 import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element.js';
 import { UmbBlockElementManager } from './block-element-manager.js';
@@ -113,8 +113,8 @@
 
 		this.observe(
 			observeMultiple([this.content.values, this.settings.values]),
-			async ([contentValues]) => {
-				this.#renderLabel(contentValues);
+			async ([contentValues, settingsValues]) => {
+				this.#renderLabel(contentValues, settingsValues);
 			},
 			'observeContentForLabelRender',
 		);
@@ -243,24 +243,37 @@
 	#gotLabel(label: string | undefined) {
 		if (label) {
 			this.#labelRender.markdown = label;
-			this.#renderLabel(this.content.getValues());
+			this.#renderLabel(this.content.getValues(), this.settings.getValues());
 		}
 	}
 
-	async #renderLabel(contentValues: Array<UmbBlockDataValueModel> | undefined) {
+	async #renderLabel(
+		contentValues: Array<UmbBlockDataValueModel> | undefined,
+		settingsValues: Array<UmbBlockDataValueModel> | undefined,
+	) {
 		const valueObject = {} as Record<string, unknown>;
 		if (contentValues) {
 			for (const property of contentValues) {
 				valueObject[property.alias] = property.value;
 			}
 		}
 
+		if (settingsValues) {
+			valueObject['$settings'] = settingsValues;
+		}
+
+		// TODO: Look to add support for `$index`, requires wiring up the block-entry with the workspace. [LK]
+		//valueObject['$index'] = 0;
+
 		this.#labelRender.value = valueObject;
+
 		// Await one animation frame:
 		await new Promise((resolve) => requestAnimationFrame(() => resolve(true)));
-		const result = this.#labelRender.toString();
-		this.#name.setValue(result);
-		this.view.setTitle(result);
+		const prefix = this.getIsNew() === true ? '#general_add' : '#general_edit';
+		const label = this.#labelRender.toString();
+		const title = `${prefix} ${label}`;
+		this.#name.setValue(title);
+		this.view.setTitle(title);
 	}
 
 	#allowNavigateAway = false;