How to create custom block made of grapesjs components?

You should be able to do something like this:

...
components: [
  { tagName: 'h1', components: 'Some <b>content</b>', },
  '<style>....</style>'
]

@artf thanks it works, but i found bug there.

When you drop this block on canvas it works ok, but if you delete this element from canvas or clear whole canvas, then drop this block on canvas 2nd time, it will lose css. 2nd time, 3rd time.. doesnt matter, If you removed element from canvas once, it will lose style for next drops.

@makkaronis4e for such a case, I'd ask you a reproducible demo, please

Thanks for reporting this, @makkaronis4e.

Great question about [QUESTION] How to create custom block made of grapesjs components?. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!