grapesjs/docs/api/block_manager.md

BlockManager

• add
• get
• getAll
• getAllVisible
• getCategories
• getContainer
• render

Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.

Before using methods you should get first the module from the editor instance, in this way:

var blockManager = editor.BlockManager;

Parameters

• config Object Configurations
  • config.blocks Array<Object> Default blocks (optional, default [])

Examples

...
{
    blocks: [
     {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
     ...
   ],
}
...

getConfig

Get configuration object

Returns Object

onLoad

Load default blocks if the collection is empty

add

Add new block to the collection.

Parameters

• id string Block id
• opts Object Options
  • opts.label string Name of the block
  • opts.content string HTML content
  • opts.category (string | Object) Group the block inside a catgegory. You should pass objects with id property, eg: {id: 'some-uid', label: 'My category'} The string will be converted in: 'someid' => {id: 'someid', label: 'someid'}
  • opts.attributes Object Block attributes (optional, default {})

Examples

blockManager.add('h1-block', {
  label: 'Heading',
  content: '<h1>Put your title here</h1>',
  category: 'Basic',
  attributes: {
    title: 'Insert h1 block'
  }
});

Returns Block Added block

get

Return the block by id

Parameters

• id string Block id

Examples

const block = blockManager.get('h1-block');
console.log(JSON.stringify(block));
// {label: 'Heading', content: '<h1>Put your ...', ...}

getAll

Return all blocks

Examples

const blocks = blockManager.getAll();
console.log(JSON.stringify(blocks));
// [{label: 'Heading', content: '<h1>Put your ...'}, ...]

Returns Collection

getAllVisible

Return the visible collection, which containes blocks actually rendered

Returns Collection

remove

Remove a block by id

Parameters

• id string Block id

Returns Block Removed block

getCategories

Get all available categories. It's possible to add categories only within blocks via 'add()' method

Returns (Array | Collection)

getContainer

Return the Blocks container element

Returns HTMLElement

render

Render blocks

Parameters

• blocks Array Blocks to render, without the argument will render all global blocks

Examples

// Render all blocks (inside the global collection)
blockManager.render();

// Render new set of blocks
const blocks = blockManager.getAll();
blockManager.render(blocks.filter(
 block => block.get('category') == 'sections'
));
// Or a new set from an array
blockManager.render([
 {label: 'Label text', content: '<div>Content</div>'}
]);

// Back to blocks from the global collection
blockManager.render();

Returns HTMLElement Rendered element