Gutenberg get index of gutenberg innerblock

Question

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.

Answer 1

You may now retrieve the index of a inner block via the core/block-editor data module. You may pair it with the useSelect hook to keep the indexes up to date on changes.

Something like this. Intentionally verbose for clarity.

import {useSelect} from '@wordpress/data';

const Answer = ( blockProps ) => {
    const {index} = useSelect( select => {
        const {getBlockIndex} = select( 'core/block-editor' );
        return {
            index: getBlockIndex( blockProps.clientId );
        }
    } );

    return ( <li {...blockProps}>
        <input id="checkbox-2" type="checkbox" value="checkbox-2" />
        <label className="checkbox" htmlFor="checkbox-2">
            {JSON.stringify( blockProps.attributes )}
            {index}
            <span className="quiz--answer-content">{blockProps.attributes.explanation}</span>
        </label>
    </li> );
}

Answer 2

try saving the values in html data attributes. then get them using getAttribute("data-index")

data-index="number"

usually in save.js you can't use useStates and useEffects. you have to make another file that uses vanilla js to do the logic. save.js is saved as a pure html elements.

Answer 3

The Quiz block was the top level block. So in its Edit function, I created a subscribe method. I was able to select the editor and get the current block:

// Subscribe to all changes of the Gutenberg blocks
wp.data.subscribe(() => {
  const quiz = wp.data.select("core/editor").getBlock(clientId);
  triggerUpdate(quiz);
});

The subscribe method is covered briefly here:

https://www.youtube.com/watch?v=OQczO6VOMkY

This subscribe() happened to be called thousands of times as the page was edited, so I was unable to work out a better way of working with it than to manually "debounce" it:

// Debounce that change, so it wouldn't trigger thousands of times
let timeouts = [];

const triggerUpdate = (quiz) => {
  while (timeouts.length) {
    clearTimeout(timeouts.shift());
  }

  const timeout = setTimeout(() => {
    // ... the code to get the index of each block
  }, 1000);
  timeouts.push(timeout);
};

Now I had a function triggering every time I updated the post, I just needed to actually get the indexes. This was easily done by using .innerBlocks, once on the quiz (which I'd already got by using wp.data.select("core/editor").getBlock(clientId)) and then once on each question.

With that, I could loop through each block and update its attributes using updateBlockAttributes

// Loop through all nested blocks and update relevant attributes
quiz.innerBlocks.forEach((question, q) => {
  let qid = "q" + (q + 1); // qid = "q1", "q2" etc
  if (question.attributes.qid != qid) {
    const update = {
      qid,
      questionTitle: "Question " + numToWords(parseInt(q + 1)),
    };
    console.log(update);
    dispatch("core/editor").updateBlockAttributes(
      question.clientId,
      update
    );
  }
  question.innerBlocks.forEach((answer, a) => {
    let aid = qid + "a" + (a + 1); // aid = "q1a2" etc
    if (answer.attributes.qid != qid) {
      dispatch("core/editor").updateBlockAttributes(answer.clientId, {
        aid,
      });
    }
  });
});