reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？

Question

仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。

如何从父 block 检查用户是否正在编辑该父 block 的内部 block (无论多深)

我这么问是因为我想为父级的innerBlocks执行某种切换功能，直到您选择父级 block 并尝试使用props.isSelected时才可见，但显然当您开始编辑内部 block 时，它会立即消失，因为不再选择父级

这是一个简单的代码，应该可以演示我在说什么

registerBlockType('test/parent', {
    name: 'Parent',
    edit: (props) => {
      const template = [['test/child'],['test/child']];
      if (props.isSelected) {
        return <InnerBlocks template={template}/>;
      }
      return <div>Click me to see my inner block</div>;
    },
    save: (props) => {
        return <InnerBlocks.Content />;
    }
};
registerBlockType('test/child', {
    name: 'Child',
    parent: ['test/parent'],
    edit: (props) => {
      return <div>I'm the child I can have some more nested blocks but if you click on me I will be gone because my parent won't want me anymore, I wish somebody could edit me :(</div><InnerBlocks />;
    },
    save: (props) => {
        return <div>I'm the child</div><InnerBlocks.content />;
    }
}

Answer 1

经过大量研究后，我制作了自己的函数来确定是否选择内部 block (需要 wp-data)

这是代码

registerBlockType('test/parent', {
    name: 'Parent',
    edit: (props) => {
        const template = [['test/child'],['test/child']];
        if (props.isSelected || hasSelectedInnerBlock(props)) {
            return <InnerBlocks template={template}/>;
        }
        return <div>Click me to see my inner block</div>;
    },
    save: (props) => {
        return <InnerBlocks.Content />;
    }
};

function hasSelectedInnerBlock(props) {
    const select = wp.data.select('core/editor');
    const selected = select.getBlockSelectionStart();
    const inner = select.getBlock(props.clientId).innerBlocks;
    for (let i = 0; i < inner.length; i++) {
        if (inner[i].clientId === selected || inner[i].innerBlocks.length && hasSelectedInnerBlock(inner[i])) {
            return true;
        }
    }
    return false;
};