Config.json for a Mautic theme with custom blocks

Development
1

Is there a valid example for a complete config.json for a Mautic theme that supports custom blocks in the GrapesJS Email Builder? I have not been able to make new blocks appear or redefine existing blocks!

This I tried but did not work:

{
“name”: “xxxxxx”,
“description”: “Ein Theme mit benutzerdefinierten Blöcken für den GrapesJS Builder”,
“version”: “1.0.0”,
“builder”: \[“grapesjsbuilder”\],
“features”: \[“email”\],
“author”: “xxxxxxxx”,
“authorUrl”: “https://www.xxxxxxxx.eu”,
“emailbuilder”: {
“blocks”: {
“text”: {
“name”: “Text1”,
“description”: “Einfacher Textblock”,
“html”: “Hier ist ein Beispieltext.”
},
“button”: {
“name”: “Button1”,
“description”: “Vordefinierter Button”,
“html”: “Button Text”
},
“custom_block1”: {
“name”: “Benutzerdefinierter Block”,
“description”: “Ein Block mit eigenem Styling”,
“html”: “Benutzerdefinierter Inhalt hier”
}
}
}
}
2

Welcome @honeypie I’ve moved this over to Development as I think you’re probably more likely to get a response there.

@Leon_Oltmanns I think your team has done some work with custom blocks in the builder, no?

3

How is it possible to show here a config.json with html code. html was removed in my previous post!

4

When you use the editor, there’s a </> icon on the editor. This puts all the selected content into a code block.

1 Like
5

Here is the code once more:

{
  "name": "Custom GrapesJS Theme",
  "description": "Theme with custom blocks for GrapesJS Email Builder",
  "version": "1.0.0",
  "author": "Your Name",
  "builder": ["grapesjsbuilder"],
  "features": ["email"],
  "emailbuilder": {
    "blocks": {
      "text": {
        "name": "Text",
        "description": "Simple text block",
        "html": "<div style=\"font-family: Arial, sans-serif; font-size: 14px; color: #333;\">Sample text</div>"
      },
      "button": {
        "name": "Button",
        "description": "Predefined button",
        "html": "<a href=\"#\" style=\"background-color: #1a73e8; color: white; padding: 10px 25px; border-radius: 6px; text-decoration: none; display: inline-block;\">Click me</a>"
      },
      "custom_block": {
        "name": "Custom Block",
        "description": "Block with custom HTML and styling",
        "html": "<div style=\"background-color:#f4f4f4; padding: 20px; border-radius: 8px; text-align: center; font-size: 16px;\">Custom design</div>"
      }
    }
  }
}
6

(post deleted by author)

7

In the web I found the information config.json is no longer used to define blocks. In the actual version of Mautic blocks are defined in file blocks.json. This file should be stored in the theme in the same directory as the config.json

I found two different examples of blocks.json:

{
  "text": {
    "label": "Text",
    "content": "<mj-text font-size=\"17px\">This is a paragraph.</mj-text>",
    "attributes": {
      "class": "fa fa-camera-retro"
    }
  },
  "button": {
    "label": "Button",
    "content": "<mj-button>Click me now</mj-button>",
    "attributes": {
      "class": "gjs-fonts gjs-f-button"
    }
  }
}

and a second one:

{
  "text": {
    "name": "Text",
    "category": "Basic",
    "html": "<div style=\"font-family: Arial, sans-serif; font-size: 14px; color: #333;\">Sample text</div>"
  },
  "button": {
    "name": "Button",
    "category": "Basic",
    "html": "<a href=\"#\" style=\"background-color:#007bff; color:#fff; padding:10px 20px; border-radius:5px; text-decoration:none; display:inline-block;\">Click me</a>"
  },
  "custom_block": {
    "name": "Custom Block",
    "category": "Custom",
    "html": "<div style=\"background-color:#f4f4f4; padding:20px; border-radius:8px; text-align:center; font-size:16px;\">Custom design</div>"
  }
}

Both versions don’t work for me. So I have the following questions:
Is it possible to use a blocks.json in an email theme ?
If yes - how should it look like ?

Tanks in advance