InnerBlocks с шаблоном, возвращающим нулевое количество блоков

Я пытаюсь создать блок с шаблоном InnerBlocks. Поскольку у блока есть шаблон, у блока всегда должен быть хотя бы 1 дочерний элемент. Если количество дочерних элементов когда-либо достигнет 0, я хочу удалить этот блок, так как он будет пустым.

Проблема, с которой я сталкиваюсь, заключается в том, что значение «blockCount» равно 0 на долю секунды при первом создании блока, поэтому он удаляется перед созданием. Это ошибка getBlockCount или есть способ дождаться, пока шаблон заполнит внутренние блоки, прежде чем я проверю количество блоков?

Вот моя функция 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>
  )
}

reactjs react-hooks wordpress-gutenberg gutenberg-blocks
person Rice_Crisp    schedule 07.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решение, которое было предложено на Github (и работает хорошо), состоит в том, чтобы сохранить длину блока в ссылке, а затем использоватьEffect для отслеживания изменений и удалить блок, если значение вернется к 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>
  )
}
person Rice_Crisp    schedule 24.02.2020