0

I'm trying to get into Gutenberg Block Theme development and immediatly ran into an issue:

I am enquing a JavaScript file, because I want to add custom attributes to the existing blocks:

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

Then, in my JavaScript file, I have this stuff:

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;

/**
 * Create HOC to add spacing control to inspector controls of block.
 */
const withSpacingControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        // Do nothing if it's another block than our defined ones.
        if ( ! enableSpacingControlOnBlocks.includes( props.name ) ) {
            return (
                <BlockEdit { ...props } />
            );
        }

        const { spacing } = props.attributes;

        // add has-spacing-xy class to block
        if ( spacing ) {
            props.attributes.className = `has-spacing-${ spacing }`;
        }

        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody
                        title={ __( 'My Spacing Control' ) }
                        initialOpen={ true }
                    >
                        <SelectControl
                            label={ __( 'Spacing' ) }
                            value={ spacing }
                            options={ spacingControlOptions }
                            onChange={ ( selectedSpacingOption ) => {
                                props.setAttributes( {
                                    spacing: selectedSpacingOption,
                                } );
                            } }
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withSpacingControl' );

addFilter( 'editor.BlockEdit', 'extend-block-example/with-spacing-control', withSpacingControl );

But I immediatly get this error in the console log on the line after the return, that says:

Uncaught SyntaxError: expected expression, got '<'

What am I doing wrong?

1 Answer 1

0

The syntax where you return elements in tags like <Fragment> is called JSX. Browsers do not support JSX, it’s just a syntax for easier development. You’ll need a build process to compile it into regular Javascript. Most documentation and tutorials cover this. For example, the official docs: https://developer.wordpress.org/block-editor/how-to-guides/platform/custom-block-editor/#code-syntax

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.