CODEWITHSUNDEEP
javascriptphpreactjswordpresswordpress-gutenberg
Michelle Falzon
Michelle Falzon

Reputation: 21

Wordpress editing a gutenburg block unexpected token <

I'm using WordPress the old fashion way (PHP!) but I wanted to edit the table block to have a toggable button for allowing me to add a class to the table to allow it to be scrollable on mobile.

I was using this guide. https://awhitepixel.com/blog/add-custom-settings-to-existing-wordpress-gutenberg-blocks/.

I registered my script via PHP:

 function my_editor_enqueue() {
wp_enqueue_script('my-gutenberg-filters', get_template_directory_uri().'/js/filters.js', ['wp-edit-post']);
}
add_action( 'enqueue_block_editor_assets', 'my_editor_enqueue' );

However, I am getting this error:

Uncaught SyntaxError: Unexpected token '<'

This is my JS code so far:

function addScrollableToggle(settings, name) {
    if (name == 'core/table') {
        settings.attributes = Object.assign(settings.attributes, {
            scrollable: {
                type: 'boolean',
            }
        });
    }
            
    return settings;
}
         
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'scrollabletable',
    addScrollableToggle
);

const addScrollableToggleToView = 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/table') && 
                       <InspectorAdvancedControls>
                            <ToggleControl
                                label='Scrollable'
                                checked={!!attributes.scrollable}
                                onChange={(newval) => setAttributes({ scrollable: !attributes.scrollable })}
                            />
                        </InspectorAdvancedControls>
                    }
            </Fragment>
        );
    };
}, 'coverAdvancedControls');
     
wp.hooks.addFilter(
    'editor.BlockEdit',
    'scrollabletable',
    addScrollableToggleToView
);

Can someone guide me please :) ?

Upvotes: 0

Views: 630

Answers (1)

Michelle Falzon
Michelle Falzon

Reputation: 21

I found out the issue. I needed to use @wordpress/scripts to compile the es6 code to es5!

Upvotes: 2

Related Questions