Updating to a newer version of Umbraco CMS means improved features, fixes, and performance. And the Umbraco 11 is no exception to this. In addition to its overall improved performance that makes the solution faster and more sustainable, the buzz is its new tool: The Block Grid Editor. This tool makes it possible to construct websites in new ways and ensures a good content presentation. It has several benefits for the editor and provides a better developer experience.
To accommodate more Umbraco users, the Block Grid Editor was also released to newer versions of Umbraco 10.
Before the final release of the tool, the Block Grid Editor was refined by Umbraco’s dedicated community. A handful of users got to try it out and provided their comments and feedback to develop the final optimisation. As Umbraco Contributing Gold Partners at Novicell, we also contributed with our inputs and insights.
With all this praise for the new tool, it must be time to explain what the Block Grid Editor can do.
As the name indicates, the concept is a grid based on blocks. It’s an upgrade of the existing Grid Layout Editor launched with Umbraco 8.14 with new improvements in terms of development and editing experience.
Also, it’s a new Property Editor for Umbraco built on the same principles as the Block List Editor. The common denominator for the two is that both editors use Element Types as the basis for storing data as Blocks.
Where the Block List Editor makes it possible to create content stored as a list Block, the Block Grid structure uses the same fundamental structure. Still, it comes with extra layout options and other improvements that we will now briefly uncover a selection of.
- Block Size: A Block can consist of both columns and rows, and the standard structure of the Block Grid Editor is a 12 columns grid. If you would like to change this structure, it’s still an option to define how many Columns a Block should contain.
Also, regarding the block size, another new feature enables you to re-size Blocks by simply clicking and dragging.
- Block Areas: This new feature makes it possible to create containers holding several Blocks, called an Area. This comes in handy when you want a more rigid structure for content and wish for a two-column layout. The Block Area gives a predefined fixed layout wherein Blocks can be placed.
- Editing Capabilities: Many tools and conversions from the Block Layout Editor have been transferred to the Block Grid Editor. It’s possible to copy/paste Block Content, insert the content between Blocks and use functions such as Copy All and Remove All items.
To visualise this tangled technological talk, Umbraco has filmed some how-to tutorials using the Block Grid Editor. The videos dive deeper into the tool's new features and explains how to construct the Grid in the Umbraco backend step by step. Hopefully this makes the learning process of managing the tool more tangible.
The video below is centred around setting up a Layout Area.
When learning to use this tool, it's important to get a handle on the basic things first. Once you know the basics like the back of your hand and are ready to level up, there is plenty of opportunity to go even more in-depth with the tool's functionalities. Here, we would refer you to keep an eye on Umbraco's website, where they continuously publish blog posts about the possibilities with the Block Grid Editor to quench your thirst for knowledge.
Summing it up, you have added a powerful feature to your digital toolbox by learning to set up a Block Grid. With this tool, you, as an editor, are guaranteed a smoother editing interface and improved configuration, not to mention an overall better developer experience. Business-wise, the Block Grid Editor will help better represent your company’s content with beautiful pages. All in all, getting familiar with the tool is a beneficial addition to your digital skills in Umbraco.