Extend or consume block grid property editor

Questions
,
1

Hi,

I’m trying to either extend the built in block grid property editor or add it a custom property editor.

I had some success with doing something similar with other components, by adding the web component to my lit web component, but I am missing something crucial - perhaps it just can’t currently be done?

Basically I just want to wrap the existing block grid (i.e. leave it unchanged, but add some functionality around it) so the all of the property value in/out remains the same.

At the moment it’s just a proof of concept to see what could be done, and I started by finding what I thought was the “top” level web component for the block grid, which looked like this one

<umb-property-editor-ui-block-grid>

It seemed work, but it wouldn’t do anything

  • It wouldn’t render unless a real block grid was used because that was importing the property-editor-ui-block-grid.element.js, whereas mine wasn’t. You need to switch between nodes to make it kick in
  • When I clicked “add content”, nothing would happen, no errors.
  • When I put breakpoints in the source element, it was hitting the config ones, and I could see the properties.

Basically, I don’t know what I’m need to do, and likely don’t have the manifest set up correctly as well.

Any help would be appreciated please?

Thanks,
Jarrod

This is the experiment element code

import type { UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';

/**
 * @element block-grid-with-template-picker
 */
@customElement('block-grid-with-template-picker')
export class BlockGridWithTemplatePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
  @property({ type: Object })
  value?: UmbBlockGridValueModel;

  @property({ type: Object })
  config?: UmbPropertyEditorConfigCollection;

  @property({ type: Object })
  alias!: string;

  @property({ type: Object })
  meta: any;

  private _onChange(event: CustomEvent) {
    console.log('Block grid change event:', event.detail);
    this.value = event.detail.value;
    this.dispatchEvent(new UmbChangeEvent());
  }

  private _onCustomAction() {
    // Add your custom action logic here
    console.log('Custom action triggered');
  }

  override render() {
    console.log('Block grid configuration:', this.config);

    return html`
      <div class="block-grid-wrapper">
        <div class="custom-controls">
          <uui-button @click=${this._onCustomAction}> Custom Action </uui-button>
        </div>

        <!-- The original block grid editor -->
        <umb-property-editor-ui-block-grid
          .value=${this.value}
          .config=${this.config}
          .alias=${this.alias}
          .meta=${this.meta}
          @change=${this._onChange}
        >
        </umb-property-editor-ui-block-grid>
      </div>
    `;
  }
}

export default BlockGridWithTemplatePickerElement;

declare global {
  interface HTMLElementTagNameMap {
    'block-grid-with-template-picker': BlockGridWithTemplatePickerElement;
  }
}

Manifest

import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor';

export const manifest: ManifestPropertyEditorUi = {
  type: 'propertyEditorUi',
  alias: 'BlockGridWithTemplatePicker',
  name: 'Block Grid With Template Picker',
  element: () => import('./block-grid-with-template-picker.element.ts'),
  meta: {
    label: 'Block Grid With Template Picker',
    propertyEditorSchemaAlias: 'Umbraco.BlockGrid',
    icon: 'icon-layout',
    group: 'richContent',
    supportsReadOnly: true
  }
};