fix inline editing mode for Block List Editor

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

@@ -200,11 +200,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	};
 
 	#renderRefBlock() {
-		return html`<umb-ref-list-block .label=${this._label}></umb-ref-list-block>`;
+		return html`<umb-ref-list-block .label=${this._label} .icon=${this._icon}></umb-ref-list-block>`;
 	}
 
 	#renderInlineBlock() {
-		return html`<umb-inline-list-block .label=${this._label}></umb-inline-list-block>`;
+		return html`<umb-inline-list-block .label=${this._label} .icon=${this._icon}></umb-inline-list-block>`;
 	}
 
 	#renderBlock() {

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

@@ -17,9 +17,12 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	#workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
 	#contentUdi?: string;
 
-	@property({ type: String })
+	@property({ type: String, reflect: false })
 	label?: string;
 
+	@property({ type: String, reflect: false })
+	icon?: string;
+
 	@state()
 	_isOpen = false;
 
@@ -60,27 +63,111 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html` <uui-box>
-			<button
-				slot="header"
-				id="accordion-button"
-				@click=${() => {
-					this._isOpen = !this._isOpen;
-				}}>
-				<uui-icon name="icon-document"></uui-icon>
-				<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
-				<span>${this.label}</span>
-			</button>
-			${this._isOpen === true
-				? html`<umb-block-workspace-view-edit-content-no-router></umb-block-workspace-view-edit-content-no-router>`
-				: ''}
-		</uui-box>`;
+		return html`
+			<div id="host">
+				<button
+					slot="header"
+					id="open-part"
+					tabindex="0"
+					@keydown=${(e: KeyboardEvent) => {
+						if (e.key !== ' ' && e.key !== 'Enter') return;
+						e.preventDefault();
+						e.stopPropagation();
+						this._isOpen = !this._isOpen;
+					}}
+					@click=${() => {
+						this._isOpen = !this._isOpen;
+					}}>
+					<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+					${this.#renderContent()}
+					<slot></slot>
+					<slot name="tag"></slot>
+				</button>
+				${this._isOpen === true
+					? html`<umb-block-workspace-view-edit-content-no-router></umb-block-workspace-view-edit-content-no-router>`
+					: ''}
+			</div>
+		`;
+	}
+
+	#renderContent() {
+		return html`
+			<span id="content">
+				<span id="icon">
+					<uui-icon .name=${this.icon ?? null}></uui-icon>
+				</span>
+				<div id="info">
+					<div id="name">${this.label}</div>
+				</div>
+			</span>
+		`;
 	}
 
 	static override styles = [
 		UmbTextStyles,
 		css`
-			#accordion-button {
+			#host {
+				position: relative;
+				display: block;
+				width: 100%;
+
+				box-sizing: border-box;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface);
+
+				border: 1px solid var(--uui-color-border);
+				transition: border-color 80ms;
+
+				min-width: 250px;
+			}
+			#open-part + * {
+				border-top: 1px solid var(--uui-color-border);
+			}
+			:host([disabled]) #open-part {
+				cursor: default;
+				transition: border-color 80ms;
+			}
+			:host(:not([disabled])) #host:has(#open-part:hover) {
+				border-color: var(--uui-color-border-emphasis);
+			}
+			:host(:not([disabled])) #open-part:hover + * {
+				border-color: var(--uui-color-border-emphasis);
+			}
+			:host([disabled]) #host {
+				border-color: var(--uui-color-disabled-standalone);
+			}
+
+			slot[name='tag'] {
+				flex-grow: 1;
+
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+
+			button {
+				font-size: inherit;
+				font-family: inherit;
+				border: 0;
+				padding: 0;
+				background-color: transparent;
+				text-align: left;
+				color: var(--uui-color-text);
+			}
+
+			#content {
+				align-self: stretch;
+				line-height: normal;
+				display: flex;
+				position: relative;
+				align-items: center;
+			}
+
+			#open-part {
+				color: inherit;
+				text-decoration: none;
+				cursor: pointer;
+
 				display: flex;
 				text-align: left;
 				align-items: center;
@@ -88,7 +175,29 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 				width: 100%;
 				border: none;
 				background: none;
-				padding: 0;
+
+				min-height: var(--uui-size-16);
+				padding: calc(var(--uui-size-2) + 1px);
+			}
+
+			#icon {
+				font-size: 1.2em;
+				margin-left: var(--uui-size-2);
+				margin-right: var(--uui-size-1);
+			}
+
+			:host(:not([disabled])) #open-part:hover #icon {
+				color: var(--uui-color-interactive-emphasis);
+			}
+			:host(:not([disabled])) #open-part:hover #name {
+				color: var(--uui-color-interactive-emphasis);
+			}
+
+			:host([disabled]) #icon {
+				color: var(--uui-color-disabled-contrast);
+			}
+			:host([disabled]) #name {
+				color: var(--uui-color-disabled-contrast);
 			}
 		`,
 	];

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

