block editor - Gutenberg JavaScript error

admin管理员组

文章数量:1200396

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 } = wppose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wpponents;

/**
 * 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?

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?

• block-editor

Share Improve this question asked Jun 12, 2022 at 9:26 Micke HasselqvistMicke Hasselqvist 1533 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： block editorGutenberg JavaScript error