Umbraco 15 - Block Grid - custom Block grid previews with slots

Questions
1

Hi,
I am in the process of converting Block Grids from Umbraco 13 to Umbraco 15.

I have followed the instructions to create a separate project to create custom preview block grids for the CMS using Typescript, Vite and Lit.

So far so good, using ‘npm run build’ to compile in to /wwwroot/Plug_ins.

The big issue I have come up against, and so far I have come up with no solutions is adding slots in the new typescript code that allowed me to agg content in layouts, in left and right areas.
My code so far is simple not rendering “areas”/“slots” that I can add further content in to like, rich text or other block grids. This is becoming quite frustrating. I have been reading up on slots in web components, but to no avail.

In Umbraco 13 - the code to render blocks was this:

<div ng-controller="twoColumnSectionController">
  <section class="cmt-section-wrap {{containerHPadding}} {{alignItems}} {{bgcolor}}">
    <div class="{{theContainer}}">
      <umb-block-grid-render-area-slots></umb-block-grid-render-area-slots>
    </div>
  </section> 
</div>

or this, using slot instead:

<div ng-controller="twoColumnSectionController">
  <section class="cmt-section-wrap {{containerHPadding}} {{alignItems}} {{bgcolor}}">
    <div class="{{theContainer}}">
      <slot name="left"></slot>
    </div>
  </section> 
</div>

Turning to This example code for Umbraco 15 - for a custom block grid cms preview, the slots do not render, or allow me to add further content within the layout custom block, with two columns/areas:

import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';

const elementName = "columns-66-custom-view";

// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
@customElement(elementName)
// eslint-disable-next-line local-rules/umb-class-prefix
export class Columns66
    extends UmbElementMixin(UmbLitElement) 
    implements UmbBlockEditorCustomViewElement
{
    @property({ attribute: false })
    content?: UmbBlockDataType;

    @property({ attribute: false })
    settings?: UmbBlockDataType;

    override render()
    {
        return html`
            <div class="${this.settings?.align ? 'align-' + this.settings?.align : undefined}">           
                <div slot="left">
						Needs content left
					</div>
                    <umb-block-grid-render-area-slots></umb-block-grid-render-area-slots>
            </div>
            <div class="${this.settings?.align ? 'align-' + this.settings?.align : undefined}">
                <div slot="right">
						Needs content right
					</div>
            </div>
        `;
    }

    static override styles = [
        css`
            :host {
                display: block;
                height: 100%;
                box-sizing: border-box;
                background-color: #dddddd;
                border-radius: 9px;
                padding: 12px;
            }

            .align-center {
                text-align: center;
            }
            .align-right {
                text-align: right;
            }
        `,
    ];
}

export default Columns66;

declare global
{
    interface HTMLElementTagNameMap
    {
        [elementName]: Columns66;
    }
}

This is the display that is rendered in the cms:

rendered block grid in the cms
rendered block grid in the cms1187×405 13.5 KB

Please can someone assist, who has successfully rendered slots and content within block grid items in the cms, and advise on the correct code to use.

Thank you.

Kind regards,

Pete

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/115148-umbraco-15-block-grid-custom-block-grid-previews-with-slots