Gutenberg内块的gutenberg指数

Question

我有一个Quiz块，其中包含Questions块，其中有Answer块。Quiz和Question都使用InnerBlocks来允许问题或答案被拖动、编辑和保存。

当我保存测试时，如何在question/save.js中获得每个问题的索引，以及如何在每个answer/save.js中获得每个问题和答案的索引。

我希望这样做，这样我就可以给出所有的复选框唯一的ids，比如

<input id="q1-a3" />

把问题贴上“问题1”之类的标签。

测验/Save.js

return (
  <div {...blockProps}>
    <InnerBlocks.Content />
  </div>
);

问题/Save.js

return (
  <div {...blockProps}>
    <h3>Question {numToWords(1)}</h3>
    <ul class="quiz--answers">
      <InnerBlocks.Content />
    </ul>
  </div>
);

回答/储蓄

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>
);

我尝试使用getBlockIndex( clientId )来获取每个块的索引，但是我不知道在哪里使用它，因为它总是返回-1。而且似乎clientId在编辑函数中是可用的，我想我希望它在保存函数中，除非我继续将它添加到块属性中。

Answer 1

现在可以通过core/block-editor数据模块检索内部块的索引。您可以将其与useSelect挂钩配对，以保持索引的最新变化。

就像这样。为了清晰而故意地详细地说。

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

尝试将值保存在html数据属性中。然后让他们使用getAttribute("data-index")

data-index="number"

通常在save.js中，您不能使用useStates和useEffects。您必须创建另一个使用vanilla js来执行逻辑的文件。save.js保存为纯html元素。

Answer 3

Quiz块是顶层块。因此，在它的Edit函数中，我创建了一个订阅方法。我能够选择编辑器并获得当前块：

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

在这里简要介绍了订阅方法：

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

当页面被编辑时，这个subscribe()碰巧被调用了数千次，所以我想不出比手动“删除”它更好的方法了：

// 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);
};

现在我有一个函数触发每次更新post时，我只需要实际得到索引。通过使用.innerBlocks、在quiz上使用一次(我已经通过使用wp.data.select("core/editor").getBlock(clientId)获得)和在每个question上使用一次，可以很容易地做到这一点。

这样，我就可以循环遍历每个块，并使用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,
      });
    }
  });
});