Customize Blocks Styles - grapesjs Angular
Maybe with this events you can do it: https://grapesjs.com/docs/api/editor.html#blocks or https://grapesjs.com/docs/api/editor.html#canvas
Read full answer below ↓Question
I am new to grapes js , I am trying to make the blocks in a different style when dragging for example the image blocks 1 - when not dragged or hover takes style A . 2- when hover takes style B . 3- When dragged takes style C (when it is over the canvas). can any one help me with this issue . Thanks
Answers (4)
Maybe with this events you can do it: https://grapesjs.com/docs/api/editor.html#blocks or https://grapesjs.com/docs/api/editor.html#canvas
In such a case, probably a completely custom block manager UI is the only way (eg. rendered by your own BlockManager component in Angular). It should be possible already, but I'd prefer to take my time and update the Blocks documentation with all the steps and examples necessary to build the BlockM...
In such a case, probably a completely custom block manager UI is the only way (eg. rendered by your own BlockManager component in Angular). It should be possible already, but I'd prefer to take my time and update the Blocks documentation with all the steps and examples necessary to build the BlockM...
Thanks for reporting this, @hadeel94. Thanks for sharing your report about Customize Blocks Styles - grapesjs Angular. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS version number Browser and OS information Any...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4082
Remove some initial styles from frame canvas
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link No demo...
Issue #3222
How to refresh/re-render after new node added?
I manually add a new node into a rendered component. The visual result is OK, but impossible to save, because my style isn't with the auto-...
Issue #6502
Inline style overrides ID-based CSS rules
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v135.0.7049.96 Reproducible demo li...
Issue #6365
Style Manager Fails to Interpret Descendant Selectors Correctly
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.205 Reproducible...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.