@@ -11,9 +11,12 @@ import '@umbraco-cms/backoffice/ufm';
 @customElement('umb-ref-list-block')
 export class UmbRefListBlockElement extends UmbLitElement {
 	//
-	@property({ type: String })
+	@property({ type: String, reflect: false })
 	label?: string;
 
+	@property({ type: String, reflect: false })
+	icon?: string;
+
 	@state()
 	_content?: UmbBlockDataType;
 
@@ -46,6 +49,7 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	override render() {
 		return html`
 			<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
+				<uui-icon slot="icon" .name=${this.icon ?? null}></uui-icon>
 				<umb-ufm-render inline .markdown=${this.label} .value=${this._content}></umb-ufm-render>
 			</uui-ref-node>
 		`;

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts

@@ -47,6 +47,8 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
 			this.#blockWorkspace = workspaceContext;
 			this.#tabsStructureHelper.setStructureManager(workspaceContext.content.structure);
+
+			// TODO: Switch to use .setup when Validation is merged. [NL]
 			workspaceContext.content.createPropertyDatasetContext(this);
 			this._observeRootGroups();
 		});
@@ -118,11 +120,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 				? html`<umb-block-workspace-view-edit-tab
 						.managerName=${'content'}
 						.hideSingleGroup=${true}
-						.ownerTabId=${this._activeTabId && this.#tabsStructureHelper.isOwnerChildContainer(this._activeTabId)
-							? this._activeTabId
-							: null}
-						.noTabName=${this._hasRootGroups && this._activeTabName === null}
-						.tabName=${this._activeTabName ?? undefined}>
+						.containerId=${this._activeTabId}>
 					</umb-block-workspace-view-edit-tab>`
 				: ''}
 		`;
@@ -135,6 +133,8 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 				display: block;
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
+
+				padding: calc(var(--uui-size-layout-1));
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts

@@ -83,17 +83,22 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 						class="properties"
 						.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>`
 				: ''}
-			${repeat(
-				this._groups,
-				(group) => group.id,
-				(group) =>
-					html` <uui-box .headline=${group.name || ''}
-						><umb-block-workspace-view-edit-properties
-							.managerName=${this.#managerName}
-							class="properties"
-							.containerId=${group.id}></umb-block-workspace-view-edit-properties
-					></uui-box>`,
-			)}
+			${this.hideSingleGroup && this._groups.length === 1
+				? this.renderGroup(this._groups[0])
+				: repeat(
+						this._groups,
+						(group) => group.id,
+						(group) => html` <uui-box .headline=${group.name}>${this.renderGroup(group)}</uui-box>`,
+					)}
+		`;
+	}
+
+	renderGroup(group: UmbPropertyTypeContainerModel) {
+		return html`
+			<umb-block-workspace-view-edit-properties
+				.managerName=${this.#managerName}
+				class="properties"
+				.containerId=${group.id}></umb-block-workspace-view-edit-properties>
 		`;
 	}