Issue #1524Opened October 17, 2018by gasserol0 reactions

Howto add Blocks?

Question

Hello all, it turns me crazy but I do not understand how to add blocks. I can write them myself following tutorial, but when I load plugin, like grapesjs-block-basic for example, blocks don't show. Here is my code:

var editor = grapesjs.init({
    // Indicate where to init the editor. You can also pass an HTMLElement
    container: '#gjs',
    // Get the content for the canvas directly from the element
    // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
    fromElement: true,
    // Size of the editor
    height: '90vh',
    width: 'auto',
    // Disable the storage manager for the moment
    storageManager: {
        //type: null
        id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
        type: 'local',          // Type of the storage
        autosave: true,         // Store data automatically
        autoload: true,         // Autoload stored data on init
        stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
        storeComponents: true,  // Enable/Disable storing of components in JSON format
        storeStyles: true,      // Enable/Disable storing of rules in JSON format
        storeHtml: true,        // Enable/Disable storing of components as HTML string
        storeCss: true,
    },

    plugins: ['gjs-blocks-flexbox', 'gjs-blocks-basic'],

    pluginsOpts: {
        'gjs-blocks-flexbox': {
            // options
        },
        'gjs-blocks-basic': {
            blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map']
        }
    },

    // Avoid any default panel
    panels: {
        defaults: [
            {
                id: 'layers',
                el: '.panel__right',
                // Make the panel resizable
                resizable: {
                    maxDim: 350,
                    minDim: 200,
                    tc: 0, // Top handler
                    cl: 1, // Left handler
                    cr: 0, // Right handler
                    bc: 0, // Bottom handler
                    // Being a flex child we need to change `flex-basis` property
                    // instead of the `width` (default)
                    keyWidth: 'flex-basis',
                },
            },

            {
                id: 'panel-switcher',
                el: '.panel__switcher',
                buttons: [
                    {
                        id: 'show-layers',
                        active: false,
                        label: 'Layers',
                        command: 'show-layers',
                        // Once activated disable the possibility to turn it off
                        togglable: true,
                    },
                    {
                        id: 'show-style',
                        active: false,
                        label: 'Styles',
                        command: 'show-styles',
                        togglable: true,
                    },

                    {
                        id: 'show-blocks',
                        active: true,
                        label: 'Blocks',
                        command: 'show-blocks',
                        togglable: true,
                    },

                    //...
                ]
            },

            {
                id: 'panel-devices',
                el: '.panel__devices',
                buttons: [
                    {
                        id: 'device-desktop',
                        label: '<i class="fas fa-desktop"></i>',
                        command: 'set-device-desktop',
                        active: true,
                        togglable: false,
                    },
                    {
                        id: 'device-tablet',
                        label: '<i class="fas fa-tablet-alt"></i>',
                        command: 'set-device-tablet',
                        togglable: false,
                    },
                    {
                        id: 'device-mobile',
                        label: '<i class="fas fa-mobile-alt"></i>',
                        command: 'set-device-mobile',
                        togglable: false,
                    }
                ],
            }
        ]
    },

    blockManager: {
        //appendTo: '#blocks',
        appendTo: '.blocks-container',
    },

    layerManager: {
        appendTo: '.layers-container'
    },

    selectorManager: {
        appendTo: '.styles-container'
    },

    styleManager: {
        appendTo: '.styles-container',
        sectors: [
            {
                name: 'General',
                open: false,
                buildProps: [
                    'float', 'display', 'position', 'top', 'right', 'left', 'bottom'
                ]
            },
            {
                name: 'Dimension',
                open: false,
                buildProps: [
                    'width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'
                ],
                properties: [
                    {
                        id: 'flex-width',
                        type: 'integer',
                        name: 'Width',
                        units: ['px', '%'],
                        property: 'flex-basis',
                        toRequire: 1,
                    }
                ]
            },
            {
                name: 'Decorations',
                open: false,
                buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
            },

            // {
            //     name: 'Dimension',
            //     open: false,
            //     // Use built-in properties
            //     buildProps: ['width', 'min-height', 'padding'],
            //     // Use `properties` to define/override single property
            //     properties: [
            //         {
            //             // Type of the input,
            //             // options: integer | radio | select | color | slider | file | composite | stack
            //             type: 'integer',
            //             name: 'The width', // Label for the property
            //             property: 'width', // CSS property (if buildProps contains it will be extended)
            //             units: ['px', '%'], // Units, available only for 'integer' types
            //             defaults: 'auto', // Default value
            //             min: 0, // Min value, available only for 'integer' types
            //         }
            //     ]
            // },
            {
                name: 'Extra',
                open: false,
                buildProps: ['background-color', 'box-shadow', 'custom-prop'],
                properties: [
                    {
                        id: 'custom-prop',
                        name: 'Custom Label',
                        property: 'font-size',
                        type: 'select',
                        defaults: '32px',
                        // List of options, available only for 'select' and 'radio'  types
                        options: [
                            { value: '12px', name: 'Tiny' },
                            { value: '18px', name: 'Medium' },
                            { value: '32px', name: 'Big' },
                        ],
                    }
                ]
            }
        ]
    },

    deviceManager: {
        devices: [
            {
                name: 'Desktop',
                width: '', // default size
            },
            {
                name: 'Tablet',
                width: '480px', // this value will be used on canvas width
                widthMedia: '768px', // this value will be used in CSS @media
            },
            {
                name: 'Mobile',
                width: '320px', // this value will be used on canvas width
                widthMedia: '480px', // this value will be used in CSS @media
            }
        ]
    },

});


Can somebody explain me what I'm missing? I think that loading grapesjs-blocks-basic.min.js should make those blocks visible in automatic way, but I'm wrong in believing this? Please help me and put me on the right way.. many thanks in advance

Answers (2)

gasserolOctober 17, 20180 reactions

found the problem, was loading wrong js file.. sorry.

lock[bot]October 17, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.