将调色板添加到自定义古腾堡块时，编辑器中的类名重复

Question

我正在尝试将调色板添加到我自己的Gutenberg块中。到目前为止，编辑功能似乎还可以。问题是保存块时，CSS类在后端添加了两次。这显然来自props.ClassName变量和我自己的变量。

如果我没有在保存功能中添加该类，那么它可以工作，但是该类当然不在前端中添加。

我确信它一定能以这种方式工作，但是最近核心部分可能已经有所改变。

正确的方法可能是使用classnames函数添加类，但我不知道如何使用ES5。

(function (blockEditor, blocks, components, data, element, i18n) {

    var el = element.createElement;

    const {
        InspectorControls,
        PanelColorSettings,
        getColorClassName,
        getColorObjectByColorValue
    } = blockEditor;

    const { __ } = i18n;
    
    blocks.registerBlockType('namespace/myblock', {

        attributes: {
            backgroundColor: {
                type: 'string'
            },
            color: {
                type: 'string'
            }
        },
        
        edit: function(props) {

            var attributes = props.attributes;

            const settings = data.select('core/editor').getEditorSettings();

            const backgroundColorObj = getColorObjectByColorValue(settings.colors, attributes.backgroundColor);
            if (backgroundColorObj !== undefined) {
                backgroundColorClassName = getColorClassName('background-color', backgroundColorObj.slug);
            } else {
                backgroundColorClassName = '';  
            }

            const colorObj = getColorObjectByColorValue(settings.colors, attributes.color);
            if (colorObj !== undefined) {
                colorClassName = getColorClassName('color', colorObj.slug);
            } else {
                colorClassName = '';    
            }

            return [

                el(InspectorControls, { key: 'inspector' },
                    el(PanelColorSettings, {title: __('Colors'), initialOpen: true, colorSettings: [
 
                        {
                            value: attributes.backgroundColor,
                            label: __('Background Color'),
                            onChange: function (updatedValue) {
                                props.setAttributes({ backgroundColor: updatedValue })
                            }
                        },
                        {
                            value: attributes.color,
                            label: __('Font Color'),
                            onChange: function (updatedValue) {
                                props.setAttributes({ color: updatedValue })
                            }
                        }
                 
                    ]})
                ),
                el('div', {className: props.className + ' ' + backgroundColorClassName + ' ' + colorClassName},
                    ...
                )
            ]
        },

        save: function (props) {

            var attributes = props.attributes;

            const settings = data.select('core/editor').getEditorSettings();

            const backgroundColorObj = getColorObjectByColorValue(settings.colors, attributes.backgroundColor);
            if (backgroundColorObj !== undefined) {
                backgroundColorClassName = getColorClassName('background-color', backgroundColorObj.slug);
            } else {
                backgroundColorClassName = '';  
            }

            const colorObj = getColorObjectByColorValue(settings.colors, attributes.color);
            if (colorObj !== undefined) {
                colorClassName = getColorClassName('color', colorObj.slug);
            } else {
                colorClassName = '';    
            }

            return (
                el('div', {className: backgroundColorClassName + ' ' + colorClassName}, 
                    ...
                )
            )
        }
    });
})(
window.wp.blockEditor,
window.wp.blocks,
window.wp.components,
window.wp.data,
window.wp.element,
window.wp.i18n
)