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

Question

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

如何从父块检查用户是否正在编辑该父块的内部块（无论多深）

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

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

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

经过大量研究后，我制作了自己的函数来确定是否选择内部块（需要 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;
};