## 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;
```
- [add][2]
- [get][3]
- [getAll][4]
- [getAllVisible][5]
- [remove][6]
- [getConfig][7]
- [getCategories][8]
- [getContainer][9]
- [render][10]
## 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 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][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 ...', ...}
```
## 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