【カスタムブロック】aタグに入力値が出力されません

Question

前提・実現したいこと

バナー型のカスタムブロックを作成中で、
aタグ部分に、RichTextで入力してもらった値を出力させたいです。

発生している問題・エラーメッセージ

入力値が出力されません。

ご教授のほど、宜しくお願いいたします。

該当のソースコード

// バナーのブロック
( function( blocks, editor, i18n, element, components, _ ) {
    var __ = i18n.__;
    var el = element.createElement;
    var RichText = editor.RichText;
    var MediaUpload = editor.MediaUpload;

    blocks.registerBlockType( 'rslb-block/banner', {
        title: __( 'バナー', 'rslb-block' ),
        icon: 'megaphone',
        category: 'custom-block',
        attributes: {
            bannerMediaID: {
                type: 'number',
            },
            bannerMediaURL: {
                type: 'string',
                source: 'attribute',
                selector: 'img',
                attribute: 'src',
            },
            RichTextText: {
                type: 'array',
                default: '',
                source: 'children',
                selector: '.RichTextText',
            },
            RichTextLink: {
                type: 'array',
                default: '',
                source: 'children',
                selector: '.RichTextLink',
            },
        },

        edit: function( props ) {
            var attributes = props.attributes;

            var bannerSelectImage = function( media ) {
                return props.setAttributes( {
                    bannerMediaURL: media.url,
                    bannerMediaID: media.id,
                } );
            };

            return el(
                'div',
                { className: props.className },
                el(
                    'div',
                    { className: 'banner-area' },
                    el(
                        'div',
                        { className: 'banner-text-area' },
                        el( RichText, {
                            tagName: 'div',
                            className: 'RichTextText',
                            inline: false,
                            placeholder: i18n.__(
                                'ここにBannerのテキストを入力',
                                'rslb-block'
                            ),
                            value: props.attributes.RichTextText,
                            onChange: function( value ) {
                                props.setAttributes( { RichTextText: value } );
                            },
                        } ),
                        el( RichText, {
                            tagName: 'div',
                            className: 'RichTextLink',
                            inline: false,
                            placeholder: i18n.__(
                                'ここにBannerのリンクを入力',
                                'rslb-block'
                            ),
                            value: props.attributes.RichTextLink,
                            onChange: function( value ) {
                                props.setAttributes( { RichTextLink: value } );
                            },
                        } ),
                    ),
                    el(
                        'div',
                        { className: 'banner-image' },
                        el( MediaUpload, {
                            onSelect: bannerSelectImage,
                            allowedTypes: 'image',
                            value: attributes.bannerMediaID,
                            render: function( obj ) {
                                return el(
                                    components.Button,
                                    {
                                        className: attributes.bannerMediaID
                                            ? 'image-button'
                                            : 'button button-large',
                                        onClick: obj.open,
                                    },
                                    ! attributes.bannerMediaID
                                        ? __( 'Banner画像を選択', 'rslb-block' )
                                        : el( 'img', { src: attributes.bannerMediaURL } )
                                );
                            },
                        } )
                    ),
                ),
            )
        },
        save: function( props ) {
            var attributes = props.attributes;

            return el(
                'div',
                { className: props.className },
                attributes.bannerMediaURL &&
                ('a',{ href: attributes.RichTextLink },　←該当部分
                    el( RichText.Content, {
                        tagName: 'div',
                        className: 'RichTextLink',
                        value: attributes.RichTextLink
                    } ),
                    el( RichText.Content, {
                        tagName: 'div',
                        className: 'RichTextText',
                        value: attributes.RichTextText
                    } ),
                    el(
                        'div',
                        { className: 'banner-image gray-shadow-7' },
                        el( 'img', { src: attributes.bannerMediaURL } )
                    )
                )
            );
        },
    } );
} )(
    window.wp.blocks,
    window.wp.editor,
    window.wp.i18n,
    window.wp.element,
    window.wp.components,
    window._
);

Answer 1

('a' → el('a'

第三引数のchildrenは配列にするか
Fragmentコンポーネントでひとまとまりに

RichTextはaタグを含みうるので
RichTextをaタグで囲むのはあまり望ましくない