Guenberg Block Not Saving - When additional div added

admin管理员组

文章数量:1391746

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 → /.
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 <div className="col-sm-3"> in save function no error is displayed and no output in shown on front end.. When remove the <div className="col-sm-3"> 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

本文标签： Guenberg Block Not SavingWhen additional div added