Issue #3560💬 AnsweredOpened June 23, 2021by hadeel942 reactions

Customize Blocks Styles - grapesjs Angular

快速解答by ronaldohoch1

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 DASHBORAD – 12 DASHBORAD – 11 DASHBORAD – 9

Answers (4)

artfJuly 31, 2021

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 BlockManager UI from scratch.

hadeel94August 1, 2021

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 BlockManager UI from scratch.

Thanks for your response, I have other questions:

1- I am trying to add div with some style inside the canvas but it will not be editable or dragged just read-only, it is possible?

2- can I change the position of RTE as panel action on a fixed position.

Thank you very much, I would be glad if you answered my questions

ClaudeCodeMay 17, 2026

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:

  1. A minimal reproducible example (CodeSandbox/JSFiddle)
  2. Your GrapesJS version number
  3. Browser and OS information
  4. Any error messages from the browser console
  5. Steps to reproduce the issue

What helps most:

  • Minimal code example (not your full project)
  • Screen recording or screenshot showing the issue
  • Expected vs actual behavior clearly stated
  • GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.