Nesting blocks

Nesting blocks within blocks

You can nest blocks within blocks in two different ways. One would be an array of blocks which could be anything. Another way would be an object with keys as the block id and the data as the value

Nesting blocks within blocks using an array

When nesting blocks with an array you must provide an array with blocks like shown below, in this case the BlockBar has a child block which is named BlockFoo. When nesting blocks within other blocks while using an array you cannot type the contents of the array since its dynamic, when you want to force certain blocks as a child you you should use the object method of nesting blocks.

{
  "statusCode": 200,
  "data": {
  "title": "Home",
  "data": {},
  "blocks": [
    {
      "id": "BlockBar",
      "data": {
        "blocks": [
          {
            "id": "BlockFoo",
            "data": {}
          }
        ]
      }
    }
  ]
}

You should update the BlockBarData.js file to let it expect blocks as data, since it's an array it could be anything so we can use the following:

import VueTypes from 'vue-types';

export default {
	blocks: VueTypes.array,
};

To make sure the BlockFoo is dynamically rendered within BlockBar you have to add the following piece of code to the blockBar template file:

<component
	v-for="(block, index) in data.blocks"
	@isReady="handleBlockComponentReady"
	:scrollId="block.scrollId"
	:data="block.data"
	:debugLabel="true"
	:is="block.id"
	:componentId="block.id + '.' + block.blockIndex"
	:key="index" />

This will make sure the data is passed to the new block, all the callback methods are properly set and the right component is loaded. Everything should be pretty much plug and play!

Nesting blocks within blocks using an object

When nesting blocks within an object you must provide an object with blocks like shown below, in this case the BlockBar has a child block which is named BlockFoo

{
  "statusCode": 200,
  "data": {
  "title": "Home",
  "data": {},
  "blocks": [
      {
        "id": "BlockBar",
        "data": {
          "blocks": {
            "BlockFoo": {
              "data": {}
            }
          }				
        }
      }
    ]
  }
}

You should update the BlockBarData.js file to let it expect blocks as data, since it's an object you could use the following:

import VueTypes from 'vue-types';

export default {
	blocks: VueTypes.shape({
		BlockBar: VueTypes.shape({
			blockIndex: VueTypes.number,
			data: VueTypes.object
		});
	}),
};

Note: The blockIndex has to be added when we use object style of nesting blocks

To make sure the BlockFoo is dynamically rendered within BlockBar you have to add the following piece of code to the blockBar template file:

<component
	v-for="(block, key) in data.blocks"
	@isReady="handleBlockComponentReady"
	:class="$style[camelCase(key)]"
	:scrollId="block.scrollId"
	:data="block.data"
	:is="key"
	:componentId="key + '.' + block.blockIndex"
	:key="key" />

This will make sure the data is passed to the new block, all the callback methods are properly set and the right component is loaded. Everything should be pretty much plug and play!