Join Sofie, Bjarke, Niels and Rune for a look and the brand new Umbraco release, including demos and highlights.
- Umbraco 11 - not just a CMS release
- On the latest version of .NET
- What’s new in Umbraco 11
- New Property Editor: Block Grid Editor
- Umbraco Marketplace in the Package Section
- Clean(er) Architecture
- Updated dependencies
- Umbraco Forms 11 and Umbraco Deploy 11
- Getting started with Umbraco 11
- Get off to a great start with Umbraco 11 documentation
- Start using Umbraco 11 today
- Roll the credits
Umbraco 11 - not just a CMS release
Another milestone can be checked off the list with today’s release of Umbraco 11. Numerous updates, improvements, and new features for developers and editors alike help make this another solid major release for Umbraco.
This time it’s not just the CMS that is getting updates though. Along with version 11, you also get a shiny new Umbraco Marketplace, for browsing packages, integrations, and Tech Partners, directly from the backoffice or the new website. Documentation for Umbraco 11 is also found a new home, with much-improved discoverability, search, and more.
Let’s not get ahead of ourselves, first up is a look at the new features and improvements in Umbraco 11.
On the latest version of .NET
Hot on the heels of Microsoft’s release of .NET 7, Umbraco CMS is ready with full support for the new version of the framework. And there are plenty of things to be excited about.
By starting new projects, or upgrading existing ones to Umbraco 11, everyone gets to enjoy the benefits of the new version.
Powerful improvements for developers
Both .NET 7 and ASP.NET Core 7 contain a long list of new features and improvements that make development easier and faster, and - just like with Umbraco 10 - you get access to the latest C# version. C#11 adds many new features, not least new functionality for working with raw string literals, meaning you can write much cleaner and more readable code, without having to escape special characters.
There are so many things that will help you be more productive and write better and more performant code. For an extensive overview, refer to Microsoft's documentation:
Yet another massive performance boost
One of the big benefits of being on the latest framework version is that we get to inherit a very long list of performance improvements. Or as Stephen Toub from Microsoft puts it:
“TL;DR: .NET 7 is fast. Really fast. A thousand performance-impacting PRs went into runtime and core libraries this release, never mind all the improvements in ASP.NET Core and Windows Forms and Entity Framework and beyond. It’s the fastest .NET ever. If your manager asks you why your project should upgrade to .NET 7, you can say “in addition to all the new functionality in the release, .NET 7 is super fast.”
You can read an extensive summary of all the many performance improvements here.
What’s new in Umbraco 11
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 backoffice, clever use of Areas, and more. Ready to be installed into a new Umbraco 11 project straight from NuGet:
dotnet add package Umbraco.BlockGrid.Example.Website
In the coming weeks, we will publish a series of deep-dive blog posts for the Block Grid Editor that will go into detail on all the areas along with examples of both configuration, code, and implementation. If you want a quick visual introduction, Kenn Jacobsen from Umbraco HQ did a talk at the recent Umbraco Together event that will help get you off to a good start.
It is worth noting that the Block Grid Editor will be added to Umbraco 10 (10.4) in an upcoming release, to make sure this new powerful Property Editor is available in the LTS version as well.
Umbraco Marketplace in the Package Section
If you go to the Package Section of the Umbraco 11 backoffice you will notice that things have changed quite a bit. Along with Umbraco 11, we have launched a new home for Umbraco packages.
The new marketplace is not only available from the backoffice, but it is also browsable directly on marketplace.umbraco.com. It contains Umbraco packages for Umbraco 8+ as well as integrations and profiles for the growing Tech Partners eco-system. It is the place to go to see what is possible in terms of extending Umbraco and integrating 3rd-party services.
The “old” package listing at our.umbraco.com/packages will still be there for older versions of Umbraco.
Clean(er) Architecture
In this release, we have further abstracted some of the tightly coupled dependencies that existed in Umbraco 9 and 10. Even though the last couple of major releases have made big strides in this area and a lot of work went into creating cleaner architecture, it could still be difficult to upgrade some dependencies or indeed swap them out entirely.
This is now easier with improvements to the architecture and how these dependencies are referenced. For most, the changes here will not be noticeable. Should you encounter one of these situations, the path forward is more straightforward. You can find more details on how we have decoupled imaging and SQL dependencies in this breaking change announcement.
Updated dependencies
One of the huge benefits of having a fast major release cadence (every 6 months) is that we get to keep Umbraco up-to-date with all the fantastic work that is being done in both the underlying framework, as mentioned above, but also all the other dependencies used in Umbraco CMS. This means more secure and performant installations, with all the latest functionality.
TinyMCE
Aside from the obvious and beneficial upgrade to .NET 7, there are a number of updates, both big and small. Especially worth mentioning is the upgrade of TinyMCE, the JS framework used for Rich Text editing in the backoffice. Upgrading from version 4 to version 6 of TinyMCE is a big step with an improved user and developer experience, enhanced performance, and more.
Note that if you have custom plugins for TinyMCE, these will need to be migrated. You can read more about what is involved in the release candidate post.
And more
There are many smaller dependency updates included in the release:
- Async from 2.6.3 to 2.6.4
- TinyMCE from v4 to v6
- Minimist from 1.2.5 to 1.2.7
- Eventsource from 1.1.0 to 1.1.2
- Updated Smidge, Npoco and MailKit
- Socket.io-parser from 4.0.4 to 4.0.5
- Minimatch from 3.0.4 to 3.1.2
- Engine.io and Socket.io to latest version
Umbraco Forms 11 and Umbraco Deploy 11
Also released today are new versions for both Umbraco Forms and Deploy. While they are new major versions, the changes have been made primarily to ensure full support for running on Umbraco 11 and .NET 7.
You can read the details in the version-specific upgrade notes for Umbraco Forms and Deploy.
Getting started with Umbraco 11
Getting Umbraco 11 up and running is just as easy as you are used to:
Umbraco 11 on Umbraco Cloud
From today, Umbraco 11 is available for new projects created on Umbraco Cloud - it is the easiest way to start a new Umbraco project - so why not head on over and create your next project or take a free 14-day trial?
As the entire project will need to be upgraded to .NET 7, existing Umbraco Cloud projects will need to follow the major upgrade documentation to go from Umbraco 10 to 11.
Unfortunately, we have to ask our Cloud customers to wait with the upgrade from 10 to 11 for a bit - currently, there are some issues with the framework update, and we are working to resolve the issue with our partners at Microsoft.
Install it on your own
If you’re installing Umbraco elsewhere the standard installation instructions are the way to go, and if you are upgrading on-premises installations remember to check the Upgrading Umbraco documentation.
Get off to a great start with Umbraco 11 documentation
The documentation team has been busy up to the release of Umbraco 11 as well. I’ve already linked to a few of the articles but there are more that have been updated:
- Requirements for Umbraco 11
- Block Grid Editor
- Rich Text Editor (TinyMCE)
- LogViewer
- Breaking changes in Umbraco 11
As you can see it is a small list. This just underlines that even though it is a major release, containing breaking changes, the vast majority are related to the framework update and architecture changes. For the most part, you should not be affected by these.
So upgrading to Umbraco 11 is the easiest major upgrade yet!
A new home for Documentation
So if there aren’t that many changes, what has the documentation team been busy doing? Well, if you’ve clicked any of the documentation links in the article you’ll notice that things look different, and hopefully a lot better.
Umbraco Documentation has moved to a new platform with improved design, easier navigation, and better search functionality. This means that from now on all documentation for Umbraco 10+ is available at docs.umbraco.com.
Start using Umbraco 11 today
Umbraco 11 is available everywhere you get your Umbraco and we’re proud of this new major. So many new improvements and updates that will make your Umbraco sites faster and a delight to work with, all while keeping the impact on existing installations to a minimum. You can find the full list of improvements, updates, and changes in the Umbraco 11 release notes.
Roll the credits 💙
Of the 77 bug fixes and feature additions in Umbraco 11, a total of 6 of them have been contributed by the community, by 4 unique contributors.
We also want to thank the many people who provided feedback for the release candidate (RC) over the past almost 2 months 🙏 The extended 6 week RC period is really paying off and the community has been busy testing, commenting, and contributing to the RC - resulting in a polished Umbraco 11 release we can all be proud of.
And of course, as a thank you, we’ve just added another bunch of trees to our growing plot for today’s release to celebrate your contributions! 🌳🌲🌴
