diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts index f71818c011..7262a978f1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts @@ -3,8 +3,6 @@ import { html, css, customElement, property, state } from '@umbraco-cms/backoffi import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block'; -import '../ref-list-block/index.js'; -import '../inline-list-block/index.js'; /** * @element umb-property-editor-ui-block-grid-block diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/index.ts new file mode 100644 index 0000000000..192623405a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/index.ts @@ -0,0 +1 @@ +export * from './ref-grid-block.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts new file mode 100644 index 0000000000..d932509615 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts @@ -0,0 +1,51 @@ +import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block'; +import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +/** + * @element umb-ref-grid-block + */ +@customElement('umb-ref-grid-block') +export class UmbRefGridBlockElement extends UmbLitElement { + // + @property({ type: String }) + label?: string; + + @state() + _workspaceEditPath?: string; + + constructor() { + super(); + + this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => { + this.observe( + context.workspaceEditPath, + (workspaceEditPath) => { + this._workspaceEditPath = workspaceEditPath; + }, + 'observeWorkspaceEditPath', + ); + }); + } + + render() { + // href=${this._workspaceEditPath ?? '#'} + return html``; + } + + static styles = [ + css` + uui-ref-node { + min-height: var(--uui-size-16); + } + `, + ]; +} + +export default UmbRefGridBlockElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-ref-grid-block': UmbRefGridBlockElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts index 469c626295..7eb9d428ef 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts @@ -3,6 +3,7 @@ import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block'; import { html, customElement, state, repeat, css, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import '../../components/block-grid-block/block-grid-block.element.js'; /** * @element umb-property-editor-ui-block-grid-entries @@ -43,8 +44,8 @@ export class UmbPropertyEditorUIBlockGridEntriesElement extends UmbLitElement { (layoutEntry, index) => html` - - `, + + `, )} { + // UMB_BLOCK_LIST_ENTRY_CONTEXT + this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => { this.observe( context.workspaceEditPath, (workspaceEditPath) => {