WordPress Gutenberg中实现子组件悬停时为父组件添加is-selected状态

这个需求在Gutenberg开发里很常见，核心思路是借助React的单向数据流——子组件没法直接修改父组件的状态，所以我们通过父组件传递回调函数给子组件，让子组件在hover事件触发时调用这些回调，由父组件自己更新选中状态。具体实现步骤如下：

• 第一步：在父组件中维护一个控制选中状态的变量，比如isParentSelected，同时定义两个回调函数用来更新这个状态。
• 第二步：把这两个回调函数作为props传递给子按钮组件。
• 第三步：子组件在onMouseOver和onMouseOut事件里调用父组件传来的回调。
• 第四步：父组件根据isParentSelected的值，给自身容器添加Gutenberg内置的is-selected类（这个类自带蓝色边框的选中样式）。

子组件（按钮组件）修改后的代码 #

const AddBlockButton = ({ onHoverIn, onHoverOut, onClick, blockProps }) => {
    const handleMouseOver = () => {
        console.log('hover it');
        // 调用父组件传来的hover进入回调
        onHoverIn();
    };

    const handleMouseOut = () => {
        // 调用父组件传来的hover离开回调
        onHoverOut();
    };

    return (
        <Tooltip text={ __( 'Add Block', 'studio-wai' ) }>
            <Button 
                {...blockProps}
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
                onClick={onClick}
            >
                <Dashicon icon="plus" />
            </Button>
        </Tooltip>
    );
};

export default AddBlockButton;

父组件实现代码 #

import { useState } from '@wordpress/element';
import AddBlockButton from './AddBlockButton';

const ParentComponent = () => {
    // 维护父组件的选中状态
    const [isParentSelected, setIsParentSelected] = useState(false);

    // 处理子组件hover进入的回调
    const handleChildHoverIn = () => {
        setIsParentSelected(true);
    };

    // 处理子组件hover离开的回调
    const handleChildHoverOut = () => {
        setIsParentSelected(false);
    };

    // 处理添加新项的逻辑
    const handleAddItem = () => {
        console.log('创建新项');
        // 这里写你的添加新项逻辑
    };

    return (
        {/* 根据状态添加Gutenberg内置的is-selected类 */}
        <div className={isParentSelected ? 'is-selected' : ''}>
            {/* 父组件的其他内容 */}
            <p>父组件内容区域</p>
            {/* 传递回调和点击事件给子组件 */}
            <AddBlockButton 
                onHoverIn={handleChildHoverIn}
                onHoverOut={handleChildHoverOut}
                onClick={handleAddItem}
                blockProps={/* 你的blockProps参数 */}
            />
        </div>
    );
};

export default ParentComponent;

补充说明 #

• Gutenberg的is-selected类已经内置了蓝色边框的选中样式，如果你需要自定义样式，可以替换成自己的类：

.custom-selected {
    border: 2px solid #007cba;
    padding: 8px;
    border-radius: 4px;
}

然后父组件的className改成isParentSelected ? 'custom-selected' : ''即可。

• 如果是在Gutenberg Block的编辑组件中实现，直接把上述逻辑集成到Block的edit函数里就行，核心思路完全一致。

备注：内容来源于stack exchange，提问作者pennylane