Guenberg Block Not Saving – When additional div added

Question
registerBlockType( 'cgb/icon-box', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Icon Box' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
    __( 'icon-box' ),
    __( 'icon-box Example' ),
    __( 'create-guten-block' ),
],

attributes:{
    heading:{
        type: 'string',
        selector:'h2'
    },
    text:{
        type:'string',
        source: 'html',
        selector: 'p'
    },
    imageAlt: {
attribute: 'alt',
selector: '.card__image'
  },
  imageUrl: {
    attribute: 'src',
    selector: '.card__image'
  }
},

edit: ({attributes,setAttributes}) => {
    function onChangeHeading(heading){
        setAttributes({heading : heading});
    }
    function onChangeText(text){
        setAttributes({text : text});
    }
    function onSelectImage(image){
        setAttributes({imageUrl:image.url})
    }
    return (
        <div className="icon-box">
        <MediaUpload
        //onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: imageUrl.src }); } }
        onSelect={ onSelectImage}
        type="image"
        value={ attributes.imageUrl }
        render={ ({ open }) => <button onClick={open}>Open</button> }
    />
        <img src={attributes.imageUrl} />
        <RichText tagName="h2" key="editable" onChange={onChangeHeading} value={attributes.heading} />
        <RichText tagName="p" key="editable1" onChange={onChangeText} value={attributes.text} />
        </div>

        );
},

save: ({attributes}) => {
    return (
        <div className="icon-box">
        <div className="col-sm-3">
            <img src={attributes.imageUrl} />
            <RichText.Content tagName="h2" value={attributes.heading}/>
            <RichText.Content tagName="p" value={attributes.text} />
            </div>
        </div>);
}

});

The problem is when i add in save function no error is displayed and no output in shown on front end.. When remove the the code block saves and show the output on frontend.

One more thing to notice the block didn’t break in guteneditor… but no output on frontend

0
propatel 10 months 0 Answers 48 views 0

Leave an answer