I have a Quiz
block that contains Question
s blocks that have Answer
blocks. Both Quiz
and Question
use InnerBlocks
to allow questions or answers to be dragged around, edited and saved.
When I save the Quiz, how can I get the index of each question in question/save.js
and the index of each question and answer in each answer/save.js
.
I would like this so I can give all checkbox unique ids, like
<input id="q1-a3" />
And label the questions things like "Question 1."
Quiz/save.js
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
Question/save.js
return (
<div {...blockProps}>
<h3>Question {numToWords(1)}</h3>
<ul class="quiz--answers">
<InnerBlocks.Content />
</ul>
</div>
);
Answer/save.js
return (
<li {...blockProps}>
<input id="checkbox-2" type="checkbox" value="checkbox-2" />
<label class="checkbox" for="checkbox-2">
{JSON.stringify(attributes)}
{attributes.text}
<span class="quiz--answer-content">{attributes.explanation}</span>
</label>
</li>
);
I have tried using getBlockIndex( clientId )
to try to get the index of each block, however I’m not sure where to use this as it always returns -1. It also only seems that clientId
is available in the edit function, and I think I want it in the save function unless I go about adding it to the block attributes.