Add "is-selected" state to parent component in WordPress gutenberg

19 views Asked by At

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:

enter image description here

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?

0

There are 0 answers