I'm trying to add a toggle setting to the Wordpress group block programmatically, but I get a console error

Viewed 15

I want to add a toggle setting to the core group block of Wordpress. But I get the following console error in the console:

Uncaught SyntaxError: Unexpected token '<'

I enqueued the Javascript file by using the following code:

add_action('enqueue_block_editor_assets', function() {
    wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri().'/snippets/dark-mode-setting-group-block/assets/dark-mode-setting-group-block.js', ['wp-edit-post']);
});

This is my Javascript file:

function addGroupAttribute(settings, name) {
    if (typeof settings.attributes !== 'undefined') {
        if (name == 'core/group') {
            settings.attributes = Object.assign(settings.attributes, {
                darkModeOn: {
                    type: 'boolean',
                }
            });
        }
    }
    return settings;
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'awp/group-custom-attribute',
    addGroupAttribute
);

const groupAdvancedControls = wp.compose.createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        const { Fragment } = wp.element;
        const { ToggleControl } = wp.components;
        const { InspectorAdvancedControls } = wp.blockEditor;
        const { attributes, setAttributes, isSelected } = props;
        return (
            <Fragment>
                <BlockEdit {...props} />
                {isSelected && (props.name == 'core/group') && 
                    <InspectorAdvancedControls>
                        <ToggleControl
                            label={wp.i18n.__('Enable dark mode', 'awp')}
                            checked={!!attributes.darkModeOn}
                            onChange={(newval) => setAttributes({ darkModeOn: !attributes.darkModeOn })}
                        />
                    </InspectorAdvancedControls>
                }
            </Fragment>
        );
    };
}, 'groupAdvancedControls');

wp.hooks.addFilter(
    'editor.BlockEdit',
    'awp/group-advanced-control',
    groupAdvancedControls
);

This section throws the error:

     <Fragment>
                <BlockEdit {...props} />
                {isSelected && (props.name == 'core/group') && 
                    <InspectorAdvancedControls>
                        <ToggleControl
                            label={wp.i18n.__('Enable dark mode', 'awp')}
                            checked={!!attributes.darkModeOn}
                            onChange={(newval) => setAttributes({ darkModeOn: !attributes.darkModeOn })}
                        />
                    </InspectorAdvancedControls>
                }
            </Fragment>

Please let me know if you see what is causing this.

0 Answers
Related