#93 Fix nested preview

rickbutterfield · Jan 28, 2025 · 370031a · 370031a
1 parent 194ad39
commit 370031a
Show file tree

Hide file tree

Showing 13 changed files with 488 additions and 370 deletions.
diff --git a/.github/README.md b/.github/README.md
@@ -22,13 +22,13 @@ The Umbraco v15 version of this package is [available via NuGet](https://www.nug
 To install the package, you can use either .NET CLI:
 
 ```
-dotnet add package Umbraco.Community.BlockPreview --version 3.2.2
+dotnet add package Umbraco.Community.BlockPreview --version 3.2.3
 ```
 
 or the NuGet Package Manager:
 
 ```
-Install-Package Umbraco.Community.BlockPreview -Version 3.2.2
+Install-Package Umbraco.Community.BlockPreview -Version 3.2.3
 ```
 
 ## Setup

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-3.2.2
+3.2.3
diff --git a/src/Umbraco.Cms.15.x/uSync/v15/DataTypes/BlockGridContent.config b/src/Umbraco.Cms.15.x/uSync/v15/DataTypes/BlockGridContent.config
@@ -79,7 +79,7 @@
       "backgroundColor": null,
       "columnSpanOptions": [],
       "contentElementTypeKey": "964feee4-efb3-4676-91a0-b960f26e9d92",
-      "editorSize": "medium",
+      "editorSize": "full",
       "forceHideContentEditorInOverlay": false,
       "groupKey": "be98af5c-aa3d-4549-bcec-9dda0c051145",
       "iconColor": null,

diff --git a/src/Umbraco.Community.BlockPreview.UI/package.json b/src/Umbraco.Community.BlockPreview.UI/package.json
@@ -1,7 +1,7 @@
 {
   "name": "assets",
   "private": true,
-  "version": "3.2.2",
+  "version": "3.2.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/Umbraco.Community.BlockPreview.UI/public/umbraco-package.json b/src/Umbraco.Community.BlockPreview.UI/public/umbraco-package.json
@@ -2,7 +2,7 @@
   "$schema": "../umbraco-package-schema.json",
   "name": "Umbraco.Community.BlockPreview",
   "id": "Umbraco.Community.BlockPreview",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "allowTelemetry": true,
   "extensions": [
     {

diff --git a/...braco.Community.BlockPreview.UI/src/blockEditor/block-grid-preview.custom-view.element.ts b/...braco.Community.BlockPreview.UI/src/blockEditor/block-grid-preview.custom-view.element.ts
@@ -1,12 +1,14 @@
+import { UMB_BLOCK_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT, UMB_BLOCK_GRID_MANAGER_CONTEXT, UmbBlockGridValueModel } from "@umbraco-cms/backoffice/block-grid";
-import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/document";
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT, UmbDocumentWorkspaceContext } from "@umbraco-cms/backoffice/document";
 import { css, customElement, html, ifDefined, property, state, unsafeHTML } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { observeMultiple } from "@umbraco-cms/backoffice/observable-api";
 import { UMB_PROPERTY_DATASET_CONTEXT } from "@umbraco-cms/backoffice/property";
 import { tryExecuteAndNotify } from "@umbraco-cms/backoffice/resources";
 import { BlockPreviewService, PreviewGridBlockData } from "../api";
+import BlockPreviewContext from '../context/block-preview.context';
 import { BLOCK_PREVIEW_CONTEXT } from "../context/block-preview.context-token";
 
 const elementName = "block-grid-preview";
@@ -16,6 +18,9 @@ export class BlockGridPreviewCustomView
     extends UmbLitElement
     implements UmbBlockEditorCustomViewElement {
 
+    #blockPreviewContext?: BlockPreviewContext;
+    #documentWorkspaceContext?: UmbDocumentWorkspaceContext;
+
     @state()
     private _htmlMarkup: string = '';
 
@@ -28,15 +33,15 @@ export class BlockGridPreviewCustomView
     private _styleElement?: HTMLLinkElement;
 
     private _blockContext = {
-        unique: '',
-        documentTypeUnique: '',
-        contentUdi: '',
-        settingsUdi: '',
-        blockEditorAlias: '',
-        culture: '',
-        workspaceEditContentPath: '',
-        contentElementTypeAlias: '',
-        contentElementTypeKey: ''
+        unique: "",
+        documentTypeUnique: "",
+        contentUdi: "",
+        settingsUdi: "",
+        blockEditorAlias: "",
+        culture: "",
+        workspaceEditContentPath: "",
+        contentElementTypeAlias: "",
+        contentElementTypeKey: ""
     };
 
     private _blockGridValue: UmbBlockGridValueModel = {
@@ -61,7 +66,11 @@ export class BlockGridPreviewCustomView
 
     constructor() {
         super();
-        this.#setupContextObservers();
+
+        this.consumeContext(BLOCK_PREVIEW_CONTEXT, (context) => {
+            this.#blockPreviewContext = context;
+            this.#setupContextObservers();
+        });
     }
 
     #setupContextObservers() {
@@ -71,14 +80,12 @@ export class BlockGridPreviewCustomView
     }
 
     #observeBlockPreviewSettings() {
-        this.consumeContext(BLOCK_PREVIEW_CONTEXT, (context) => {
-            this.observe(context.settings, (settings) => {
-                if (settings?.blockGrid?.stylesheet) {
-                    this._styleElement = document.createElement('link');
-                    this._styleElement.rel = 'stylesheet';
-                    this._styleElement.href = settings.blockGrid.stylesheet as string;
-                }
-            });
+        this.observe(this.#blockPreviewContext?.settings, (settings) => {
+            if (settings?.blockGrid?.stylesheet) {
+                this._styleElement = document.createElement('link');
+                this._styleElement.rel = 'stylesheet';
+                this._styleElement.href = settings.blockGrid.stylesheet as string;
+            }
         });
     }
 
@@ -88,17 +95,31 @@ export class BlockGridPreviewCustomView
         });
     }
 
-    #observeDocumentWorkspace() {
-        this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+    async #observeDocumentWorkspace() {
+        this.getContext(UMB_DOCUMENT_WORKSPACE_CONTEXT).then((context) => {
+            this.#documentWorkspaceContext = context;
             this.observe(
                 observeMultiple([context.unique, context.contentTypeUnique]),
                 async ([unique, documentTypeUnique]) => {
                     this._blockContext.unique = unique?.toString() ?? '';
+                    this.#blockPreviewContext?.setUnique(this._blockContext.unique);
+
                     this._blockContext.documentTypeUnique = documentTypeUnique ?? '';
-                    await this.#observeBlockValue();
+                    this.#blockPreviewContext?.setDocumentTypeUnique(this._blockContext.documentTypeUnique);
+                    this.#observeBlockValue();
                 }
             );
         });
+
+        if (this.#documentWorkspaceContext == null && this.#blockPreviewContext != null && this._blockContext.unique == '') {
+            this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
+                this.observe(context.content.structure.contentTypeUniques, (contentTypeUniques) => {
+                    this._blockContext.unique = this.#blockPreviewContext?.getUnique() ?? '';
+                    this._blockContext.documentTypeUnique = contentTypeUniques[0] ?? '';
+                    this.#observeBlockValue();
+                });
+            });
+        }
     }
 
     async #observeBlockValue() {
