I'm trying to understand how you are supposed to use Gutenberg in general, but this is my problem.

I have a UI built on the admin side using the "edit" function. This UI allows you to change block settings, and I store the changes in an attribute as JSON data.

On the front end I render things based on how you wanted them to look in the UI using that JSON data.

Here's my problem, this works the first time around. If you create the block, change nothing about it and press save everything's good to go front end and back end.

However once you change anything the block breaks showing this message: The block has encountered an error and can not be previewed.

How am I supposed to put new data on the front side, if any changes break the block? I've isolated it to the save function, if I remove my front end logic and make the save function return a blank Div I'm fine.

Edit: Here is my front end save function:

export default function save( { attributes, className } ) {
let compositionData = JSON.parse(attributes.compositionData);
return (
    <div class='FM_Composition'>
        <div class="FM_Data" style="display: none;">
                <code>{ JSON.stringify(compositionData, null, 2) }</code>
  • Please share you code to your question, to allow definitive answers. – Q Studio Jan 27 at 22:04
  • @QStudio, I added the save code that causes the issue. Right now I'm just trying to render the "compositionData" object as a JSON string in HTML for testing. Any changes to that attribute however breaks the block. – YAHsaves Jan 27 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.