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 5 years, 11 months ago by Jagir Bahesh.