Back to Bootstrap 4 Page Builder Support

Slevin K.
Slevin K.

Hi,

Your plugin is still very usefull, i'm trying to create a custom block which calls a partial, and i need to pass a variable to the partial, Until there, i just add a custom block like this

CustomBlock.add('swiper-block', {
    label: 'Slider',
    category: 'Basic',
    content:`<div class="container-fluid mb-5 pt-5" data-gjs-type="swiper">{% partial 'carousel' %}</div>`,
    attributes: {
        class: 'fa oc-icon-arrows-h'
    }
})

and i change the text in it manually, but i would like to have an input field in the "component settings" section, is it possible to extend traits from the backend settings of the plugin ?

best, L.

Last updated

Vladimir
Vladimir

Hi.

I added two blocks for contents and partials.

Slevin K.
Slevin K.

Thanks for this improvement but i was asking if it's possible to add it manually in the backoffice area by myself, like a customblock.add() ?

Best,

Vladimir
Vladimir

I think it's possible.

For an example, look at this: https://pastebin.com/bt7RXc63

Last updated

Slevin K.
Slevin K.

Thanks Vladimir,

it works but only when you add the block for the first time. When you come back to the editor, the custom gps type is changed by a text type :\ here is my code :


        isComponent: el => {
            if (el.attributes) {

                if(el.attributes.getNamedItem('swiper')) {
                    var r = el.attributes.getNamedItem('swiper').value;

                    if(r == '1'){

                        return true;
                    }

                }

            }

        },
        model: {
            defaults: {
                traits: [
                'id',
                {
                    type: 'select',
                    name: 'partial',

                    options: [
                        'homepage',
                        'experience',
                        'courchevel',
                        'bien-etre'
                    ]
                },

                ]

            },
            init() {
                this.on('change:attributes:partial', this.handleChange);
                this.handleChange();
            },
            handleChange() {
                const partial = this.getAttributes().partial;

                if(this.getAttributes()['swiper'] == '1'){          

                    if (partial) {

                        this.attributes['content'] = '';
                        this.components(`{% partial 'carousel' scope='${partial}' %}`);

                    } else {
                        this.attributes['content'] = '';
                        this.components(`Select partial`);
                    }
                }
            }
        }
    });

CustomBlock.add('swiper-block', {
    label: 'Slider',
    category: 'Components',
    content:`<div class="container-fluid mb-5 pt-5" data-gjs-type="swiper" swiper="1"></div>`,
    attributes: {
        class: 'fa fa-picture-o'
    }
})```
Vladimir
Vladimir

I slightly changed the system of custom blocks. Now they are connected as a grapesjs plugin.

Update the Builder. And now your code should work correctly.

If not, here is the working code of your block: https://pastebin.com/pc9P3YWR

Slevin K.
Slevin K.

Thanks a lot :)

just to let you know that i was using this :

var head = Editor.Canvas.getDocument().head;
head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/themes/rusty-rustybootstrap4blank/assets/custom-css/start-template.css">');

but now it returns me an error cause getDocument() is empty.

Best L.

Vladimir
Vladimir

Now the code for the custom blocks has been moved to the separate grapesjs plugin PB4CustomBlocks(http://your-site/b4bulder-custom-blocks.js). And grapesjs plugins are loaded before loading the document and getDocument () has nothing to return.

You need to wrap this code in the document.ready event.

    $( document ).ready(function() {

    var head = Editor.Canvas.getDocument().head;
    head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/themes/rusty-rustybootstrap4blank/assets/custom-css/start-template.css">');

    });

Last updated

Slevin K.
Slevin K.

Ok thanks a lot :)

1-9 of 9