## BlockManager
You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
```js
const editor = grapesjs.init({
blockManager: {
// options
}
})
```
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
```js
const blockManager = editor.BlockManager;
```
## Available Events
* `block:add` - New block added
* `block:remove` - Block removed
* `block:drag:start` - Started dragging block, model of the block is passed as an argument
* `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
* `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
## Methods
* [add][2]
* [get][3]
* [getAll][4]
* [getAllVisible][5]
* [remove][6]
* [getConfig][7]
* [getCategories][8]
* [getContainer][9]
* [render][10]
[Block]: block.html
## getConfig
Get configuration object
Returns **[Object][11]**
## onLoad
Load default blocks if the collection is empty
## add
Add new block to the collection.
### Parameters
* `id` **[string][12]** Block id
* `opts` **[Object][11]** Options
* `opts.label` **[string][12]** Name of the block
* `opts.content` **[string][12]** HTML content
* `opts.category` **([string][12] | [Object][11])** Group the block inside a category.
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][11]** Block attributes (optional, default `{}`)
### Examples
```javascript
blockManager.add('h1-block', {
label: 'Heading',
content: 'Put your title here
',
category: 'Basic',
attributes: {
title: 'Insert h1 block'
}
});
```
Returns **[Block]** Added block
## get
Return the block by id
### Parameters
* `id` **[string][12]** Block id
### Examples
```javascript
const block = blockManager.get('h1-block');
console.log(JSON.stringify(block));
// {label: 'Heading', content: 'Put your ...', ...}
```
Returns **[Block]**
## getAll
Return all blocks
### Examples
```javascript
const blocks = blockManager.getAll();
console.log(JSON.stringify(blocks));
// [{label: 'Heading', content: '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][12]** Block id
### Examples
```javascript
// Id of the block which need to be removed
const id = 'button';
blockManager.remove(id);
```
Returns **[Block]** Removed block
## getCategories
Get all available categories.
It's possible to add categories only within blocks via 'add()' method
Returns **([Array][13] | Collection)**
## getContainer
Return the Blocks container element
Returns **[HTMLElement][14]**
## render
Render blocks
### Parameters
* `blocks` **[Array][13]** Blocks to render, without the argument will render all global blocks
* `opts` **[Object][11]** Options (optional, default `{}`)
* `opts.external` **[Boolean][15]?** Render blocks in a new container (HTMLElement will be returned)
* `opts.ignoreCategories` **[Boolean][15]?** Render blocks without categories
### Examples
```javascript
// Render all blocks (inside the global collection)
blockManager.render();
// Render new set of blocks
const blocks = blockManager.getAll();
const filtered = blocks.filter(block => block.get('category') == 'sections')
blockManager.render(filtered);
// Or a new set from an array
blockManager.render([
{label: 'Label text', content: '
Content
'}
]);
// Back to blocks from the global collection
blockManager.render();
// You can also render your blocks outside of the main block container
const newBlocksEl = blockManager.render(filtered, { external: true });
document.getElementById('some-id').appendChild(newBlocksEl);
```
Returns **[HTMLElement][14]** Rendered element
[1]: https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js
[2]: #add
[3]: #get
[4]: #getall
[5]: #getallvisible
[6]: #remove
[7]: #getconfig
[8]: #getcategories
[9]: #getcontainer
[10]: #render
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[14]: https://developer.mozilla.org/docs/Web/HTML/Element
[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean