Support » Developing with WordPress » WordPress Block Registration ES6 /ESNext Uncaught SyntaxError:Unexpected token >

  • I have been looking everywhere to see why my code will not work. I am trying to create a WordPress Gutenberg Block using the following code. I have tested 3 versions of code from different websites and have not been able to figure out why it fails on <div className={className}>

    PHP – functions.php

    function register_block_editor_assets() {
      $dependencies = array(
        'wp-blocks',    // Provides useful functions and components for extending the editor
        'wp-i18n',      // Provides localization functions
        'wp-element',   // Provides React.Component
        'wp-components' // Provides many prebuilt components and controls
      );
      wp_register_script( 'my-block-editor', get_stylesheet_directory_uri().'/js/testing2.js', $dependencies );
    }
    add_action( 'admin_init', 'register_block_editor_assets' );
    
    function register_block_assets() {
      wp_register_script( 'my-block', get_stylesheet_directory_uri().'/js/testing2.js', array( 'jquery' ) );
    }
    add_action( 'init', 'register_block_assets' );

    here is my JS file code.
    JS – testing2.js

    const { registerBlockType } = wp.blocks;
    const { Fragment } = wp.element;
    const {
        RichText,
        BlockControls,
        AlignmentToolbar,
    } = wp.editor;
    registerBlockType( 'example/example-block', {
      title = __('Example Block', 'example'),
      icon = 'screenoptions',
      category = 'common',
      attributes = {
        content: { // Parsed from HTML selector
          source: 'children',
          selector: 'p',
          type: 'array'
        },
        textColor: { // Serialized by default
          type: 'string'
        },
        isPinned: { // Pulled from REST API
          type: 'boolean',
          source: 'meta',
          meta: 'example_is_pinned'
        }
      },
      edit = ({ attributes, setAttributes, className, isSelected }) => {
          const {
            content
          } = attributes
          return (
            <div className={className}>
              <RichText
                className="example-content"
                value={content}
                onChange={(content) =>setAttributes({ content })} />
            </div>
          )
      }),
      save = ({ attributes }) {
          const {
            content
          } = attributes
          return (
            <div>
              <p>{content}</p>
            </div>
          ) 
      })
    };
    • This topic was modified 10 months, 2 weeks ago by  Jagir Bahesh.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @jagirbahesh,

    You have a syntax error in your js file.

    Try this code

    const { registerBlockType } = wp.blocks;
        const { Fragment } = wp.element;
        const {
            RichText,
            BlockControls,
            AlignmentToolbar,
        } = wp.editor;
        registerBlockType( 'example/example-block', {
            title :__('Example Block', 'example'),
            icon : 'screenoptions',
            category : 'common',
            attributes : {
                content: { // Parsed from HTML selector
                    source: 'children',
                    selector: 'p',
                    type: 'array'
                },
                textColor: { // Serialized by default
                    type: 'string'
                },
                isPinned: { // Pulled from REST API
                    type: 'boolean',
                    source: 'meta',
                    meta: 'example_is_pinned'
                }
            },
            edit(props){
                const {attributes, setAttributes, className} = props;
                    const {
                        content
                    } = attributes
                    return (
                        <div className={className}>
                            <RichText
                                className="example-content"
                                value={content}
                                onChange={(content) =>setAttributes({ content })} />
                        </div>
                    )
                },
            save(props){
            const {attributes} = props;
            const {
                content
            } = attributes
            return (
                <div>
                    <p>{content}</p>
                </div>
            )
        }
    });
    Jagir Bahesh

    (@jagirbahesh)

    Hello,

    Dixita Thanks for your efforts.
    I have one question here:

    NPM Build run is compossery if we are using ESNext method?
    Docs Link: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/

    In the docs they are not provide to run NPM build run command.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WordPress Block Registration ES6 /ESNext Uncaught SyntaxError:Unexpected token >’ is closed to new replies.