javascript - WordPress 阻止注册 ES6/ESNext Uncaught SyntaxError : Unexpected token <

Question

我一直在到处寻找为什么我的代码不能工作。我正在尝试使用以下代码创建一个 WordPress Gutenberg Block。我已经测试了来自不同网站的 3 个版本的代码，但无法弄清楚为什么它在 <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' );

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>
      ) 
  })
};

Answer 1

您的 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(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>
    )
} });