- Revolvapp

Blocks are the basic building unit of the template. Everything inside the template is made up of blocks. This speeds up the creation and editing of the template, making it solid and in one style.

Blocks are added via popup adding a block, which is accessible by clicking the plus button on the toolbar.

Here is an example of how you can create a block and place an image and text component in it.

Revolvapp.add('block', 'block.block-name', {
    mixins: ['block'],
    type: 'block-name',
    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);
    }
});

The block has several parameters:

type
- It's a block type: letters, numbers and hyphens are allowed.
title
- The title of the block to be displayed in the popup of block adding.
section
- The section where the block will be. There are only four options for sections: one, two, three are sections by the number of columns in a block; and misc for any other blocks.
icon
- The svg icon of the block. You can download a Sketch file with an example of how to make icons for blocks in Revolvapp style.

Here is an example of how to connect a block file. Just connect a link to the block js file after the Revolvapp file. The block will be added to Revolvapp automatically and will appear in popup of block adding.

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

    <!-- revolvapp css -->
    <link rel="stylesheet" href="/revolvapp-dist/revolvapp.min.css" />
</head>
<body>

    <!-- element -->
    <div id="myemail"></div>

    <!-- revolvapp js -->
    <script src="/revolvapp-dist/revolvapp.min.js"></script>

    <!-- my new block -->
    <script src="/path-to-blocks/my-block.js"></script>

    <!-- call -->
    <script>
        Revolvapp('#myemail', {
            editor: {
                path: '/revolvapp-dist/',
                template: '/my-folder/template.html'
            }
        });
    </script>
</body>
</html>

Docs

Documentation

Create your own block