Grape JS classes styling

[saadali1221]

I recently come with a thing in Grape JS and that is when you add a block with a class name , lets say I added bootstrap row with a class name "row". So when I drop this in to the canvas editor twice and select the first one and apply style to that, let say I applied background colour. So it changes the colour for both of the components.

So what I found is adding a unique classes as you can see below.

// Row block (Bootstrap row)
editor.BlockManager.add("row", {
label: "Row",
category: "Layout",
attributes: { class: "fa fa-bars" },
content: () =>{
const uniqueClass = custom-container-${Date.now()}-${Math.floor(Math.random() * 1000)};
return {
tagName: "div",
classes: ["row", uniqueClass],
style: { "min-height":"50px",padding: "10px" },
droppable: true,
components: [],
}
},
});

  It resolves my issue, but I was curious to know is it the best thing we can do to avoid such type of issue.

[mosh-tudor]

@saadali1221 Check this https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors