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.