I create a small custom component with a button (child component) that is placed in my parents component.
The button should create a new item. When i hover on the button, i want to "select" the parent, that it becomes editable with a blue border.
Here is the child component
const handleMouseOver = () => {
console.log('hover it')
setIsHovering(true);
// IF I HOVER OVER BUTTON, I WANT TO SELECT THE PARENT COMPONENT
};
const handleMouseOut = () => {
setIsHovering(false);
};
return (
<Tooltip text={ __( 'Add Block', 'studio-wai' ) }>
<Button {...blockProps}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
onClick={onClick}>
<Dashicon icon="plus" />
</Button>
</Tooltip>
);
At the moment, when i hover over the button i change the classname of the button but i want to select the parent that it will look like this:
In wordpress each block will become "is-selected" if it's clicked. But how i can change the state of the parent if i click the child?
