Как создать блок wordpress, выводящий html?

Я хочу сделать блок wordpress (gutenberg), в который вы можете вводить текст. Результатом будет расширяемое текстовое поле из начальной загрузки. https://getbootstrap.com/docs/4.0/components/collapse/

Пример документации wordpress не сработал. Итак, я использовал некоторый код php и javascript из учебника, чтобы попробовать создать блок wordpress в первый раз:

Functions.php

function mdlr_editable_block_example_backend_enqueue() {
    wp_enqueue_script(
        'mdlr-editable-block-example-backend-script', // Unique handle.
         get_template_directory_uri() . '/assets/js/block.js', // Block.js: We register the block here.
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
    );

block.js

/**
 * Editable Block Example
 *
 * https://github.com/modularwp/gutenberg-block-editable-example
 */
( function() {
    var __                = wp.i18n.__; // The __() function for internationalization.
    var createElement     = wp.element.createElement; // The wp.element.createElement() function to create elements.
    var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() function to register blocks.
    var RichText          = wp.editor.RichText; // For creating editable elements.

    /**
     * Register block
     *
     * @param  {string}   name     Block name.
     * @param  {Object}   settings Block settings.
     * @return {?WPBlock}          Block itself, if registered successfully,
     *                             otherwise "undefined".
     */
    registerBlockType(
        'mdlr/editable-block-example', // Block name. Must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        {
            title: __( 'Editable Block Example' ), // Block title. __() function allows for internationalization.
            icon: 'unlock', // Block icon from Dashicons. https://developer.wordpress.org/resource/dashicons/.
            category: 'common', // Block category. Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
            attributes: {
                content: {
                    type: 'string',
                    default: 'Editable block content...',
                },
            },

            // Defines the block within the editor.
            edit: function( props ) {
                var content = props.attributes.content;
                var focus = props.focus;

                function onChangeContent( updatedContent ) {
                    props.setAttributes( { content: updatedContent } );
                }

                return createElement(
                    RichText,
                    {
                        tagName: 'p',
                        className: props.className,
                        value: content,
                        onChange: onChangeContent,
                        focus: focus,
                        onFocus: props.setFocus
                    },
                );
            },

            // Defines the saved block.
            save: function( props ) {
                var content = props.attributes.content;

                return createElement( RichText.Content,
                    {
                        'tagName': 'div',
                        'value': content
                    }
                );
            },
        }
    );
})();

Этот код работает. Первым тестом, который я сделал, было изменение содержимого:

save: function( props ) {
                var content = props.attributes.content;

                return '<div> test </div>';
            }

Я пробовал это:

save: function( props ) {
                var content = props.attributes.content;

                return <div> test </div>;

Кажется, я что-то упускаю или неправильно истолковываю.

Может ли кто-нибудь указать мне правильное направление?