最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

block editor - JSX in WordPress Plugin Development

programmeradmin1浏览0评论

plugin.php

<?php

/**
 * Plugin Name: Test
 * Version: 1.0.0
 */

defined( 'ABSPATH' ) || exit;

function test__register_block() {

    if ( ! function_exists( 'register_block_type' ) ) {
        // Gutenberg is not active.
        return;
    }

    wp_register_script(
        'test',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    register_block_type( 'wp/test', array(
        'editor_script' => 'test',
    ) );

}
add_action( 'init', 'test__register_block' );

block.js

'use strict';

const { __ } = wp.i18n;
const { createElement } = wp.element;
const { registerBlockType } = wp.blocks;

registerBlockType( 'wp/test', {
    title: 'Test',
    icon: 'wordpress',
    category: 'widgets',
    keywords: '',
    description: '',
    edit( props ) {

        let jsx = '';

        return jsx;
    },
    save() {
        return null;
    },
} );

With an empty jsx variable, the custom block does appear in the Gutenberg Editor.

The issue:

If I add content in JSX format, the custom block does not show.

let jsx = [
    <div></div>
];

This error message appears in Console:

Uncaught SyntaxError: Unexpected token '<'

发布评论

评论列表(0)

  1. 暂无评论