Почему RichText не сохраняется правильно в блоке WordPress?

Question

Я пытаюсь использовать редактор RichText в блоке WordPress, и, похоже, не могу правильно его сохранить.

Ниже приведен мой код:

(function (blocks, element, editor, i18n) {
    var el = element.createElement;
    RichText = editor.RichText
    MediaUpload = editor.MediaUpload


    blocks.registerBlockType('myblock/heroblock', {
        title: 'Hero Block',
        icon: 'universal-access-alt',
        category: 'layout',
        attributes: {
            heading: {
                type: 'string',
                source: 'text',
                selector: 'h1'
            },
            lead: {
                type: 'string',
                source: 'text',
                selector: 'p'
            },
            content: {
                source: 'html',
                selector: 'div'
            },
            imgUrl: {
                type: 'string',
                source: 'attribute',
                selector: 'img',
                attribute: 'src'
            },
            imgAlt: {
                type: 'string',
                source: 'attribute',
                selector: 'img',
                attribute: 'alt'
            },
            imgId: {
                type: 'number',
            },
            link: {
                type: 'string',
                source: 'attribute',
                selector: 'a',
                attribute: 'href'
            }
        },
        edit: function (props) {

            function onImageSelect(media) {
                console.log(media);
                return props.setAttributes({ imgAlt: media.alt, imgUrl: media.url, imgId: media.id });
            }
            function onChangeHeading(val) {
                props.setAttributes({ heading: val });
            }
            function onChangeLead(val) {
                props.setAttributes({ lead: val });
            }
            function onChangeContent(newContent) {
                props.setAttributes({ content: newContent });
            }
            function onChangeLink(val) {
                props.setAttributes({ link: val });
            }
            return [
                el(
                    MediaUpload,
                    {
                        label: 'Image',
                        type: "image",
                        onSelect: onImageSelect,
                        className: props.className,
                        render: function (media) {

                            /*var buttonContent;

                            if (media.id){
                            buttonContent = el('img', {src: media.url});
                            }
                            else {
                                buttonContent = _( 'Upload Image' );
                            }                
                            */
                            var classes = media.id ? 'image-button' : 'button button-large'
                            return el(
                                wp.components.Button,
                                {
                                    className: classes,
                                    onClick: media.open
                                },
                                __('Upload Image')

                            )
                        }
                    }
                ),
                el(
                    wp.components.TextControl,
                    {
                        label: 'Heading',
                        value: props.attributes.heading,
                        onChange: onChangeHeading,
                        className: props.className
                    }
                ),
                el(
                    wp.components.TextControl,
                    {
                        label: 'Lead',
                        value: props.attributes.lead,
                        onChange: onChangeLead,
                        className: props.className
                    }
                ),
                el(
                    wp.components.TextControl,
                    {
                        label: 'Button Link',
                        value: props.attributes.link,
                        onChange: onChangeLink,
                        className: props.className
                    }
                ),
                el(

                    RichText,
                    {

                        tagName: 'div',
                        className: props.className,
                        onChange: onChangeContent,
                        value: props.attributes.content,
                        placeholder: 'Add Content Here...'
                    }
                )
            ];
        },
        save: function (props) {

            return el(
                'section',
                { className: 'hero' },
                el('img', { src: props.attributes.imgUrl, alt: props.attributes.imgAlt, }),
                el('div', { className: 'text' },
                    el('h1', {}, props.attributes.heading),
                    el('p', { className: 'lead' }, props.attributes.lead),
                    el('RichText.Content', { tagName: 'div', value: props.attributes.content }),
                    el('a', { className: 'btn-theme', href: props.attributes.link }, 'Contact')
                )
            );
        },
    });
}(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor,
    window.wp.i18n,
));

При просмотре блока на моей странице я ожидаю увидеть содержимое в атрибуте значения, однако содержимое не отображается на странице.

При просмотре источника страницы я вижу следующее:

<section class="wp-block-heroblock hero">
        <img src="https://urltotheimage.com/image.jpg"
            alt="John Doe">
        <div class="text">
            <h1>Heading</h1>
            <p class="lead">Lead text</p>
            <richtext.content tagname="div" value="Content line 1<br>Content line 2"></richtext.content>
            <a class="btn-theme" href="/contact">Contact</a>
        </div>
</section>

Когда я пытаюсь вернуться для редактирования страницы, я получаю это сообщение: «Этот блок содержит неожиданное или недействительное содержимое.»

В консоли есть сообщение:

    Content generated by `save` function:

    <section class="wp-block-heroblock hero"><img src="https://urltotheimage.com/image.jpg" alt="John Doe"/><div class="text"><h1>Heading</h1><p class="lead">Lead text</p><RichText.Content tagname="div" value="<h1&gt;Heading</h1&gt;<p class=&quot;lead&quot;&gt;Lead text</p&gt;<richtext.content tagname=&quot;div&quot; value=&quot;Content line 1<br&gt;Content line 2&quot;&gt;</richtext.content&gt;<a class=&quot;btn-theme&quot; href=&quot;/contact&quot;&gt;Contact</a&gt;"></RichText.Content><a class="btn-theme" href="/contact">Contact</a></div></section>

    Content retrieved from post body:

    <section class="wp-block-heroblock hero"><img src="https://urltotheimage.com/image.jpg" alt="John Doe"/><div class="text"><h1>Heading</h1><p class="lead">Lead text</p><RichText.Content tagname="div" value="Content line 1<br&gt;Content line 2"></RichText.Content><a class="btn-theme" href="/contact">Contact</a></div></section>

Я проверил документацию для редактора RichText, и мне кажется, что я следовал синтаксису.

Может Кто-нибудь, пожалуйста, просветите меня, что не так с кодом?