Create a custom block

This example shows how to create your own block.

Select any block in the template and click the "plus" button on the toolbar, in the Misc section you will see the added block icon.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Revolvapp</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/revolvapp.css" />
    </head>
    <body>
        <!-- element -->
        <div id="myemail"></div>

        <!-- js -->
        <script src="/your-folder/revolvapp.js"></script>

        <script>
        // Custom block
        Revolvapp.add('block', 'block.myblock', {
            mixins: ['block'],
            type: 'myblock',
            title: 'My block',
            icon: '<svg ...></svg>',
            section: 'misc',
            build: function() {

                // block
                this.block = this.app.create('tag.block', {
                    padding: '40px'
                });

                // components
                var image = this.app.create('tag.image', {
                    placeholder: true
                });

                var text = this.app.create('tag.text', {
                    html: this.lang.get('placeholders.lorem'),
                    margin: '10px 0 0 0'
                });

                // add
                this.block.add(image);
                this.block.add(text);
            }
        });

        // Call
        Revolvapp('#myemail', {
            editor: {
                path: '/your-path-to-revolvapp-folder/',
                template: '/your-path-to-template-file.html'
            },
            image: {
                upload: '/my-backend-upload/'
            }
        });
        </script>
    </body>
</html>