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

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

0 голосов
/ 08 февраля 2020

Я пытаюсь создать блок с шаблоном InnerBlocks. Поскольку у блока есть шаблон, у блока всегда должен быть хотя бы 1 дочерний элемент. Если число дочерних элементов когда-либо достигнет 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>
  )
}

1 Ответ

0 голосов
/ 24 февраля 2020

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