0

I'm mostly interested in useState. It works fine in edit.js, but in save.js it just breaks and it throws the minified React error, see below:

enter image description here

I tried creating a separate .jsx component file but it throws the error when it encounters useState(). I tried importing it from both "react" and "@wordpress/element" packages.

The component looks like this, something basic: enter image description here

Then I just imported it into save.js in my custom block: enter image description here

The Gutenberg plugin is installed, version 15.2.0.

Improve this question
4
  • 1
    The save attribute is supposed to take the block’s attributes and render static HTML that can be saved to the database. It doesn’t run on the front end and it shouldn’t contain any interactivity. If you want a React app on the front end you need a separate script on the front end that renders the app into that HTML.
    – Jacob Peattie
    Commented Feb 23, 2023 at 17:42
  • @JacobPeattie Thanks, do you have more information about how to achieve that?
    – Kerox
    Commented Feb 24, 2023 at 8:04
  • 1
    It doesn't really have anything to do with WordPress, ultimately. You just need to run a React script on the front end the same way you would with any HTML page. Give the saved block HTML a class to identify it, find that element with JS and render your React app into it.
    – Jacob Peattie
    Commented Feb 24, 2023 at 8:21
  • 2
    @JacobPeattie thanks, I got it working by following these steps, I didn't even have to do all of them wordpress.stackexchange.com/a/367847/230262. It sucks because I had to Google a lot to find a solution, couldn't find anything in documentations or on YouTube...
    – Kerox
    Commented Feb 24, 2023 at 13:11

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.