Gutenberg获取Gutenberg内区块的索引

时间：2021-11-10 作者：Djave

我有一个Quiz 包含的块Questions块具有Answer 块。二者都Quiz 和Question 使用InnerBlocks 允许拖动、编辑和保存问题或答案。

当我保存测验时，如何获取每个问题的索引question/save.js 以及每个answer/save.js.

我想这样做，以便我可以给所有复选框唯一的ID，如

<input id="q1-a3" />
并将问题标记为“等”；问题1"E；

测验/保存。js公司

return (
  <div {...blockProps}>
    <InnerBlocks.Content />
  </div>
);
提问/保存。js公司

return (
  <div {...blockProps}>
    <h3>Question {numToWords(1)}</h3>
    <ul class="quiz--answers">
      <InnerBlocks.Content />
    </ul>
  </div>
);
回答/保存。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>
);
我试过使用getBlockIndex( clientId ) 尝试获取每个块的索引，但是我不确定在哪里使用它，因为它总是返回-1。也只是看起来clientId 在编辑功能中可用，我想我希望它在保存功能中可用，除非我将其添加到块属性中。

2 个回复
SO网友:shadi

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

data-index="number"
通常在保存中。js您不能使用useStates和useEffects。您必须创建另一个使用vanilla js执行逻辑的文件。拯救js保存为纯html元素。

SO网友:Djave

这个Quiz block是顶级block。因此，在其编辑功能中，我创建了一个subscribe方法。我能够select 编辑器并获取当前块：

// Subscribe to all changes of the Gutenberg blocks
wp.data.subscribe(() => {
  const quiz = wp.data.select("core/editor").getBlock(clientId);
  triggerUpdate(quiz);
});
此处简要介绍subscribe方法：

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);
};
现在，每次更新帖子时，我都会触发一个函数，我只需要实际获取索引。通过使用.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,
      });
    }
  });
});

标签： block-editor   小码农  

相关推荐