@@ -160,6 +181,13 @@ export class BlockGridPreviewCustomView
 
     async #renderBlockPreview() {
         const context = this._blockContext;
+        if (this.#blockPreviewContext != null && context.unique == '') {
+            context.unique = this.#blockPreviewContext.getUnique();
+        }
+        if (this.#blockPreviewContext != null && context.documentTypeUnique == '') {
+            context.documentTypeUnique = this.#blockPreviewContext.getDocumentTypeUnique();
+        }
+
         const isDataValid = this.#validatePreviewData(context);
 
         if (!isDataValid) {
@@ -197,7 +225,6 @@ export class BlockGridPreviewCustomView
     #validatePreviewData(context: typeof this._blockContext): boolean {
         return !!(
             context.unique != '' &&
-            context.documentTypeUnique != '' &&
             context.blockEditorAlias != '' &&
             context.contentUdi != '' &&
             context.contentElementTypeAlias != ''

diff --git a/...braco.Community.BlockPreview.UI/src/blockEditor/block-list-preview.custom-view.element.ts b/...braco.Community.BlockPreview.UI/src/blockEditor/block-list-preview.custom-view.element.ts
@@ -1,12 +1,15 @@
 import { UMB_BLOCK_LIST_ENTRY_CONTEXT, UMB_BLOCK_LIST_MANAGER_CONTEXT, UmbBlockListValueModel } from "@umbraco-cms/backoffice/block-list";
-import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/document";
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT, UmbDocumentWorkspaceContext } from "@umbraco-cms/backoffice/document";
 import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
 import { css, customElement, html, ifDefined, property, state, unsafeHTML } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { observeMultiple } from "@umbraco-cms/backoffice/observable-api";
 import { UMB_PROPERTY_DATASET_CONTEXT } from "@umbraco-cms/backoffice/property";
 import { tryExecuteAndNotify } from "@umbraco-cms/backoffice/resources";
 import { BlockPreviewService, PreviewListBlockData } from "../api";
+import { BLOCK_PREVIEW_CONTEXT } from "../context/block-preview.context-token";
+import BlockPreviewContext from "../context/block-preview.context";
+import { UMB_BLOCK_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/block";
 
 const elementName = "block-list-preview";
 
@@ -15,6 +18,9 @@ export class BlockListPreviewCustomView
     extends UmbLitElement
     implements UmbBlockEditorCustomViewElement {
 
+    #blockPreviewContext?: BlockPreviewContext;
+    #documentWorkspaceContext?: UmbDocumentWorkspaceContext;
+
     @state()
     private _htmlMarkup: string = '';
 
@@ -60,7 +66,11 @@ export class BlockListPreviewCustomView
 
     constructor() {
         super();
-        this.#setupContextObservers();
+
+        this.consumeContext(BLOCK_PREVIEW_CONTEXT, (context) => {
+            this.#blockPreviewContext = context;
+            this.#setupContextObservers();
+        });
     }
 
     #setupContextObservers() {
@@ -75,16 +85,30 @@ export class BlockListPreviewCustomView
     }
 
     #observeDocumentWorkspace() {
-        this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+        this.getContext(UMB_DOCUMENT_WORKSPACE_CONTEXT).then((context) => {
+            this.#documentWorkspaceContext = context;
             this.observe(
                 observeMultiple([context.unique, context.contentTypeUnique]),
                 async ([unique, documentTypeUnique]) => {
                     this._blockContext.unique = unique?.toString() ?? '';
+                    this.#blockPreviewContext?.setUnique(this._blockContext.unique);
+
                     this._blockContext.documentTypeUnique = documentTypeUnique ?? '';
+                    this.#blockPreviewContext?.setDocumentTypeUnique(this._blockContext.documentTypeUnique);
                     this.#observeBlockValue();
                 }
             );
         });
+
+        if (this.#documentWorkspaceContext == null && this.#blockPreviewContext != null && this._blockContext.unique == '') {
+            this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
+                this.observe(context.content.structure.contentTypeUniques, (contentTypeUniques) => {
+                    this._blockContext.unique = this.#blockPreviewContext?.getUnique() ?? '';
+                    this._blockContext.documentTypeUnique = contentTypeUniques[0] ?? '';
+                    this.#observeBlockValue();
+                });
+            });
+        }
     }
 
     #observeBlockValue() {
