模板返回块计数为零的 InnerBlocks

Question

我正在尝试使用 InnerBlocks 模板创建块。由于块有模板，块应该总是至少有 1 child。如果 child 计数达到 0，那么我想删除这个块，因为它是空的。

我运行遇到的问题是，当块首次创建时 "blockCount" 的值在一瞬间为 0，因此它会在创建之前自行删除。这是 getBlockCount 的错误，还是有办法在我检查块计数之前等待模板填充 InnerBlocks？

这是我的edit功能，供参考。

edit: props => {
  const { setAttributes } = props
  const { className } = props.attributes
  const { removeBlock } = useDispatch('core/block-editor')
  const { blockCount } = useSelect(select => ({
    blockCount: select('core/block-editor').getBlockCount(props.clientId)
  }))
  if (blockCount === 0) {
    removeBlock(props.clientId)
  }
  return (
    <div className={ className }>
      <InnerBlocks
        allowedBlocks={ ['my/block'] }
        template={ [['my/block']] }
        templateLock={ false }
        renderAppender={ false }
      />
    </div>
  )
}

Answer 1

Github 上提供的解决方案（效果很好）是将块长度保存到 ref，然后使用 Effect 观察变化，如果值 returns 为0.

edit: props => {
  const { setAttributes } = props
  const { className } = props.attributes
  const { removeBlock } = useDispatch('core/block-editor')
  const { blockCount } = useSelect(select => ({
    blockCount: select('core/block-editor').getBlockCount(props.clientId)
  }))
  const previousBlockCount = useRef(blockCount)
  useEffect(() => {
    if (previousBlockCount.current > 0 && blockCount === 0) {
      removeBlock(props.clientId)
    }
    previousBlockCount.current = blockCount
  }, [blockCount, props.clientId])
  return (
    <div className={ className }>
      <InnerBlocks
        allowedBlocks={ ['my/block'] }
        template={ [['my/block']] }
        templateLock={ false }
        renderAppender={ false }
      />
    </div>
  )
}

模板返回块计数为零的 InnerBlocks

InnerBlocks with template returning a block count of zero

reactjs

wordpress-gutenberg

gutenberg-blocks

react-hooks