RichText not passing value to render callback

[rogerlos]

I have a couple of RichText fields in my block, and a few other controls of misc types (none RichText) in my inspector. Simplified, this is how they're configured:

const CFG = {
    rich : {
        className              : 'my-rich-classname',
        keepPlaceholderOnFocus : true,
        placeholder            : 'Title',
        selector               : '.my-rich-classname',
        source                 : 'html',
        tagName                : 'h2',
    },
    simple : {
        className : 'my-simple-classname',
        label         : 'Choose...',
        type          : 'string',
        options : []
    }
};

registerBlockType( 'example/block', {
    // usual stuff
    attributes: {
        ...CFG
    },
    edit: function( props ) {
        const onTextChange = ( key, val ) => {
            props.setAttributes( { [ key ] : val } );
        };
        let rich   = props.attributes.rich;
        let simple = props.attributes.simple;
        console.log( 'edit', props.attributes );
        return(
            wp.element.createElement(
                'div',
                {},
                wp.element.createElement(
                    wp.editor.InspectorControls,
                    {},
                    wp.element.createElement(
                        wp.components.SelectControl,
                        {
                            label     : CFG.simple.label,
                            className : CFG.simple.className,
                            options   : CFG.simple.options,
                            value     : simple,
                            onChange  : val => {
                                onTextChange( 'simple', val )
                            }
                        }
                    )
                ),
                wp.element.createElement(
                    wp.editor.RichText,
                    {
                        className              : CFG.rich.className,
                        keepPlaceholderOnFocus : CFG.rich.keepPlaceholderOnFocus,
                        placeholder            : CFG.rich.placeholder,
                        tagName                : CFG.rich.tagName,
                        value                  : rich,
                        onChange               : val =>  {
                            onTextChange( 'rich', val )
                        }
                    }
                ),
            )
        )
    },
    save: function( props ) {
        console.log( 'save', props.attributes );
        return null;
    }
}

If I type "Howdy" into rich and make a selection in simple, my console reflects every keystroke properly, eventually ending up with:

edit > Object { rich: "Howdy", simple: "123abc" }

And when auto-saving or when clicking "save":

save > Object { rich: "Howdy", simple: "123abc" }

So the "rich" property is being updated and seemingly should be able to be saved...are certainly passed as attribute to the callback rendering function, eh?

But examining wp_posts, here's what's in post_content:

<!-- wp:example/block {"simple":"abc123"} /-->

In our callback, doing a var_dump( func_get_args() ):

0 => 
    array (size=1)
        'simple' => string 'abc123' (length=6)
1 =>
    string '' (length=0)

It does not matter if I format RichText or not.

[rogerlos]

I'm rolling my eyes, but a workaround is adding an extra attribute, call it richValue, assigning it a type of string, and then making a new save function in edit:

const onRichChange = ( key, bugfix, val ) => {
    props.setAttributes( { [key] : val, [bugfix] : val } );
}

...
onChange: val => {
   onRichChange( 'rich', 'richValue', val );
}

This fits in perfectly with the rest of my code, I must admit. Ok, off to my therapist.

[rogerlos]

One more note. What I wrote as a work-around does not work, it doesn't seem, unless you make two calls to setAttributes:

const onRichChange = ( key, bugfix, val ) => {
    props.setAttributes( { [key] : val } );
    props.setAttributes( { [bugfix] : val } );
}

Maybe there's a clue there?

[youknowriad]

You should remove "source" and "selector" from your rich attribute's definition to save it to the comment. If you use source: "html" it means you're trying to save to the HTML in post_content and in this case your save function returns null so it's not the case.

I'm closing now, let me know if it fixes your issue.