Gutenberg block can't save richtext

Question

I'm creating a block and using rich text to save some text this is my edit function.

    edit: (props) => {

    const { attributes: { content, backgroundImage }, setAttributes } = props;

    const onImageSelect = (imageObject) => {
        setAttributes({ backgroundImage: imageObject.sizes.full.url });
    }

    const onChangeContent = (newContent) => {
        setAttributes({ content: newContent });
    };

    console.log(content);

    return (
        <div className={props.className}>

            <MediaUpload
                onSelect={onImageSelect}
                type="image"
                value={backgroundImage}
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />

            <img src={backgroundImage} alt="eherh" />



            <div className={'caption'}>
                <RichText
                    tagName={"p"}
                    className={'imgCtaContent'}
                    onChange={onChangeContent}
                    value={content}
                    placeholder="Enter text..."
                />
            </div>

        </div>
    );
},

and this is my save function: -

    save: (props) => {

    return (
        <div className={props.className}>

            <RichText.Content tagName={"p"} value={props.attributes.content} />

        </div>
    );
},

I can see when I type into the block when I'm editing it that the console.log(content) displays the content but when I save the page the text isn't saved.

Where am I going wrong?

Answer 1

I had a similar bug and solved it by just declaring the "type" (not "source" and "selector") when registering the Block Type.

attributes: {
    content: {
        type: 'string',
        // source: 'html', 
        // selector: 'h2',
    },
},  

Answer 2

Couple of things to try - remove some of the curly braces { } because those are only needed when you're referring to variables, and try just directly calling onChange:

        <div className={'caption'}>
            <RichText
                tagName="p"
                className='imgCtaContent'
                onChange={ ( content ) => { setAttributes( { content } ) } }
                value={content}
                placeholder="Enter text..."
            />
        </div>

Also in save(), setting a value on RichText.content isn't needed and may be confusing things. Just use

return (
    <div className={props.className}>

        <RichText.Content />

    </div>
);