Default style for custom blocks

Question

Hi, I'm using GrapesJS to a page builder inside a Prestashop website. The idea is to set default template stored in DB with custom Blocks. Everything working fine about the store and the load of the template. My problem is that I want to use only custom blocks that i created and added to the BlockManager but with default CSS. I'm able to put CSS but how do I set media queries for those blocks by default ? The users of the page builder will only have to drag the blocks and those one should be responsive by default. This is my code :

editor.BlockManager.add('block-header', {
        label: 'Bloc Header',
        content: 
            `<style>
                .mdc_block_header {
                    width:100%;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    height:400px;
                    background-image: url('http://placehold.it/350x250/78c5d6/fff/image1.jpg');
                    background-size: cover;
                }
                .mdc_block_header span {
                    font-size:22px;
                }
            </style>
            `<div class="mdc_block_header"><span>Test</span></div>`,
        attributes: {
          title: 'Insert header_block'
        }
    });

The problem is that I have to use the <style></style> in order to access media queries but when I drag two times the blocks and change the background-image in the editor, it change for the two blocks and not only the one I wanted to..

Answers (3)

artf• November 8, 20180 reactions

You can make that class private to avoid selecting them in Style Manager, in that way you will style the component and not the rule

const privateCls = ['.mdc_block_header'];

editor.on('selector:add', (selector) => {
	if (privateCls.indexOf(selector.getFullName()) >= 0) {
      selector.set({private: 1});
    }
});

ThomasLaigneau• November 9, 20180 reactions

Nice one, working great ! Thank's a lot !

ThomasLaigneau• November 16, 20180 reactions

@artf The code works but I just saw that I can't see anymore the select button to see the Hover state of the element in the editor.. It come back when i remove the code you made me add..

Question

Answers (3)

Related Questions and Answers

Script tag create JSON error

[QUESTION] How to add the button in custom traits

Blocks Manager in GrapesJS Not Working For Columns

[QUESTION] Onload event inside template

Paid Plugins That Match This Issue

Browse Plugin Categories