grapesjs/docs/api/block_manager.md

BlockManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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

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
• get
• getAll
• getAllVisible
• remove
• getConfig
• getCategories
• getContainer
• render

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 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 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 ...', ...}

Returns Block

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

Examples

// 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 | 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

• opts Object Options (optional, default {})

  • opts.external Boolean? Render blocks in a new container (HTMLElement will be returned)
  • opts.ignoreCategories Boolean? Render blocks without categories

Examples

// 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: '<div>Content</div>'}
]);

// 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 Rendered element