0

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?

  • Your callback should return a props object and not an element. – Sally CJ Nov 23 '19 at 22:42
  • Ok, so blocks.getSaveContent.extraProps and blocks.getSaveElement are used in conjunction? One to set attributes, the other to modify content? Trying to figure out how these complement one another in terms of a final saved block that has some added content fields and attributes. – Brian Nov 24 '19 at 8:47
  • Yes, from the blocks.getSaveElement's definition - "used to replace or extend the element, for example using wp.element.cloneElement to modify the element’s props or replace its children, or returning an entirely new element". – Sally CJ Nov 25 '19 at 5:13

Your Answer

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

Browse other questions tagged or ask your own question.