1

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?

0

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>
);
| improve this answer | |
  • Hmmmmm.... still blank I think this might be more to do with my attribute how do I point to the p tags in caption? content: { type: 'array', source: 'html', multiline: 'p', selector: 'p', }, – Astrid Feb 11 at 22:56
  • You'll need to have that same className in the save() function. So instead of returning <div className={props.className}> use <div className="caption"> – WebElaine Feb 12 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.