Question

我一直在四处寻找为什么我的代码无法正常工作。我正在尝试使用以下代码创建WordPress Gutenberg块。我已经测试了来自不同网站的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>
    )
} });

Answer 2

您需要转换jsx并将组件反应到es2015中，这就是为什么会出现该错误的原因。您可以构建工具或Babel。

WordPress阻止注册ES6 / ESNext未捕获的语法错误：意外的令牌<

2 个答案: