Atomic blocks or complex components

Question

Hi, I'm studying the editor and I think I understand the difference between components and blocks. Now, I was wondering if GrapesJS offers the possibily to manage a block as an atomic entity or permits to define components as a tree with of nodes. For example, I have a block called separator that basically is a table with a tbody, a tr and a td that are all components in gjs. I would like that the click on any component of this separator block in reality selects the table component at which I s...

artf · Accepted Answer

The main issue that I can foresee is that the source code should be importable so as it is generated by the editor and I'm not sure if the editor can distinguish the separator element from any td component of a table component used for tabular data and if it can sniff all the styles to repopulate the traits and the properties in the editor. Yeah this is a good question, basically, the editor has a stack of component types and every time you add a new one it's placed on top of the stack Let's sa...

artf · Answer

the fact that it has returned a type for this node prevents the editor from testing the inner nodes of this node for a component type? No, inner nodes will be still traversed, but you can actually prevent that with this as a return to your isComponent but, with this current setting you're telling that you have no components, so you'd actually get this rendered in you canvas: empty table, so what you can do?!? With this: it's the same like not putting components, because the string will be parse...

artf · Answer

Yeah, the content property could really solve my problem but I guess I have to manually keep it's value in sync (with string manipulation) with the changes made by the users to the properties and the traits of the separator component, and, since it is part of the model of a separator component, any change to it will trigger a view update, right? Well as you said I would like that the click on any component of this separator block in reality selects the table I supposed that the separator was so...

Atomic blocks or complex components

Question

Answers (3)

Related Questions and Answers

How to place a component at the end of the canvas.

Script property using function don't work with blocks

ID changes when importing html or passing html in components prop in config.

Dynamic class generation with a template

Paid Plugins That Match This Issue

Related tutorials

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

Browse Plugin Categories