Site icon Hip-Hop Website Design and Development

Gutenberg get index of gutenberg innerblock

I have a Quiz block that contains Questions 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.