@@ -146,6 +170,12 @@ export class BlockListPreviewCustomView
 
     async #renderBlockPreview() {
         const context = this._blockContext;
+        if (this.#blockPreviewContext != null && context.unique == '') {
+            context.unique = this.#blockPreviewContext.getUnique();
+        }
+        if (this.#blockPreviewContext != null && context.documentTypeUnique == '') {
+            context.documentTypeUnique = this.#blockPreviewContext.getDocumentTypeUnique();
+        }
         const isDataValid = this.#validatePreviewData(context);
 
         if (!isDataValid) {
@@ -166,7 +196,7 @@ export class BlockListPreviewCustomView
                 contentUdi: context.contentUdi,
                 settingsUdi: context.settingsUdi,
                 culture: context.culture,
-                requestBody: JSON.stringify(this._blockListValue)
+                requestBody: JSON.stringify(this.blockListValue)
             };
 
             const { data } = await tryExecuteAndNotify(this, BlockPreviewService.previewListBlock(previewData));
@@ -182,10 +212,10 @@ export class BlockListPreviewCustomView
 
     #validatePreviewData(context: typeof this._blockContext): boolean {
         return !!(
-            context.unique &&
-            context.documentTypeUnique &&
-            context.blockEditorAlias &&
-            context.contentElementTypeAlias
+            context.unique != '' &&
+            context.blockEditorAlias != '' &&
+            context.contentUdi != '' &&
+            context.contentElementTypeAlias != ''
         );
     }
 

