[QUESTION] Have to have all the blocks the same styles by definition

Question

We are using blockManager, as you can see in the example posted to codesandbox, following the documentation related to custom render. The unexpected behavior for us is that each time a user edits the styles of a block, all blocks are updated with that style, because the style has been set to the class used in the block, in this case .row-cell.

Is this the expected behavior?
How can we avoid it?

Thanks!

References: https://codesandbox.io/s/wkr3oqxpw8 https://grapesjs.com/docs/modules/Blocks.html#custom-render

artf · Accepted Answer

First of all, your example/problem has nothing to do with the custom render in blocks (you'd use it to customize the UI of blocks not components in the canvas). A solution is to set that class private

trivago-vgarcia · Answer

@artf Thanks for the reply! Sorry, because the example wasn't clear. It happens on every case, I mean, even when they are defined in the default template, and not only when a new selector is added. So, using selector:add wont fix all the cases.

Do you have any other suggestion? Thanks!

artf · Answer

It happens on every case, I mean, even when they are defined in the default template, and not only when a new selector is added. So, using selector:add wont fix all the cases. selector:add is triggered even when a new class is added from parsing. So, place it as a plugin, so it will be attached before the template is loaded and any new class will be passed by the listener

Have to have all the blocks the same styles by definition

Question

Answers (3)

Related Questions and Answers

[FEATURE REQUEST] Custom styles that add/remove custom classes?

[QUESTION] - Add style sector for specific Css rule

[QUESTION] Best way to listen to changes on the final HTML?

How to add video block on blockManager

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories