Block:custom is not working on React
@besart-k you have to provide a reproducible demo as if it works with the current Vue demo example it shouldn't be different in React. Maybe you're using an old version of grapesjs or doing something wrong in your React app, so in this case the reproducible demo is mandatory. I'm closing this one as the demo itself us...
Read full answer below βQuestion
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome Version 110.0.5481.100 (Official Build) (arm64)
Reproducible demo link
None
Describe the bug
I am trying to replicate in React the customizing the Block Manager like in this example Vue block manager, but the "block:custom" callback is not called.
How to reproduce the bug?
Put this on init configuration
blockManager: { blocks: blocks, custom: true },
Put this on inside useEffect
useEffect(()=>{ editor.on('block:custom', (props)=>{console.log(props)}) },[])
What is the expected behavior? props needs to shown on console log like in Vue example
What is the current behavior? callback of block:custom is not called
If is necessary to execute some code in order to reproduce the bug, paste it here below:
// your code here
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
@besart-k you have to provide a reproducible demo as if it works with the current Vue demo example it shouldn't be different in React. Maybe you're using an old version of grapesjs or doing something wrong in your React app, so in this case the reproducible demo is mandatory. I'm closing this one as the demo itself uses the latest version it seems to work properly for custom blocks.
Thanks for reporting this, @besart-k.
Great question about block:custom is not working on React. The recommended approach with GrapesJS is to use the event-driven API.
Start here:
- Check the GrapesJS documentation for your specific module
- Look for the
on()event listener method - Most operations can be achieved by listening to editor and component events
Common patterns:
// Listen for changes
editor.on('change', () => console.log('something changed'));
// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));
If you're still stuck:
- Share a minimal CodeSandbox reproduction
- Include what you've already tried
- Mention your GrapesJS version
- The community is here to help!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4947
Undo manager not working properly on undoing a remove action
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome - version 110.0.5481.100 (Official Bu...
Issue #6269
Component model and view inits every time it's dragged over every component present in Canvas on which it can be dropped into
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 130.0.6723.59 (Official Bui...
Issue #5173
editor.Css.setRule API not working as expected, it is not updating the rule existing rule.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 112.0.5615.137 (Official Build) (a...
Issue #5112
GrapeJS/drag and drop not working for Brave on Linux and Wayland
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.51.110 Chromium: 113.0.5672.77 (...
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 βRelated tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins β TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.