gistfile1.txt

const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls, MediaUpload  } = wp.editor;

registerBlockType('custom/highlights', {
    title: 'Highlights',
    icon: 'universal-access-alt',
    category: 'layout',
    attributes: {
        content: {
            type: 'object',
            default: {
                heading: {
                    1: 'Heading',
                    2: 'Heading',
                    3: 'Heading',
                },
                paragraph: {
                    1: 'Content',
                    2: 'Content',
                    3: 'Content',
                }
            },
        },
    },
    edit(props) {

        const {
            setAttributes,
            attributes
        } = props;

        const {backgroundImage} = props.attributes;

        function onImageSelect(imageObject) {
            setAttributes({
                backgroundImage: imageObject.sizes.full.url
            })
        }


        const boxes = [];

        for(let i of [1, 2, 3]) {
            boxes.push(
                <div className={'box'}>
                    <RichText
                        tagName="h2"
                        value={attributes.content.heading[i]}
                        onChange={(content) => {
                            attributes.content.heading[i] = content;
                            setAttributes({content: attributes.content});
                        }}
                    />
                    <RichText
                        tagName="p"
                        value={attributes.content.paragraph[i]}
                        onChange={(content) => {
                            attributes.content.paragraph[i] = content;
                            setAttributes({content: attributes.content});
                        }}
                    />
                    <RichText
                        tagName="a"
                        className={'button'}
                        value={attributes.content.button[i]}
                        onChange={(content) => {
                            attributes.content.button[i] = content;
                            setAttributes({content: attributes.content});
                        }}
                    />
                </div>
            );
        }

        return ([
            <section className={'highlights section'}>
                <div className={'container'}>
                    <div className={'boxes'}>
                        {boxes}
                    </div>
                </div>
            </section>
        ]);
    },
    save(props) {

        const { attributes} = props;
        const {backgroundImage } = props.attributes;


        const boxes = [];

        for(let i of [1, 2, 3]) {
            boxes.push(
                <div className={'box'}>
                    <RichText.Content
                        tagName="span"
                        value={attributes.content.heading[i]}
                    />
                    <RichText.Content
                        tagName="p"
                        value={attributes.content.paragraph[i]}
                    />
                </div>
            );
        }

        return (
            <section className={'highlights section'}>
                <div className={'container'}>
                    <div className={'boxes'}>
                        {boxes}
                    </div>
                </div>
            </section>
        );
    },
});