自定义控件值变化时，Gutenberg编辑器区块类名实时生效问题

问题根源 #

你当前的代码存在两个核心问题：

1. 直接修改props.attributes.className违反了React props只读原则，这种修改不会触发组件重渲染，编辑器自然不会实时更新样式
2. 切换toggleval时没有同步更新className属性，导致编辑器无法感知类名变化，只有重新选中区块才会读取最新属性

修复方案 #

1. 注册自定义属性toggleval

首先需要给目标区块注册toggleval属性，确保Gutenberg能正确识别并管理这个属性：

// 注册自定义属性到目标区块
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'custom-attributes/add-toggle-attr',
    (settings, name) => {
        const enableToolbarButtonOnBlocks = ['core/paragraph']; // 替换成你的目标区块列表
        if (enableToolbarButtonOnBlocks.includes(name)) {
            return {
                ...settings,
                attributes: {
                    ...settings.attributes,
                    toggleval: {
                        type: 'boolean',
                        default: false
                    }
                }
            };
        }
        return settings;
    }
);

2. 修改BlockEdit高阶组件，同步更新类名

移除直接修改props.attributes的代码，在ToggleControl的onChange事件中同时更新toggleval和className，并保留用户已添加的其他类名：

const withToolbarControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        const enableToolbarButtonOnBlocks = ['core/paragraph']; // 替换成你的目标区块列表
        if ( ! enableToolbarButtonOnBlocks.includes( props.name ) ) {
            return <BlockEdit { ...props } />;
        }

        const { attributes, setAttributes } = props;
        const { toggleval } = attributes;

        return (
            <>
                <BlockEdit { ...props } />
                <InspectorControls key="visibility">
                    <PanelBody title={ __( 'Visibility' ) }>
                        <ToggleControl
                            label="Toggle"
                            checked={ toggleval }
                            onChange={ (value) => {
                                // 处理类名：移除原有red/blue类，添加新类
                                let newClassName = attributes.className || '';
                                newClassName = newClassName.replace(/\bred\b|\bblue\b/g, '').trim();
                                newClassName += value ? ' blue' : ' red';
                                
                                // 同时更新两个属性，触发编辑器重渲染
                                setAttributes({
                                    toggleval: value,
                                    className: newClassName.trim()
                                });
                            } }
                        />
                    </PanelBody>
                </InspectorControls>
            </>
        );
    };
}, 'withToolbarControl' );

wp.hooks.addFilter(
    'editor.BlockEdit',
    'custom-attributes/with-toolbar-control',
    withToolbarControl
);

关键说明 #

• 必须通过setAttributes更新属性：这是Gutenberg和React中更新状态的唯一正确方式，会触发组件实时重渲染
• 合并原有类名：避免覆盖用户手动添加的其他区块类名，提升兼容性
• 注册自定义属性：确保toggleval被Gutenberg正确追踪，不会出现属性丢失或不生效的情况

内容的提问来源于stack exchange，提问作者BioXD