Download Umbraco CMS 11.0

Version 11.0 of Umbraco was recently released. Umbraco is a content management system for editing and managing dynamic web pages. The whole thing is written in C# and runs on a Microsoft infrastructure. There is a positive and proactive element community behind with more than 50,000 registered users and developers and who ensure a stable flow of releases. The most important changes in version 11 are listed below

New Property Editor: Block Grid Editor

The Block Grid Editor is a new Property Editor focusing on bringing better layout and content structure capabilities to editors. Taking a cue from the popular Grid Layout editor that has been delivering layout capabilities for content editors since Umbraco 7, the Block Grid Editor is built on modern and future-proof technology and provides a vastly improved developer experience on top.

Building Blocks

As you might have guessed from the name – Block Grid Editor – everything is now based on Blocks (Element Types) which allows developers to craft tailored editing experiences and content structures using known conventions. If you’re at all familiar with the Block List Editor (or Nested) you’ll be right at home.

Using Blocks and Element Types allows you to configure content and settings in a much easier way than with the old Grid Layout editor. You can now use Property Editors to create the Blocks. This means you have many more options and tools available out-of-the-box to tailor the editing experience.

Laying out a Grid

There are two different ways of controlling the layout in the Block Grid Editor. Size Options for individual Blocks, and Areas that create predefined content areas, essentially allowing you to nest your grids and control the functionality of these nested grids. This is done to give flexibility in how you work with layout and allow for varying degrees of freedom and creativity.

You can use predefined layouts or a more free-form layout experience where you can resize individual elements. And you of course get all the features you’re used to from the Block List Editor such as adding Settings, drag and drop re-ordering, copy/paste blocks, and Property Actions, all in a familiar editing interface.

Advanced Configuration

With the features listed above, you can create a flexible content editing experience focusing on freedom and creativity or predefined layout structures – or maybe even a combination of both.

There are Advanced configuration options that allow you to add custom views and stylesheets, control the size of the overlay for a Block, and hide the content edit button if you’re creating an inline editing experience or pulling in data that can’t be edited . These are useful tools but not necessary for creating a good editing experience. Still, they can help make a highly customized editing experience that makes your editors happy, and more easily achievable than ever before.

Making a Beautiful Frontend

Having good configuration and a great editing experience is not the full job though – it also needs to translate into something great on the front end. As with all things Umbraco, you have full control over markup and CSS.

There are helper methods to render Block Grid content. You can either use the example rendering that ships with Umbraco or create your own custom renderer. You can also create partial views for your custom Blocks and it all comes with full support for Models Builder so as a developer you can with strongly typed models with the Block Grid Editor.

Getting Started with the Block Grid editor

First, there is extensive documentation for the Block Grid Editor covering all the topics mentioned above.

When you add a new Block Grid Editor to your installation, you get the option to add a sample configuration that adds a few simple blocks such as Headline and Rich Text, and you can start from there. This is very similar to the default configuration that shipped with the old Grid Layout editor but now it is optional.

We’ve also published a Block Grid Example Site showing how a more advanced setup can be achieved with the Block Grid Editor. It has a pre-configured Block Grid with custom views for the back office, clever use of Areas, and more. Ready to be installed into a new Umbraco 11 project straight from NuGet.