How to Create a Custom Block Order in Volto?

One of the key features of Volto is the ability to create and organize content using blocks. By default, Volto provides a set of predefined blocks, but sometimes you may want to customize the order of these blocks or add new ones to better suit your needs. In this blog post, we will explore how to create a custom block order in Volto.

src/config.js

Step 1: Define the custom order

const customBlocksOrder = [
 { id: 'customOrderId1', title: 'Customer Order 1' },
 { id: 'customOrderId2', title: 'Customer Order 2' },
 { id: 'socialMedia', title: 'Social Media'}
];

The ‘customBlocksOrder’ array defines the order of custom blocks that will be displayed in Volto’s block editor. Each item in the array represents a custom block and consists of an ‘id’ and a ‘title’. The ‘id’ is a unique identifier for the block, and the ‘title’ is the name or label that will be displayed in the block selector.

By defining the custom block order in this array, you can control the arrangement of blocks and tailor it to your specific needs. The order of blocks in the array determines how they will be rendered in the block editor interface, allowing you to prioritize certain blocks or group them together based on their functionality or relevance.

In the provided code snippet, ‘customOrderId1’’ represents the first custom block order, ‘customOrderId2’ represents the second custom block order, and ‘socialMedia’ represents the third custom block order. These IDs can be customized to match the unique IDs of your custom blocks, and the corresponding titles can be adjusted to reflect the purpose or content of each block.

Step 2: Add to customBlocksOrder to the block config.

config.blocks.groupBlocksOrder = config.blocks.groupBlocksOrder.concat(customBlocksOrder);

The code ‘config.blocks.groupBlocksOrder.concat(customBlocksOrder)’ appends the ‘customBlocksOrder’ array to the existing groupBlocksOrder array. It concatenates the arrays together, effectively adding the custom block groups to the end of the existing block group order.

Step 3:  Adding an “Instagram Feed” Block to the Configuration

We are adding a new block called “Instagram Feed” to the configuration. We define the properties of the block in the ‘config.blocks.blocksConfig.instagramfeed’ object.

config.blocks.blocksConfig.instagramfeed = {
    id: 'instagramfeed',
    title: 'Instagram Feed',
    group: 'socialMedia',
    icon: televisionSVG,
    view: View,
    edit: Edit,
    restricted: false,
    mostUsed: true,
    sidebarTab: 1,
    security: {
      addPermission: [],
      view: [],
    },
  };

We should assign a group to our block. Here we assigned the block to the ‘socialMedia’ group.

group: 'socialMedia'

Here we can see our block Instagram feed under the custom block order ‘Social Media’

mostUsed: true,

If mostUsed is True, then this block will be visible in the Most Used Section.

Here’s a summary of the steps:

1. Define the custom order: Create an array (customBlocksOrder) that specifies the order of custom blocks, using unique IDs and corresponding titles for each block.

2. Add customBlocksOrder to the block config: Append the customBlocksOrder array to the existing groupBlocksOrder array in the config object. This ensures that the custom block order is incorporated into the overall block group order.

3. Add a new block to the configuration: Define the properties of the new block (e.g., “Instagram Feed”) in the config.blocks.blocksConfig object. Set the necessary properties such as ID, title, group, icon, view component, edit component, etc.

By following these steps, you can customize the block order and add new blocks to the Volto.

Conclusion

Customizing the block order in Volto allows you to organize and prioritize blocks according to your specific requirements. It provides flexibility in arranging blocks and introducing new ones, enhancing the editing capabilities and user experience within the Volto.