Editor crashing when editing reusable blocks

[BCleverly]

Describe the bug If you make use of reusable blocks then go to edit them it looks like react/gutenberg can't keep up with the nesting in some way shape or form or is getting into areas where it thinks there will be an infinite loop about happen

To Reproduce Steps to reproduce the behavior:

1. Open the editor
2. Create a re-usable block, if on the online demo, use one of the many available
3. Add a reusable block to the page
4. Click edit on the reusable block to be able to change things about the block
5. When you go to click save on the block, you'll get an editor crash.
6. Attempting recovery has always failed for me and nothing happens.

Expected behavior Be able to update the re-usable block with new data and not have the editor crash.

Screenshots

Environment (please complete the following information):

• Laraberg Version:1.1
  • OS: Windows
  • Browser Firefox/Chrome/Edge(Chromium)
  • Version Latest

[jeancharlesamey]

I confirm having the same issue on the demo

[BCleverly]

I had to make a quick work around for the project im working on. I created a javascript function that took the current contents of an editor and stored it in the database in the lb_blocks table. I then had a dropdown menu within the page that allowed the users to select a re-usable block and inject it into the current pages with the Laraberg.getContent() and Laraberg.setContent():

let content = Laraberg.getContent();
let blockHtml = ''; // code here to get block html
content = content+blockHtml;
Laraberg.setContent(content);

It's not as elegant but it achieved the same goal to a degree.

[skacco]

could you share this code please?

[BCleverly]

I'm unable to share the code due to it being used in proprietary software but can walk you through what to do.

1. Create a Laravel model that will hold your block data (html etc),
2. Create a crud interface for said data above.
3. Create an api endpoint or pass the available block to the page you have the editor on.
4. Create a dropdown or interface for your blocks depending on how you set up the data in step 1 - you'll need to store the html in a data attribute or find some other way of doing this(maybe another endpoint to get the html).
5. Put the above JavaScript into an event on a button that will either load the html froma data attribute or an api endpoint.

This isn't a great solution as you lose the ability to have the JS interactivity from what i remember. We eventually changed over to GrapesJs for this instead.

[github-actions[bot]]

This issue has been automatically marked as stale because it has been open for 60 days with no activity.