具有模板返回块计数为零的InnerBlocks

Question

我正在尝试创建一个带有InnerBlocks模板的块。由于该块有一个模板，因此该块应该始终至少有一个子块。如果子计数达到0，那么我希望删除这个块，因为它将是空的。

我遇到的问题是，当第一次创建块时，"blockCount“的值是0，所以在创建它之前，它正在删除自己。这是getBlockCount的错误，还是在我检查块计数之前等待模板填充InnerBlocks的方法？

这是我的编辑功能，供参考。

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中，然后将useEffect用于监视更改，如果值返回到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>
  )
}