Wordpress Gutenberg custom block

I try made custom block in wordpress gutenberg. I need create block like gallery but on output i need other html structur.

I write this code

var el = wp.element.createElement;
 
wp.blocks.registerBlockType('zlapchwile-gutenberg/custom-gallery-block', {
    title: 'Custom gallery',        // Block name visible to user
    icon: 'images-alt2',    // Toolbar icon can be either using WP Dashicons or custom SVG
    category: 'media',  // Under which category the block would appear
    attributes: {
        imgURL:{
            type: 'string',
            source: 'attribute',
            attribute: 'src',
            selector: 'img'
        },
        imgID:{
            type: 'number'
        }
    },
 
    edit: function() {
        return (
 
        );  // End return
 
    },  // End edit()
 
    save: function(props) {
        // How our block renders on the frontend
 
        return el( 'section', { className: 'gallery-block grid-gallery' },
                    el( 'div', { className: 'mygallery' },
                        el( 'div', { className: 'item' },
                            el( 'a', { className: 'lightbox' },
                                el( 'img', 
                                    { 
                                        className: 'img-fluid image scale-on-hover' 
                                    },
                                )
                            )
                        )
                    )
        );  // End return
 
    }   // End save()
});

I dont know how display in section edit: this

Topic block-editor gallery plugins Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.