Change the blocks render

[Delni]

Hello ! I work on a project with a strong design system implemented in webcomponents, so we are planning on recreating the blocks pannel with it.

Stack:

• Webpack
• React
• Typescript

For now, we use the label field in the block definition to add the HTML string, but it does not work (no render), nor providing JSX element to this field (render [object Object]).

From our understanding of the documentation label should only be the text displayed, so is there any way to render the whole pannel with our custom components ? content understand JSX but not label ?

Here is an extract of the editor.init :

const editor = grapesjs.init({
  container: grapesRoot.current,
  panels: {
    defaults: [],
  },
  blockManager: {
    appendTo: blocksRoot.current,
    blocks: [
      {
        id: 'section',
        label: '<my-custom-component text="Text" aria-label="Text"><my-custom-icon slot="icon"/></my-custom-component>',
        attributes: { class: 'gjs-block-section' },
        content: (
          <section>
            <h1>This is a simple title</h1>
            <div>
              This is just a Lorem text: Lorem ipsum dolor sit amet
            </div>
          </section>
        ),
      },
    ],
  },
})

[artf]

You should be able to create your own Blocks elements if you need a highly customized UI https://grapesjs.com/docs/modules/Blocks.html#customization

[IRediTOTO]

Hi I tried this setting but there is no on function in object

[Delni]

We tried the custom: true but the event callback was never called 🤔
We found out in the code that blocks handle a render method, and we used that for now but it feels more like a hack since it is not exposed in the dicumentation