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.