Gutenberg: Allow additional formatting in RichText

Question

I have created a fairly simple accordion block, and it works great for basic text. The problem is that the control I am using for the accordion content is the RichText, which only allows for basic formatting such as bold.

What if I wanted to create an Unordered List as well as basic text? I am currently using multiline: "p", but how can I add additional elements so that I can also have UL elements in there as well?

The only two ideas I can think of, I cannot figure out how to implement. The first is to extend the block toolbar with BlockControls to include additional formatters for UL, and the second is to use another element instead of RichText - such as Freeform (which might have been renamed to Classic Editor?) - but I cannot find any documentation on these.

Here is an example of my current code:

ATTRIBUTES

attributes: {
    title: {
        type: 'string',     
        selector: '.hd-accordion-title',
    },  
    content: {
        type: 'array',
        source: 'children',
        selector: '.hd-accordion-content',
    }
},

EDIT

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

        function onChangeTitle(newTitle) {
            props.setAttributes({
                title: newTitle
            });
        }

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

        return [
            (
                <div className={"hd-accordion"}>
                    <RichText
                        tagName="h3"
                        className= "hd-accordion-title"
                        value= { title }
                        onChange= { onChangeTitle }
                        placeholder = "Title"
                        keepPlaceholderOnFocus = { true }
                        multiline= { false }
                    />              
                    <RichText
                        tagName="div"
                        className="hd-accordion-content"
                        value={ content }
                        onChange= { onChangeContent }
                        placeholder = "content"
                        multiline="p"
                    />
                </div>
            )
        ];
    },

Answer 1

You can register new formatting options like this-

Adding simple formatting button

registerFormat( 'bold', {
    selector: 'strong',
    edit( { isActive, toggleFormat } ) {
        return (
            <Fragment>
                <Shortcut
                    type="primary"
                    key="b"
                     onUse={ () => toggleFormat() }
                />
                <ToolbarControls>
                    <ToolbarButton
                        icon="editor-bold",
                        title={ __( 'Bold' ) }
                        isActive ={ isActive }
                        onClick={ () => toggleFormat() }
                    />
                </ToolbarControls>
            </Fragment>
        );
    },
} );

Adding A Link Button

registerFormat( 'link', {
selector: 'a',
attributes: {
    url: {
        source: 'attribute',
        attribute: 'href',
    },
},
edit( { isActive, removeFormat } ) {
    return (
        <Fragment>
            <Shortcut
                type="access"
                key="s"
                onUse={ () => removeFormat() }
            />
            <Shortcut
                type="access"
                key="a"
                onUse={ /* Set state and pass to LinkContainer */ }
            />
            <Shortcut
                type="primary"
                key="k"
                onUse={ /* Set state and pass to LinkContainer */ }
            />
            <ToolbarControls>
                { isActive && <ToolbarButton
                    icon="editor-unlink",
                    title={ __( 'Unlink' ) }
                    onClick={ () => removeFormat() }
                /> }
                { ! isActive && <ToolbarButton
                    icon="admin-links",
                    title={ __( 'Link' ) }
                    onClick={ () => /* Set state and pass to LinkContainer */ }
                /> }
            </ToolbarControls>
            <LinkContainer { ...props } />
        </Fragment>
    );
},
} );

Adding an Image button

registerFormat( 'image', {
selector: 'img',
attributes: {
    url: {
        source: 'attribute',
        attribute: 'src',
    },
},
edit: class ImageFormatEdit extends Component {
    constructor() {
        super( ...arguments );
        this.state = {
            modal: false;
        };
    }

    openModal() {
        this.setState( { modal: true } )
    }

    closeModal() {
        this.setState( { modal: false } )
    }

    render() {
        const { insertObject } = this.props;

        return (
            <Fragment>
                <InserterItems>
                    <InserterItem
                        icon="inline-image",
                        title={ __( 'Inline Image' ) }
                        onClick={ openModal }
                    />
                </InserterItems>
                { this.state.modal && <MediaUpload
                    type="image"
                    onSelect={ ( { id, url, alt, width } ) => {
                        this.closeModal()
                        insertObject( {
                            src: url,
                            alt,
                            class: `wp-image-${ id }`,
                            style: `width: ${ Math.min( width, 150 ) }px;`,
                        } );
                    } }
                    onClose={ this.closeModal }
                    render={ ( { open } ) => {
                        open();
                        return null;
                    } }
                /> }
            </Fragment>
        );
    }
},
} );

You might encounter few bugs here and there. Relevant ticket