Add documentation aboud custom render in Blocks

docs/modules/Blocks.md

@@ -6,6 +6,8 @@ title: Block Manager
 
 <p align="center"><img src="http://grapesjs.com/img/sc-grapesjs-blocks-prp.jpg" alt="GrapesJS - Block Manager" height="400" align="center"/></p>
 
+[[toc]]
+
 The Block is a group of [Components] and can be easily reused inside templates.
 
 The difference between components and blocks: The component is more atomic, so a single image,  a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).
@@ -69,6 +71,57 @@ If you want to check the complete list of available Component's properties, chec
 [https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js](https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js)
 
 
+
+
+
+
+## Custom render <Badge text="0.14.55+"/>
+
+If you need to customize the aspect of each block you can pass a `render` callback function in the block definition. Let's see how it works.
+
+As a first option, you can return a simple HTML string, which will be used as a new inner content of the block. As an argument of the callback you will get an object containing the following properties:
+
+* `model` - Block's model (so you can use any passed property to it)
+* `el` - Current rendered HTMLElement of the block
+* `className` - The base class name used for blocks (useful if you follow BEM, so you can create classes like `${className}__elem`)
+
+```js
+blockManager.add('some-block-id', {
+  label: `<div>
+      <img src="https://picsum.photos/70/70"/>
+      <div class="my-label-block">Label block</div>
+    </div>`,
+  content: '<div>...</div>',
+  render: ({ model, className }) => `<div class="${className}__my-wrap">
+      Before label
+      ${model.get('label')}
+      After label
+    </div>`,
+});
+```
+
+<img :src="$withBase('/block-custom-render.jpg')">
+
+
+Another option would be to avoid returning from the callback (in that case nothing will be replaced) and edit only the current `el` block element
+
+```js
+blockManager.add('some-block-id', {
+  // ...
+  render: ({ el }) => {
+    const btn = document.createElement('button');
+    btn.innerHTML = 'Click me';
+    btn.addEventListener('click', () => alert('Do something'))
+    el.appendChild(btn);
+  },
+});
+```
+<img :src="$withBase('/block-custom-render2.jpg')">
+
+
+
+
+
 [Component]: </api/component.html>
 [Components]: <Components.html>
 [Blocks API]: </api/block_manager.html>