Erreur de syntaxe non détectée lors de la fermeture de div dans wordpress 5.0

J’essaie d’ajouter un bloc personnalisé dans wordpress 5.0 qui a gutenberg.

Je suis le lien ci-dessous mais le code de ESNext ne fonctionne pas pour moi. Il me donne l’erreur de syntaxe. Lien : https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/

Ci-dessous mon code functions.php :

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        get_template_directory_uri().'/step-01/block.js',
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

Mon fichier js est block.js et ci-dessous le code de ce fichier :

const { registerBlockType } = wp.blocks;
const blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-01', {
    title: 'Hello World (Step 1)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit() {
        return <p> Test </p>;
    },

    save() {
        return <p> Test </p>;
    },
} )

Le problème se situe au niveau de la balise HTML de fermeture.

Merci d’avance

Solution n°1 trouvée

Vous ne pouvez pas utiliser ESNext directement, vous avez besoin d’un transpileur comme babel pour convertir esnext en es2015. WordPress ne peut pas consommer esnext directement.