hideSingleGroup

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

@@ -2,9 +2,10 @@ import { UMB_BLOCK_LIST_CONTEXT } from '../../index.js';
 import { UMB_BLOCK_WORKSPACE_ALIAS, UMB_BLOCK_WORKSPACE_CONTEXT } from '../../../block/index.js';
 import { UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import '../../../block/workspace/views/edit/block-workspace-view-edit-no-router.element.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 /**
  * @element umb-inline-list-block
@@ -15,6 +16,12 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	#workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
 	#contentUdi?: string;
 
+	@state()
+	_label = '';
+
+	@state()
+	_isOpen = false;
+
 	constructor() {
 		super();
 
@@ -28,6 +35,9 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 				},
 				'observeContentUdi',
 			);
+			this.observe(blockContext.label, (label) => {
+				this._label = label;
+			});
 		});
 		this.observe(umbExtensionsRegistry.getByTypeAndAlias('workspace', UMB_BLOCK_WORKSPACE_ALIAS), (manifest) => {
 			if (manifest) {
@@ -53,8 +63,37 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-block-workspace-view-edit-no-router></umb-block-workspace-view-edit-no-router>`;
+		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-no-router></umb-block-workspace-view-edit-no-router>`
+				: ''}
+		</uui-box>`;
 	}
+
+	static styles = [
+		css`
+			#accordion-button {
+				display: flex;
+				text-align: left;
+				align-items: center;
+				justify-content: flex-start;
+				width: 100%;
+				border: none;
+				background: none;
+				padding: 0;
+			}
+		`,
+	];
 }
 
 export default UmbInlineListBlockElement;

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

@@ -110,6 +110,7 @@ export class UmbBlockWorkspaceViewEditNoRouterElement extends UmbLitElement impl
 				: ''}
 			${this._activeTabId !== undefined
 				? html`<umb-block-workspace-view-edit-tab
+						.hideSingleGroup=${true}
 						.ownerTabId=${this._activeTabId && this._tabsStructureHelper.isOwnerContainer(this._activeTabId)
 							? this._activeTabId
 							: undefined}

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

@@ -42,6 +42,13 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 		this._groupStructureHelper.setOwnerId(value);
 	}
 
+	/**
+	 * If true, the group box will be hidden, if we are to only represents one group.
+	 * This is used by Inline Editing Mode of Block List Editor.
+	 */
+	@property({ type: Boolean, reflect: false })
+	hideSingleGroup = false;
+
 	_groupStructureHelper = new UmbContentTypeContainerStructureHelper<UmbContentTypeModel>(this);
 
 	@state()
@@ -66,30 +73,29 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 
 	render() {
 		return html`
-			${this._hasProperties
-				? html`
-						<uui-box>
-							<umb-block-workspace-view-edit-properties
-								class="properties"
-								container-type="Tab"
-								container-name=${this.tabName || ''}></umb-block-workspace-view-edit-properties>
-						</uui-box>
-				  `
-				: ''}
+			${this._hasProperties ? this.#renderPart(this._tabName) : ''}
 			${repeat(
 				this._groups,
 				(group) => group.name,
-				(group) =>
-					html`<uui-box .headline=${group.name || ''}>
-						<umb-block-workspace-view-edit-properties
-							class="properties"
-							container-type="Group"
-							container-name=${group.name || ''}></umb-block-workspace-view-edit-properties>
-					</uui-box>`,
+				(group) => this.#renderPart(group.name, group.name),
 			)}
 		`;
 	}
 
+	#renderPart(groupName: string | null | undefined, boxName?: string | null | undefined) {
+		return this.hideSingleGroup && this._groups.length === 1
+			? html` <umb-block-workspace-view-edit-properties
+					class="properties"
+					container-type="Group"
+					container-name=${groupName || ''}></umb-block-workspace-view-edit-properties>`
+			: html` <uui-box .headline=${boxName || ''}
+					><umb-block-workspace-view-edit-properties
+						class="properties"
+						container-type="Group"
+						container-name=${groupName || ''}></umb-block-workspace-view-edit-properties
+			  ></uui-box>`;
+	}
+
 	static styles = [
 		UmbTextStyles,
 		css`