How to prepend block content in getSaveElement filter?

Question

I am using JSX format to make some edits to block content. My code is

// do something with these attributes - add header to section if exercise type block
const addContentTypeExtraProps = ( saveElementProps, blockType, attributes ) => {
    // Do nothing if it's another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( blockType.name ) ) {
        return saveElementProps;
    }
    if ( attributes.contenttitle ) {
        // add header with anchor link and class name
        console.log(saveElementProps);
        var title_slug = attributes.contenttitle.trim().split(/s+/).join('-');
        const Heading = "h" + 3;
        return (
            <Heading className=''>Test</Heading>+{saveElementProps}
        );
    }

};

addFilter( 'blocks.getSaveContent.extraProps', 'my-mods/get-save-content/extra-props', addContentTypeExtraProps );

This results in

Block validation: Block validation failed for `uagb/section` 

In block editor I see

Current
<section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-undefined has-contenttype-exercise" id="uagb-section-db1983e4-fbaa-428b-84d7-15b6aa2a752c"><div class="uagb-section__overlay"></div><div class="uagb-section__inner-wrap"></div></section>
After Conversion
<section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-undefined has-contenttype-exercise" id="uagb-section-db1983e4-fbaa-428b-84d7-15b6aa2a752c"><div class="uagb-section__overlay"></div><div class="uagb-section__inner-wrap"></div></section>

So my added HTML is not showing up, and the Current and After Conversion are showing identical.

I am new to React so probably not understanding how to use this getSaveElement filter…

Ideas?

0
Brian 2 years 2019-11-22T11:35:41-05:00 0 Answers 118 views 0

Leave an answer

Browse
Browse