From d2b2a8efc20b738bcb1c4bb7484ac0ca0f07042d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 26 Aug 2024 20:36:05 +0200 Subject: [PATCH 1/5] fix broken create block in workspace experience --- .../block/block-grid/context/block-grid-entries.context.ts | 1 + .../block/block-rte/context/block-rte-entries.context.ts | 1 + .../components/block-type-card/block-type-card.element.ts | 2 +- .../modals/block-catalogue/block-catalogue-modal.element.ts | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts index b40bf030ed..6cb5c0d2c1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts @@ -133,6 +133,7 @@ export class UmbBlockGridEntriesContext blockGroups: this._manager?.getBlockGroups() ?? [], openClipboard: routingInfo.view === 'clipboard', originData: { index: index, areaKey: this.#areaKey, parentUnique: this.#parentUnique }, + createBlockInWorkspace: true, }, }; }) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts index 41acf53cb6..ae7f551326 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts @@ -41,6 +41,7 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext< blockGroups: [], openClipboard: routingInfo.view === 'clipboard', originData: {}, + createBlockInWorkspace: true, }, }; }) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts index 8f23bb3ffb..7acba0d8be 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts @@ -21,7 +21,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement { (x) => x.unique, ); - @property({ type: String, attribute: false }) + @property({ type: String }) href?: string; @property({ type: String, attribute: false }) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index 85c3a67e63..6d735b18f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -140,7 +140,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< .backgroundColor=${block.backgroundColor} .contentElementTypeKey=${block.contentElementTypeKey} @open=${() => this.#chooseBlock(block.contentElementTypeKey)} - ?href=${this._workspacePath + .href=${this._workspacePath ? `${this._workspacePath}create/${block.contentElementTypeKey}` : undefined}> From 3c7efe447bb3f828edff7960045ac53375a7d82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 26 Aug 2024 22:04:50 +0200 Subject: [PATCH 2/5] consider mount of properties for create in workspace --- .../block/context/block-manager.context.ts | 4 +++ .../block-catalogue-modal.element.ts | 30 ++++++++++++++----- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts index d6be254013..0b3d26e95b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts @@ -148,6 +148,10 @@ export abstract class UmbBlockManagerContext< getContentTypeNameOf(contentTypeKey: string) { return this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.name; } + getContentTypeHasProperties(contentTypeKey: string) { + const properties = this.#contentTypes.getValue().find((x) => x.unique === contentTypeKey)?.properties; + return properties ? properties.length > 0 : false; + } blockTypeOf(contentTypeKey: string) { return this.#blockTypes.asObservablePart((source) => source.find((x) => x.contentElementTypeKey === contentTypeKey), diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts index 6d735b18f6..92de7b54d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts @@ -1,6 +1,10 @@ import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js'; import type { UmbBlockTypeGroup, UmbBlockTypeWithGroupKey } from '@umbraco-cms/backoffice/block-type'; -import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue } from '@umbraco-cms/backoffice/block'; +import { + UMB_BLOCK_MANAGER_CONTEXT, + type UmbBlockCatalogueModalData, + type UmbBlockCatalogueModalValue, +} from '@umbraco-cms/backoffice/block'; import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UMB_MODAL_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @@ -14,8 +18,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue > { - // - private _search = ''; + #search = ''; private _groupedBlocks: Array<{ name?: string; blocks: Array }> = []; @@ -28,6 +31,9 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< @state() private _filtered: Array<{ name?: string; blocks: Array }> = []; + @state() + _manager?: typeof UMB_BLOCK_MANAGER_CONTEXT.TYPE; + constructor() { super(); @@ -49,6 +55,10 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< }); } }); + + this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => { + this._manager = manager; + }); } override connectedCallback() { @@ -71,10 +81,10 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< } #updateFiltered() { - if (this._search.length === 0) { + if (this.#search.length === 0) { this._filtered = this._groupedBlocks; } else { - const search = this._search.toLowerCase(); + const search = this.#search.toLowerCase(); this._filtered = this._groupedBlocks.map((group) => { return { ...group, blocks: group.blocks.filter((block) => block.label?.toLocaleLowerCase().includes(search)) }; }); @@ -82,7 +92,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< } #onSearch(e: UUIInputEvent) { - this._search = e.target.value as string; + this.#search = e.target.value as string; this.#updateFiltered(); } @@ -98,7 +108,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement< override render() { return html` - ${this.#renderViews()} ${this._openClipboard ? this.#renderClipboard() : this.#renderCreateEmpty()} + ${this.#renderViews()}${this.#renderMain()}
this.#chooseBlock(block.contentElementTypeKey)} - .href=${this._workspacePath + .href=${this._workspacePath && this._manager!.getContentTypeHasProperties(block.contentElementTypeKey) ? `${this._workspacePath}create/${block.contentElementTypeKey}` : undefined}> From f2f6ab90eb0a25ede8cf93f1ba7d147d6c10a06e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 26 Aug 2024 22:12:28 +0200 Subject: [PATCH 3/5] grid onSubmit handler --- .../context/block-grid-entries.context.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts index 6cb5c0d2c1..a1d19fb1db 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts @@ -137,6 +137,26 @@ export class UmbBlockGridEntriesContext }, }; }) + .onSubmit(async (value, data) => { + if (value?.create && data) { + const created = await this.create( + value.create.contentElementTypeKey, + // We can parse an empty object, cause the rest will be filled in by others. + {} as any, + data.originData as UmbBlockGridWorkspaceOriginData, + ); + if (created) { + this.insert( + created.layout, + created.content, + created.settings, + data.originData as UmbBlockGridWorkspaceOriginData, + ); + } else { + throw new Error('Failed to create block'); + } + } + }) .observeRouteBuilder((routeBuilder) => { // TODO: Does it make any sense that this is a state? Check usage and confirm. [NL] this._catalogueRouteBuilderState.setValue(routeBuilder); From 2a2684430d86ac57890d4ed9b01f08edd392b88e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 26 Aug 2024 22:12:43 +0200 Subject: [PATCH 4/5] rte updates for createInWorkspace update --- .../context/block-rte-entries.context.ts | 29 +++++++++++++++---- .../context/block-rte-manager.context.ts | 8 ++--- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts index ae7f551326..ac2501c80a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts @@ -4,7 +4,6 @@ import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js'; import { UMB_BLOCK_RTE_WORKSPACE_MODAL, type UmbBlockRteWorkspaceOriginData, - type UmbBlockRteWorkspaceData, } from '../workspace/block-rte-workspace.modal-token.js'; import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js'; import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api'; @@ -45,6 +44,26 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext< }, }; }) + .onSubmit(async (value, data) => { + if (value?.create && data) { + const created = await this.create( + value.create.contentElementTypeKey, + // We can parse an empty object, cause the rest will be filled in by others. + {} as any, + data.originData as UmbBlockRteWorkspaceOriginData, + ); + if (created) { + this.insert( + created.layout, + created.content, + created.settings, + data.originData as UmbBlockRteWorkspaceOriginData, + ); + } else { + throw new Error('Failed to create block'); + } + } + }) .observeRouteBuilder((routeBuilder) => { this._catalogueRouteBuilderState.setValue(routeBuilder); }); @@ -115,10 +134,10 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext< async create( contentElementTypeKey: string, partialLayoutEntry?: Omit, - modalData?: UmbBlockRteWorkspaceData, + originData?: UmbBlockRteWorkspaceOriginData, ) { await this._retrieveManager; - return this._manager?.create(contentElementTypeKey, partialLayoutEntry, modalData); + return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData); } // insert Block? @@ -127,10 +146,10 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext< layoutEntry: UmbBlockRteLayoutModel, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, - modalData: UmbBlockRteWorkspaceData, + originData: UmbBlockRteWorkspaceOriginData, ) { await this._retrieveManager; - return this._manager?.insert(layoutEntry, content, settings, modalData) ?? false; + return this._manager?.insert(layoutEntry, content, settings, originData) ?? false; } // create Block? diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts index ae67db7ac0..8f7e86d2a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts @@ -1,5 +1,5 @@ import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js'; -import type { UmbBlockRteWorkspaceData } from '../index.js'; +import type { UmbBlockRteWorkspaceOriginData } from '../index.js'; import type { UmbBlockDataType } from '../../block/types.js'; import type { Editor } from '@umbraco-cms/backoffice/external/tinymce'; import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block'; @@ -36,7 +36,7 @@ export class UmbBlockRteManagerContext< partialLayoutEntry?: Omit, // This property is used by some implementations, but not used in this. // eslint-disable-next-line @typescript-eslint/no-unused-vars - originData?: UmbBlockRteWorkspaceData, + originData?: UmbBlockRteWorkspaceOriginData, ) { const data = super.createBlockData(contentElementTypeKey, partialLayoutEntry); @@ -57,13 +57,13 @@ export class UmbBlockRteManagerContext< layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, - modalData: UmbBlockRteWorkspaceData, + originData: UmbBlockRteWorkspaceOriginData, ) { if (!this.#editor) return false; this._layouts.appendOne(layoutEntry); - this.insertBlockData(layoutEntry, content, settings, modalData); + this.insertBlockData(layoutEntry, content, settings, originData); if (layoutEntry.displayInline) { this.#editor.selection.setContent( From 84f222cf4830b58328c97c93c6a085a9f378f473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 26 Aug 2024 22:26:21 +0200 Subject: [PATCH 5/5] correct comment --- .../src/packages/core/property/property/property.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts index f617dc0c4d..646e15b699 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts @@ -332,7 +332,7 @@ export class UmbPropertyElement extends UmbLitElement { if ('checkValidity' in this._element) { const dataPath = this.dataPath; this.#controlValidator = new UmbFormControlValidator(this, this._element as any, dataPath); - // We trust blindly that the dataPath is available at this stage. [NL] + // We trust blindly that the dataPath will be present at this stage and not arrive later than this moment. [NL] if (dataPath) { this.#validationMessageBinder = new UmbBindServerValidationToFormControl( this,