scripts in Block Grid previews not executing

[Wolfkhan66]

Which Umbraco.Community.BlockPreview version are you using?

1.14.0

Which Umbraco version are you using? For example: 10.4.0 - don't just write v10

13.13.0

Bug summary

We are using a block grid where you add blocks of rows (full width, half/half etc) and then in those row blocks we add content blocks in the row areas.

I have tested this on the root of the grid to make sure the above is not the cause of the issue and can confirm the issue is still present if the content blocks are in the root of the block grid.

For some of our previews scripts are required (for maps etc) to properly render. While the scripts execute in the blocklist version of the preview the same block in a block grid does not.

Steps to reproduce

Create a content block that requires some javascript while in the preview. can be basic such as a simple script tag that contains console.log("hello world.")

Add a block list and a block grid that can both use the same block and add the above block to both.
Save and publish.
Clear the browser console and hard refresh. You should only see the log statement once for the block list preview. The block grid preview has not triggered the script.

Expected result / actual result

Block previews for a block used in either a blocklist or a blockgrid should act the same and run any scripts contained.

[Wolfkhan66]

Example screenshot of our map block. The top is using the map block in a block list. The bottom is the same block in a block grid.
Both views go through the same rendering partial and contain the same html and scripts.
In the console on the right you can see the scripts have only been triggered once for the block list meaning the map gets rendered.
The block grid version however does not trigger the scripts and the map remains unrendered.

[JamieTownsend84]

@Wolfkhan66 - just noticed this whilst I was working on something else and this is something I've personally seen - but our issue was the block preview rendered Web Components - so needed some JS added in order to render correctly.

The solution we had was to create a little package ourselves, and in the manifest include the JS file we needed.

Not sure if it's possible to improve BlockPreview to allow scripts to be added like this or not but in V17 we've done the same as the below and it works ok. Here is some sample code which can hopefully help.

V13 example:

using Umbraco.Cms.Core.Manifest;

namespace Shout.Components.Umbraco.Base.Composers
{
    public class ManifestFilter : IManifestFilter
    {
        public void Filter(List<PackageManifest> manifests)
        {
            var assembly = typeof(ManifestFilter).Assembly;

            manifests.Add(new PackageManifest()
            {
                PackageName = assembly.GetName()?.Name,
                Version = assembly.GetName()?.Version?.ToString(3) ?? "1.0.0",
                AllowPackageTelemetry = true,
                Scripts = [
                    "/_res/themes/backoffice/index.min.js"
                ]
            });
        }
    }
}

V17 example:

{
  "$schema": "https://json.schemastore.org/umbraco-package.json",
  "name": "Shout-Umbraco-Backoffice-Components",
  "id": "Shout.Umbraco.Backoffice.Components",
  "version": "1.0.4",
  "allowTelemetry": true,
  "extensions": [
    {
      "type": "bundle",
      "alias": "Shout.Umbraco.Backoffice.Components.Scripts",
      "name": "Shout Umbraco Backoffice Components Scripts",
      "js": "/App_Plugins/Shout.Umbraco.Backoffice.Components/themes/shoutDigital/index.min.js"
    }
  ]
}

[Wolfkhan66]

Thank you for this. I will attempt to apply the above this week and make a more generic loading script to apply to our blocks. Theoretically it will help clean the views up a little bit too.

[Wolfkhan66]

I tried this solution above today and while it does technically allow me to get a script partially working i am still having issues with grid blocks specifically as they appear to be rendered inside of #shadowroots so none of my jquery selectors can see or initialize anything in the blocks themselves.

Is there a way to turn off that behaviour so they render exactly the same as a blocklist item?