How do I add my classes CSS file when using components?

[Leozinho0]

I have this component:

editor.BlockManager.add('rodape', { label: '3 Colunas', content: { tagName: 'div', draggable: true, attributes: { class: 'row' }, style: { 'display': 'flex', 'justify-content': 'flex-start', 'align-items': 'stretch', 'flex-wrap': 'nowrap', 'padding': '10px', }, content: 'lala' } });

I want to use the class ROW but where do I define this class? When I drag this component block inside the canvas the CSS of the class is not even loaded.

[RJCAM]

Hi, @Leozinho0 You can do it like this:

editor.BlockManager.add('rodape', {
    label: '3 Colunas',
    attributes: {
        title: 'Insert h1 block',
        class: 'gjs-fonts gjs-f-b1',
    },
    content: `<div class="minha_classe">lala</div>
            <style>
                .minha_classe {
                    display: flex;
                    justify-content: flex-start;
                    align-items: stretch;
                    flex-wrap: nowrap;
                    padding: 10px;
                }
            </style>`,
});

[Leozinho0]

Hi. Thank you for answering. It doesn't work.

If you check https://grapesjs.com/demo.html when you add a component (Ex.: 3 columns) and click to export the html you will see that it loads the .row and .cell classes.

[RJCAM]

...
attributes: {
        class: 'gjs-fonts gjs-f-b1', // This class only ads the block image background that is shown in the blocks manager
 },
content: `<div class="row">lala</div> // This is what you really need, add the class directly to the html content of the block
...

This is working fine, see here:

[Leozinho0]

I mean, I need the CSS of the class row to be loaded into the canvas. Check this image:

[RJCAM]

Actually, the code I give to you works, to see what I mean, try this:

1. Drop custom created component into canvas, as you said it won't load the css ".row" style
2. Now drop any column block inside the canvas, and now you see the ".row" css is loaded.

This is because the styles are inside the block itself and they are only rendered when you drop the column block into the canvas. You can check printing this in the console that the html and css of the component are made like the code I give to you in my first comment. editor.BlockManager.get("column3").attributes.content

[Leozinho0]

Não funciona. :/

O editor inicia com os css * e body.

Quando adiciono o bloco com a div com a classe ".row" nada muda no quadro CSS do lado, consequentemente nao tenho minha classe sendo aplicada no canvas.

[Leozinho0]

Se eu crio o componente assim:

editor.BlockManager.add('rodape', { label: '3 Colunas', content: { tagName: 'div', draggable: true, attributes: { class: 'row' }, style: { 'display': 'flex', 'justify-content': 'flex-start', 'align-items': 'stretch', 'flex-wrap': 'nowrap', 'padding': '10px', },

Ele adiciona o CSS, mas atrelado ao ID e não a classe. Isso não funciona para o flexbox que quero fazer, pq a cada nova adição ele cria um novo ID e repete o CSS para esse id.

[artf]

@Leozinho0 only in English here, @RJCAM gave to you the right solution