Styles repeating the custom blocks

[senthil177cse]

i have added custom block but if add any styles like width and background color for that block repeating the styles for next block if i create.. so can you please help how to resolve that issue?

editor.BlockManager.add('custom_first_block', {
label: '1 Column',
order: 1,
category: 'Basic Block',
attributes: {
class: 'gjs-fonts gjs-f-b1 gjs-block gjs-one-bg',
},
content: <div class="row"><div class="col-12">1 Column</div></div>,
});

[artf]

Avoid styles in blocks, create a custom component with styles

[senthil177cse]

@artf here i am not used any styles in this block... can u explain where you are mentioning?

[ebalajier]

You have a content with class="col-12".

Any style changes to the component will result in updating the class underneath, resulting in updating all components with same class.

Try :

https://grapesjs.com/docs/modules/Components.html#components-css

grapesjs.init({
...
selectorManager: {
componentFirst: true,
},
})