diff --git a/src/Umbraco.Community.BlockPreview.UI/src/context/block-preview.context.ts b/src/Umbraco.Community.BlockPreview.UI/src/context/block-preview.context.ts
@@ -1,7 +1,7 @@
 import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
 import { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
 import { SettingsRepository } from "..";
-import { UmbObjectState } from "@umbraco-cms/backoffice/observable-api";
+import { UmbObjectState, UmbStringState } from "@umbraco-cms/backoffice/observable-api";
 import { BlockPreviewOptions } from "../api";
 
 export class BlockPreviewContext extends UmbControllerBase {
@@ -11,6 +11,12 @@ export class BlockPreviewContext extends UmbControllerBase {
     #settings = new UmbObjectState<BlockPreviewOptions | undefined>(undefined);
     public readonly settings = this.#settings.asObservable();
 
+    #unique = new UmbStringState('');
+    public readonly unique = this.#unique.asObservable();
+
+    #documentTypeUnique = new UmbStringState('');
+    public readonly documentTypeUnique = this.#documentTypeUnique.asObservable();
+
     constructor(host: UmbControllerHost) {
         super(host);
         this.#settingsRepository = new SettingsRepository(host);
@@ -22,6 +28,26 @@ export class BlockPreviewContext extends UmbControllerBase {
         const settings = await this.#settingsRepository.getSettings();
         this.#settings.setValue(settings);
     }
+
+    getUnique(): string {
+        return this.#unique.getValue();
+    }
+
+    async setUnique(unique: string) {
+        if (unique != '') {
+            this.#unique.setValue(unique);
+        }
+    }
+
+    getDocumentTypeUnique(): string {
+        return this.#documentTypeUnique.getValue();
+    }
+
+    async setDocumentTypeUnique(documentTypeUnique: string) {
+        if (documentTypeUnique != '') {
+            this.#documentTypeUnique.setValue(documentTypeUnique);
+        }
+    }
 }
 
 export default BlockPreviewContext;
diff --git a/src/Umbraco.Community.BlockPreview/Controllers/BlockPreviewApiController.cs b/src/Umbraco.Community.BlockPreview/Controllers/BlockPreviewApiController.cs
@@ -7,13 +7,13 @@
 using Microsoft.Extensions.Options;
 using Umbraco.Cms.Api.Management.Routing;
 using Umbraco.Cms.Core.Cache;
+using Umbraco.Cms.Core.Cache.PropertyEditors;
 using Umbraco.Cms.Core.Composing;
-using Umbraco.Cms.Core.Configuration.Models;
-using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.Routing;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Core.Web;
+using Umbraco.Cms.Infrastructure.HybridCache;
 using Umbraco.Community.BlockPreview.Interfaces;
 using Umbraco.Community.BlockPreview.Services;
 using Umbraco.Extensions;
@@ -61,7 +61,9 @@ public BlockPreviewApiController(
             ISiteDomainMapper siteDomainMapper,
             IOptionsMonitor<BlockPreviewOptions> blockPreviewSettings,
             ITypeFinder typeFinder,
-            AppCaches appCaches)
+            AppCaches appCaches,
+            IElementsCache elementsCache,
+            IBlockEditorElementTypeCache blockEditorElementTypeCache)
         {
             _publishedRouter = publishedRouter;
             _logger = logger;
@@ -257,11 +259,10 @@ private bool CheckGeneratedModelsExist()
         private async Task<string?> GetCurrentCulture(string? culture, IPublishedContent? content = null)
         {
             // if in a culture variant setup also set the correct language.
-            //var currentCulture = string.IsNullOrWhiteSpace(culture)
-            //   ? content?.GetCultureFromDomains(_umbracoContextAccessor, _siteDomainMapper)
-            //   : culture;
+            var currentCulture = string.IsNullOrWhiteSpace(culture)
+               ? content?.GetCultureFromDomains(_umbracoContextAccessor, _siteDomainMapper)
+               : culture;
 
-            string? currentCulture = "";
             if (string.IsNullOrEmpty(currentCulture) || culture == "undefined")
                 currentCulture = await _languageService.GetDefaultIsoCodeAsync();
 

diff --git a/src/Umbraco.Community.BlockPreview/Umbraco.Community.BlockPreview.csproj b/src/Umbraco.Community.BlockPreview/Umbraco.Community.BlockPreview.csproj
@@ -16,7 +16,7 @@
 
 		<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
 
-		<VersionPrefix>3.2.2</VersionPrefix>
+		<VersionPrefix>3.2.3</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 		<Authors>Rick Butterfield, Dave Woestenborghs, Matthew Wise</Authors>
 		<Copyright>$([System.DateTime]::UtcNow.ToString(`yyyy`)) © Rick Butterfield</Copyright>