ai-cms-grapesjs

[MaxymZorenkofromNinesquares]

Mac, php 8.1, laravel 12.0, aimeos 2025.10.*
I need to create new blocks for ai-cms-grapesjs, but making changes to the custom.js of my own extension does not work.
example code that I made
document.addEventListener('aimeos.cms.editor', function(ev) {
const editor = ev.detail.editor;

// Блок "Hero Banner"
editor.BlockManager.add('hero-banner', {
label: 'Hero Banner',
category: 'Custom',
content: `
<section class="hero-banner" style="padding: 60px 20px; text-align: center; background: #1a1a2e; color: white;">
<h1>Заголовок</h1>
<p>Підзаголовок або короткий опис</p>
<a href="#" class="btn" style="display: inline-block; padding: 12px 30px; background: #e94560; color: white; text-decoration: none; border-radius: 5px;">Кнопка</a>
</section>
`
});

[aimeos]

document.addEventListener('aimeos.cms.editor', function(ev) {
// ...
});

This event doesn't exist. The GrapesJS editor is initialized inside a Vue component, and custom blocks/components are registered through a global configuration object, not through DOM events.

The Correct Approach

To add custom blocks from your own extension, you need to:

1. In your extension's manifest.php, register a JSB2 manifest:

Code: Select all

'custom' => [
    'admin/jqadm' => ['manifest.jsb2'],
]

2. Create manifest.jsb2 in your extension root listing your JS file:

Code: Select all

{
  "pkgs": [{
    "name": "My Custom Blocks",
    "file": "index-js",
    "fileIncludes": [{
      "text": "custom-blocks.js",
      "path": "themes/admin/jqadm/"
    }]
  }]
}

3. In themes/admin/jqadm/custom-blocks.js, add blocks directly to the global config object:

Code: Select all

Aimeos.CMSContent.GrapesJS.blocks['hero-banner'] = {
  category: 'Custom',
  label: 'Hero Banner',
  content: '<section class="hero-banner">...</section>'
};

The initialize() function in the CMS extension (ext/ai-cms-grapesjs/themes/admin/jqadm/custom.js) iterates over setup.blocks and calls editor.BlockManager.add() for each one automatically. So you just need to add your block definition to the Aimeos.CMSContent.GrapesJS.blocks object before the editor initializes — which the JSB2 loading order ensures.

If you also need custom component types (for traits/behaviors), add them to Aimeos.CMSContent.GrapesJS.components:

Code: Select all

Aimeos.CMSContent.GrapesJS.components['hero-banner'] = function(editor) {
  editor.DomComponents.addType('hero-banner', { /* ... */ });
};