Issue in applying CSS on a block made dynamically using Block Manager

[annus97]

Hi @artf,

I am trying to make a block dynamically of any template made on the canvas. I have got the selected component HTML using selected.getEl().outerHTML and style using selected.getStyle() method which gives an object. When I apply this using below code, an extra div is added in the block created due to the nested 'content' blocks. I have tried using the components as well but an extra div is added which causes issues in the styling of the block created. The styles are applied to the outer div instead of like tag for which block was to be created.

export const createBlockTemplate = (editor, selected) => {
let elementHTML = selected.getEl().outerHTML;
const bm = editor.BlockManager
const style = selected.getStyle()

bm.add(customBlockTemplate${customBlockCounter},{
category: 'Custom Blocks',
label: Custom Block ${customBlockCounter},
media: '',
content: {
content: elementHTML,
style: style}
})
},
})
customBlockCounter++;
}

The other way to apply styles which I got from here (#195) was like this:
content: `

...

<style> .big-hero{...} .... </style> `,

For this, I get the selected component styles using this code - editor.CodeManager.getCode(selected,'css') - which gives a string and add it into the selected component HTML. But the issue here comes is that it removes the CSS of all other components in the canvas. Furthermore, the styles were also not applied to the block created using this method as well. The code block used is shown below:

export const createBlockTemplate = (editor, selected) => {
let elementHTML = selected.getEl().outerHTML;
const bm = editor.BlockManager
const style = editor.CodeManager.getCode(selected,'css')
elementHTML += <style>${style}</style>

bm.add(customBlockTemplate${customBlockCounter},{
category: 'Custom Blocks',
label: Custom Block ${customBlockCounter},
media: '',
content: elementHTML
})
customBlockCounter++;
}

Kindly tell me how to add styles to the block made of the selected components so that another extra div is not added to the block made or from the other way the CSS of other components is not removed while getting CSS string. Your feedback in this regard will be highly appreciated.