From 01d66875b2ff7a0fb863311ed19093ee3fa36988 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 20 Nov 2024 11:07:30 +0100 Subject: [PATCH] Fix: 17274 (#17578) * remove log * styling of inline editing expose button * mock data for blocks * fix settings values * fix setting config * remove console logs --------- Co-authored-by: Mads Rasmussen --- .../data/document-type/document-type.data.ts | 74 +++++ .../src/mocks/data/document/document.data.ts | 263 ++++++++++++++++++ .../block-grid-block-inline.element.ts | 8 +- .../context/block-grid-manager.context.ts | 2 +- .../block/context/block-entry.context.ts | 43 +-- .../workspace/block-workspace.context.ts | 1 - .../core/modal/context/modal.context.ts | 2 - 7 files changed, 366 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts index 0145765978..e6a54130b6 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts @@ -1825,4 +1825,78 @@ Search for **dt-richTextEditorTinyMce** in the codebase to find the configuratio keepLatestVersionPerDayForDays: null, }, }, + { + allowedTemplates: [], + defaultTemplate: null, + id: 'block-editors-document-type-id', + alias: 'blogPost', + name: 'Block Editors document type', + description: null, + icon: 'icon-item-arrangement', + allowedAsRoot: true, + variesByCulture: true, + variesBySegment: false, + isElement: false, + hasChildren: false, + parent: null, + isFolder: false, + properties: [ + { + id: '18', + container: { id: 'content-group-key' }, + alias: 'blockList', + name: 'Block List', + description: '', + dataType: { id: 'dt-blockList' }, + variesByCulture: false, + variesBySegment: false, + sortOrder: -2, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + { + id: '22', + container: { id: 'content-group-key' }, + alias: 'blockGrid', + name: 'Block Grid', + description: '', + dataType: { id: 'dt-blockGrid' }, + variesByCulture: false, + variesBySegment: false, + sortOrder: -1, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + ], + containers: [ + { + id: 'content-group-key', + parent: null, + name: 'Content', + type: 'Group', + sortOrder: 0, + }, + ], + allowedDocumentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts index ffbeef1e24..06bea9ff34 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts @@ -929,4 +929,267 @@ export const data: Array = [ }, ], }, + { + urls: [ + { + culture: 'en-US', + url: '/', + }, + ], + template: null, + id: 'block-editors-document-id', + parent: null, + documentType: { + id: 'block-editors-document-type-id', + icon: 'icon-document', + }, + hasChildren: false, + noAccess: false, + isProtected: false, + isTrashed: false, + values: [ + { + editorAlias: 'Umbraco.BlockList', + alias: 'blockList', + culture: null, + segment: null, + value: { + layout: { + 'Umbraco.BlockList': [ + { + contentKey: '1234', + settingsKey: '5678', + }, + { + contentKey: '1234-headline', + settingsKey: '1234-headline-settings', + }, + ], + }, + contentData: [ + { + key: '1234', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello world', + }, + ], + }, + { + key: '1234-headline', + contentTypeKey: 'headline-umbraco-demo-block-id', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'headline', + culture: null, + segment: null, + value: 'Hello world', + }, + ], + }, + ], + settingsData: [ + { + key: '5678', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Im in settings', + }, + ], + }, + { + key: '1234-headline-settings', + contentTypeKey: 'headline-settings-demo-block-id', + values: [], + }, + ], + expose: [ + { + contentKey: '1234', + culture: null, + segment: null, + }, + ], + }, + }, + { + editorAlias: 'Umbraco.BlockGrid', + alias: 'blockGrid', + culture: null, + segment: null, + value: { + layout: { + 'Umbraco.BlockGrid': [ + { + contentKey: '1234', + settingsKey: '5678', + columnSpan: 12, + areas: [ + { + key: 'area1_key', + items: [ + { + contentKey: 'a1234', + settingsKey: 'a5678', + columnSpan: 3, + rowSpan: 2, + }, + { + contentKey: 'c1234', + columnSpan: 3, + }, + ], + }, + { + key: 'area2_key', + items: [ + { + contentKey: 'b1234', + settingsKey: 'b5678', + columnSpan: 6, + areas: [], + }, + ], + }, + ], + }, + ], + }, + contentData: [ + { + key: '1234', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Im in settings', + }, + ], + }, + { + key: 'a1234', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello world from area 1', + }, + ], + }, + { + key: 'b1234', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello world from area 2', + }, + ], + }, + { + key: 'c1234', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello CCC from area 1', + }, + ], + }, + ], + settingsData: [ + { + key: '5678', + contentTypeKey: 'all-property-editors-document-type-id', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello world settings', + }, + ], + }, + { + key: 'a5678', + contentTypeKey: 'all-property-editors-document-type-id', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello world from area 1 settings', + }, + ], + }, + { + key: 'b5678', + contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + values: [ + { + editorAlias: 'Umbraco.TextBox', + alias: 'elementProperty', + culture: null, + segment: null, + value: 'Hello world from area 2 settings', + }, + ], + }, + ], + expose: [ + { + contentKey: '1234', + culture: null, + segment: null, + }, + ], + }, + }, + ], + variants: [ + { + state: DocumentVariantStateModel.PUBLISHED, + publishDate: '2023-02-06T15:31:51.354764', + culture: 'en-US', + segment: null, + name: 'All Block Editors', + createDate: '2023-02-06T15:31:46.876902', + updateDate: '2023-02-06T15:31:51.354764', + }, + { + state: DocumentVariantStateModel.PUBLISHED, + publishDate: '2023-02-06T15:31:51.354764', + culture: 'da-dk', + segment: null, + name: 'Alle blok redigeringer', + createDate: '2023-02-06T15:31:46.876902', + updateDate: '2023-02-06T15:31:51.354764', + }, + ], + }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts index f57aa3857f..72a3dd82a5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts @@ -157,7 +157,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement { -
${this.#renderInside()}
+ ${this.#renderInside()} `; } @@ -184,10 +184,12 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement { .args=${[this._ownerContentTypeName, this._variantName]}>`; } else { - return html` + - `; + + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts index cd4b63e0a5..fc0e104b2e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts @@ -71,7 +71,7 @@ export class UmbBlockGridManagerContext< override setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { this.#initAppUrl.then(() => { // we await initAppUrl, So the appUrl begin here is available when retrieving the layoutStylesheet. - this._editorConfiguration.setValue(configs); + super.setEditorConfiguration(configs); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts index 9517b5c320..715fe3a6b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts @@ -91,7 +91,7 @@ export abstract class UmbBlockEntryContext< _layout = new UmbObjectState(undefined); public readonly layout = this._layout.asObservable(); public readonly contentKey = this._layout.asObservablePart((x) => x?.contentKey); - public readonly settingsKey = this._layout.asObservablePart((x) => x?.settingsKey); + public readonly settingsKey = this._layout.asObservablePart((x) => (x ? (x.settingsKey ?? null) : undefined)); public readonly unique = this._layout.asObservablePart((x) => x?.contentKey); #label = new UmbStringState(''); @@ -218,7 +218,7 @@ export abstract class UmbBlockEntryContext< #settings = new UmbObjectState(undefined); //public readonly settings = this.#settings.asObservable(); - protected readonly _settingsValueArray = this.#content.asObservablePart((x) => x?.values); + protected readonly _settingsValueArray = this.#settings.asObservablePart((x) => x?.values); private readonly settingsDataContentTypeKey = this.#settings.asObservablePart((x) => x ? (x.contentTypeKey ?? undefined) : null, ); @@ -296,7 +296,6 @@ export abstract class UmbBlockEntryContext< this.settingsDataContentTypeKey, (settingsElementTypeKey) => { if (!settingsElementTypeKey) return; - this.#getSettingsStructure(settingsElementTypeKey); }, null, @@ -335,17 +334,17 @@ export abstract class UmbBlockEntryContext< ); this.observe( - observeMultiple([this.layout, this.blockType]), - ([layout, blockType]) => { - if (!this.#contentKey || !layout || !blockType) return; - if (layout.settingsKey == null && blockType.settingsElementTypeKey) { + observeMultiple([this.settingsKey, this.blockType]), + ([settingsKey, blockType]) => { + if (!this.#contentKey || settingsKey === undefined || !blockType) return; + if (settingsKey == null && blockType.settingsElementTypeKey) { // We have a settings ElementType in config but not in data, so lets create the scaffold for that: [NL] const settingsData = this._manager!.createBlockSettingsData(blockType.contentElementTypeKey); // Yes its on purpose we use the contentElementTypeKey here, as this is our identifier for a BlockType. [NL] this._manager?.setOneSettings(settingsData); this._layout.update({ settingsKey: settingsData.key } as Partial); - } else if (layout.settingsKey && blockType.settingsElementTypeKey === undefined) { + } else if (settingsKey && blockType.settingsElementTypeKey === undefined) { // We no longer have settings ElementType in config. So we remove the settingsData and settings key from the layout. [NL] - this._manager?.removeOneSettings(layout.settingsKey); + this._manager?.removeOneSettings(settingsKey); this._layout.update({ settingsKey: undefined } as Partial); } }, @@ -464,18 +463,22 @@ export abstract class UmbBlockEntryContext< ); } #observeSettingsData() { - if (!this._manager) return; // observe settings: - const settingsKey = this._layout.value?.settingsKey; - if (settingsKey) { - this.observe( - this._manager.settingsOf(settingsKey), - (settings) => { - this.#settings.setValue(settings); - }, - 'observeSettings', - ); - } + this.observe( + this._manager ? this.settingsKey : undefined, + (settingsKey) => { + if (settingsKey) { + this.observe( + this._manager?.settingsOf(settingsKey), + (settings) => { + this.#settings.setValue(settings); + }, + 'observeSettings', + ); + } + }, + 'observeSettingsKey', + ); } abstract _gotContentType(contentType: UmbContentTypeModel | undefined): void; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index dc7f737b0e..f807bc2fb1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -249,7 +249,6 @@ export class UmbBlockWorkspaceContext