If you only need to know whether or not an inner-block is selected, you can leverage the core/block-editor
store’s hasSelectedInnerBlock()
selector. For example, if using a useSelect()
hook in a functional component, that might look as such:
import { useSelect } from '@wordpress/data';
export default function Edit( { isSelected, clientId } ) {
const is_inner_block_selected = useSelect(
( select ) => select( 'core/block-editor' ).hasSelectedInnerBlock( clientId )
);
// ...
}
After which you might use a simple isSelected || is_inner_block_selected
condition to execute your specific functionality – or some other hook with with a [ isSelected, is_inner_block_selected ]
dependency.
Of particular note, you can set the second argument of hasSelectedInnerBlock()
to true
for a deep check – that is, if you wish to know if any descendant is selected (in cases where you would like to know if the inner blocks themselves may have inner blocks which are selected):
select( 'core/block-editor' ).hasSelectedInnerBlock( clientId, true )