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 '<'