Render block outside by using `external` option. #1716

src/block_manager/index.js

@@ -63,15 +63,14 @@ module.exports = () => {
       // Global blocks collection
       blocks = new Blocks([]);
       blocksVisible = new Blocks([]);
-      (categories = new BlockCategories()),
-        (blocksView = new BlocksView(
-          {
-            // Visible collection
-            collection: blocksVisible,
-            categories
-          },
-          c
-        ));
+      categories = new BlockCategories();
+      blocksView = new BlocksView(
+        {
+          collection: blocksVisible,
+          categories
+        },
+        c
+      );
 
       // Setup the sync between the global and public collections
       blocks.listenTo(blocks, 'add', model => {
@@ -205,8 +204,9 @@ module.exports = () => {
 
     /**
      * Render blocks
-     * @param  {Array} blocks Blocks to render, without the argument will render
-     *                        all global blocks
+     * @param  {Array} blocks Blocks to render, without the argument will render all global blocks
+     * @param  {Object} [opts={}] Options
+     * @param  {Boolean} [opts.external] Render blocks in a new container (HTMLElement will be returned)
      * @return {HTMLElement} Rendered element
      * @example
      * // Render all blocks (inside the global collection)
@@ -214,9 +214,9 @@ module.exports = () => {
      *
      * // Render new set of blocks
      * const blocks = blockManager.getAll();
-     * blockManager.render(blocks.filter(
-     *  block => block.get('category') == 'sections'
-     * ));
+     * 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>'}
@@ -224,10 +224,24 @@ module.exports = () => {
      *
      * // 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);
      */
-    render(blocks) {
+    render(blocks, opts = {}) {
       const toRender = blocks || this.getAll().models;
 
+      if (opts.external) {
+        return new BlocksView(
+          {
+            collection: new Blocks(toRender),
+            categories
+          },
+          c
+        ).render().el;
+      }
+
       if (!blocksView.rendered) {
         blocksView.render();
         blocksView.rendered = 1;