Site icon Hip-Hop Website Design and Development

Save JSON information with Gutenberg and present it within the content material

I am making an attempt to create a quiz in Gutenberg, and I might like to avoid wasting JSON information (to entry afterward the entrance finish)

export default perform save({ attributes }) {
  const blockProps = useBlockProps.save({
    className: "quiz",
  });

  return (
    <div {...blockProps}>
      <RichText.Content material
        className="quiz-title"
        placeholder="Quiz title"
        worth={attributes.title}
        tagName="h2"
      />
      <InnerBlocks.Content material />
      <script>
        var quizData = {
          "under5": "bad luck",
          "under10": "not bad",
          "under15": "good",
          "under20": "great!",
        }
      </script>
    </div>
  );
}

Nevertheless this does not save a script tag. In future, these values might be extra advanced and set within the elements attributes.

Is there a way or work round I can use to avoid wasting information?

In the mean time I may probably convert it into information attributes like so:

return (
  <div
    {...blockProps}
    data-under5={"bad luck"}
    data-under10={"not bad"}
    data-under15={"good"}
    data-under20={"great!"}
  >

However because the undertaking will get extra advanced or I add additional nested information, it’s going to doubtless get fairly ugly.