GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
624 stars 222 forks source link

Give a name to the main block manager ? #266

Closed TomAtTeam closed 1 year ago

TomAtTeam commented 2 years ago

Hi,

I would like to add a name to the block manager on the right so I can organize better my builder.

Capture d’écran (226)

In this case I would like to give the name "Basic" to the block manager like this :

Capture d’écran (227)

How can I proceed ?

Thank you.

Thomas

thewrath commented 2 years ago

Hi,

You can use the block manager from the editor to get a specific block and set it's category.

Here it's a snippet on how i use it :

const categoryBlocks = {
        "Positioning": [
            "mj-1-column",
            "mj-2-columns",
            "mj-3-columns",
            "mj-divider",
            "mj-spacer",
            "mj-divider",
            "mj-navbar",
            "mj-navbar-link",
            "mj-hero",
            "mj-wrapper",
        ],
        "Content": [
            "mj-image",
            "mj-text",
            "mj-button",
            "mj-social-group",
            "mj-social-element",
            "mj-raw",
        ]
    }

    for (const [key, value] of Object.entries(categoryBlocks)) {
        value.forEach(b => {
            const block = editor.BlockManager.get(b);
            if (block) {
                block.set('category', {label: key, open: false})
            }
        })
    }
TomAtTeam commented 2 years ago

Hi,

Thank you very much for your answer, that's exactly what I was looking for and it works perfectly !

Have a nice day !

Thomas